-
Notifications
You must be signed in to change notification settings - Fork 0
/
Class与Style绑定.html
135 lines (128 loc) · 4.98 KB
/
Class与Style绑定.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
</head>
<style>
</style>
<body>
<div id="app">
<p>{{msg}}</p>
<p>computed:{{reverseMsg}}</p>
<p>methods:{{reverseMsgfn()}}</p>
<p>now:{{now}}</p>
<label for="">firstName:<input type="text" v-model='firstName'></label>
<label for="">lastName:<input type="text" v-model='lastName'></label>
<p>fullName:{{fullName}}</p>
</div>
<div id="app2">
<label for="">firstName:<input type="text" v-model='firstName'></label>
<label for="">lastName:<input type="text" v-model='lastName'></label>
<p>fullName:{{fullName}}</p>
</div>
<div id="app3">
你的问题是：<input type="text" v-model="question">
答案是：<p v-text="answer"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hello Vue!',
firstName: 'first',
lastName: 'last',
fullName: 'first last'
},
computed: {
reverseMsg: function(){
return this.msg.split(' ').reverse().join(' ');
},
now: function(){
return Date.now();
}
},
methods: {
reverseMsgfn: function(){
return this.msg.split(' ').reverse().join(' ');
}
},
watch: {
firstName: function(val){
this.fullName = val + ' ' + this.lastName;
},
lastName: function(val){
this.fullName = this.firstName + ' ' + val;
}
}
});
vm.msg = 'hello world!';//此时的reverseMsg=‘world! hello’
//我们先声明一个计算属性reverseMsg。我们提供的函数将作为vm.reverseMsg的getter；
//vm.reverseMsg的值是取决于vm.message的值
//我们可以像绑定普通属性一样在模板中绑定计算属性。Vue知道vm.reverseMsg的值是依赖于vm.msg，
//因此当vm.msg发生改变时，所有依赖于vm.reverseMsg的绑定也会更新。
//我们已经以申明的方式创建了这种依赖关系： 计算属性的getter是没有副作用的，这是他易于测试和推理
//我们可以将同一个函数定义为一个method而不是一个计算属性
//对于最终结果，这两个方法效果是相同的。不同的是计算属性是基于他们的依赖进行缓存的
//计算属性只有在他的相关依赖发生改变时才会重新求值
//这就意味着，在msg值没有发生改变，reverseMsg的值就不会发生改变，这期间多次访问reverseMsg属性都是之前的的计算结果，而是不值再次进行执行函数
//如果我们不需要缓存的话，我们就可以用method代替
//Vue提供了一种方式来观察和响应Vue实例上的数据变动：watch属性
var vm2 = new Vue({
el: '#app2',
data: {
firstName: 'first',
lastName: 'last'
},
computed: {
fullName : {
get: function(){
return this.firstName +' '+ this.lastName;
},
set: function(newVal){
var names = newVal.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
//computed也可以实现相同的效果，而且代码更加简洁易懂
//计算属性，一般默认只有getter，不过我们也可以提供一个setter,我们就可以通改变fullName值，也可以动态改变firstName和lastName
// 虽然计算属性在大多数情况下是可以替代watch的，但是在执行异步操作或者更大开销操作的时候watch更适合
</script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
<script>
new Vue({
el: '#app3',
data: {
question: '',
answer: '你不提问我没法回答'
},
watch: {
question: function(){
this.answer = '问题通常包含一个问号';
this.getAnswer();
}
},
methods: {
getAnswer: _.debounce(function () {
var _this = this;
if(_this.question.indexOf('?') === -1){
return _this.answer = '问题通常包含一个问号';
}
_this.answer = '搜索中...';
axios.get('https://yesno.wtf/api').then(function(response){
_this.answer = _.capitalize(response.data.answer);
}).catch(function(err){
_this.answer = 'err'
})
},500)
}
});
//会用watch选项允许我们执行异步操作，限制我们操作的频率并在得到结果前设置中间状态，这是计算属性无法做到的
</script>
</body>
</html>