1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 计算属性title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
22 <div id="root">
23 姓：<input type="text" v-model="firstName" > <br />
24 名：<input type="text" v-model="lastName" > <br />
25 全名：<span>{{fullName}}span>
26 div>
27 body>
28
29 <script type="text/javascript" >
30 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
31 let vm = new Vue({
32 el: '#root',
33 data:{
34 firstName: '张',
35 lastName: '三'
36 },
37 computed:{
38 fullName: {
39 get(){ // get什么时候调用：1.初次读取fullName的时候，2.所依赖的数据发生变化的时候调用。3.其它都是直接从缓存中获取fullName的值
40 return this.firstName + '-' + this.lastName
41 },
42 set(value){ // 当this.fullName='李-四'值修改的时候调用
43 let arr = value.split('-');
44 this.firstName = arr[0];
45 this.lastName = arr[1];
46 }
47 },
48 fullName1:function(){ // 计算属性简写（当计算属性只考虑读取才能简写，fullName1直接当做get）
49 return this.firstName + '-' + this.lastName
50 }
51 }
52 })
53 script>
54 html>
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>Vue 监视属性title>
6 <script type="text/javascript" src="../js/vue.js">script>
7 head>
8 <body>
9
23 <div id="root">
24 <h2>今天天气很{{info}}h2>
25 <button @click="changeWeather">切换天气button>
26 <br />
27 <h3>a的值是：{{numbers.a}}h3>
28 <button @click="numbers.a++">点我让a+1button><br />
29 <h3>b的值是：{{numbers.b}}h3>
30 <button @click="numbers.b++">点我让b+1button><br />
31 div>
32 body>
33
34 <script type="text/javascript" >
35 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
36 let vm = new Vue({
37 el: '#root',
38 data:{
39 isHot: false,
40 numbers: {
41 a:1,
42 b:1
43 }
44 },
45 computed:{
46 info(){
47 return this.isHot ? '炎热' : '凉爽';
48 }
49 },
50 methods:{
51 changeWeather(e){
52 this.isHot = ! this.isHot;
53 }
54 },
55 watch:{
56 // isHot:{ // 不仅可以监视data中的数据，还可以监控computed中的数据
57 // immediate: true, // 初始化时自动调用一下handler
58 // handler(newValue, oldValue){ // 当isHot发生改变时调用
59 // console.log(newValue, oldValue);
60 // console.log('isHot被修改了！');
61 // }
62 // },
63 // isHot(newValue, oldValue){ // 简写模式，缺点是没办法设置immediate、deep属性
64 // console.log(newValue, oldValue);
65 // },
66 'numbers.a':{ // 监测多层次结构中某个属性的变化
67 handler(newValue, oldValue){
68 console.log('numbers.a被修改了！');
69 }
70 },
71 numbers:{
72 deep: true, // 监测多层次结构的所有变化，该值默认为false不监视
73 handler(newValue, oldValue){
74 console.log('numbers被修改了！');
75 }
76 }
77 }
78 });
79 // 另一种添加监视属性的方式
80 // 好处：可以根据用户的行为从而决定监视哪个属性
81 vm.$watch('isHot',{
82 immediate: true, // 初始化时自动调用一下handler
83 handler(newValue, oldValue){ // 当isHot发生改变时调用
84 console.log(newValue, oldValue);
85 console.log('isHot被修改了！');
86 }
87 })
88 // 简写模式，缺点是没办法设置immediate、deep属性
89 // vm.$watch('isHot',function(newValue, oldValue){ // 当isHot发生改变时调用
90 // console.log(newValue, oldValue);
91 // console.log('isHot被修改了！');
92 // })
93 script>
94 html>