3.Vue数据和方法
数据
响应式
响应式: data中的property改变时，视图也会更新为新的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id='app'>
{{message}} // 1 ---> 2
</div>
</body>
<script>
var data = {message: 1};
var vm = new Vue({
el: '#app',
data: data
})
vm.message = 2;
</script>
|
使用Object.freeze()可以使property变为非响应式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <body>
<div id='app'>
{{message}} // 仍然为1
</div>
</body>
<script>
var data = {message: 1};
Object.freeze(data);
var vm = new Vue({
el: '#app',
data: data
})
vm.message = 2;
</script>
|
也可以使用 v-once来一次性插值,之后就不会更新
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id='app' v-once>
{{message}} // 仍然为1
</div>
</body>
<script>
var data = {message: 1};
var vm = new Vue({
el: '#app',
data: data
})
vm.message = 2;
</script>
|
展示原始html
用插值表达式的话会按字符串输出，使用v-html可以展示原始html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id='app'>
<p v-html='message'></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '<font color="red">a</font>'
}
})
</script>
|
在插值表达式里使用js
{{}}里面还可以使用单个js的表达式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id='app'>
{{message + 10}} //11
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 1
}
})
</script>
|
缩写
v-bind:... 可以缩写为:...
v-on:...可以缩写为@...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <body>
<div id='app' :class='class1' @click='click1'>
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'aaa',
class1: 'class1'
},
methods: {
click1 : function() {
alert("被点击了");
}
}
})
</script>
|
方法
前缀带$的为Vue提供的方法
如:
$watch(prop, function), 当prop值改变时调用function
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <body>
<div id='app'>
{{message}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 1
}
})
vm.$watch('message', function(newVal, oldVal){
console.log('oldVal:' + oldVal + ', newVal:' + newVal);
})
vm.message = 2;
</script>
|
参考API — Vue.js (vuejs.org)