Vue.js学习笔记2.计算属性 vs 侦听属性

<!DOCTYPE html>  
<html>  
<head>  
<title>page2</title>  
<meta http-equiv="X-UA-Compatible" content="IE=edge" />  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<meta name="apple-mobile-web-app-capable" content="yes" />  
<script src="http://bj.xdf.cn/huodong/js/jquery-1.12.3.min.js"></script>  
<script src="https://unpkg.com/vue"></script>  
</head>  
<body>  
	<div id="example">
	  <p>Original message: "{{ message }}"</p>
	  <p>Computed reversed message: "{{ reversedMessage }}"</p>
	  <p>Reversed message: "{{ reversedMessageMethod() }}"</p>
	  <p>{{now}}</p>
	  <p>{{now1()}}</p>
	</div>
	<div id="demo">{{ fullName }}</div>
	<div id="demo1">{{ fullName }}</div>
	<script>  
		var vm = new Vue({
		  el: '#example',
		  data: {
			message: 'Hello'
		  },
		  computed: {
			// 计算属性的 getter
			reversedMessage: function () {
			  // `this` 指向 vm 实例,只要vm.message发生改变，这个vm.reversedMessage属性也会跟着改变
			  return this.message.split('').reverse().join('')
			},
			now: function() {//每次调用vm.now的结果，都是最初加载页面时的值
			  return Date.now()
			}
		  },
		  // 在组件中
		  methods: {
		    reversedMessageMethod: function () {//只要vm.message发生改变，这个vm.reversedMessage属性也会跟着改变
		      return this.message.split('').reverse().join('')
		    },
			now1: function() {//每次调用vm.now1()的结果，都是最新的值
			  return Date.now()
			}
		  }
		})
		
		//计算属性 vs 侦听属性
		//不要用vm1这种，要用vm2
		var vm1 = new Vue({
		  el: '#demo',
		  data: {
			firstName: 'Foo',
			lastName: 'Bar',
			fullName: 'Foo Bar'
		  },
		  watch: {
			firstName: function (val) {
			  this.fullName = val + ' ' + this.lastName
			},
			lastName: function (val) {
			  this.fullName = this.firstName + ' ' + val
			}
		  }
		})
		//推荐这种
		var vm2 = new Vue({
		  el: '#demo1',
		  data: {
			firstName: 'Foo',
			lastName: 'Bar'
		  },
		  computed: {
			fullName: function () {
			  return this.firstName + ' ' + this.lastName
			}
		  }
		})
	</script>  
</body>  
</html>
Vue.js学习笔记2.计算属性 vs 侦听属性

猜你喜欢
