计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
该属性与data,methods这些属于同一级别,你可以在这个属性里面写一个函数，这个函数的结果就会成为外界使用这个函数的结果。效果类似于methods.
基本语法:
html方面:
<div id="demo">
    {{demo}}
</div>

vue方面:
<script>
    var vm = new Vue({
        el:'#demo',
        computed:{
            demo:function(){
                return '123'
            }
        },
    })
</script>

#该属性与methods的区别
	methods你每次都需要重新调用一遍函数，若是一个确定的固定的值，那这是很没有必要的。会浪费大量的计算资源。这个时候我们就可以使用computed,该属性会将内部的函数计算的结果保存下来。以后你每次调用他就会将这个值直接返回给你，而不会在进行一遍函数的运算

监听器

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
Vue提供了一个属性帮助我们监听属性的变化，当属性发生了变化的时候，他会自己去调用这个属性里面的函数

html相关:
<div id="demo">
	<button type="button" @click="button_test">测试</button>
	{{test}}
</div>



Vue相关:
var vm = new Vue({
	el:'#demo',
	data:{
		'test':'test'
	},
	watch:{
		test: function(new_test,old_test){
			console.log(new_test)
			console.log(old_test)
		}
	},
	methods:{
		button_test:function(){
			this.test += 'a'
		}
	}
	
})