vue1

Posted 2022-05-12 zhangzhengyang

把数据同步由手动转换为自动

 1 import Vue from ‘vue‘
 2 import App from ‘./App.vue‘
 3 
 4 // 阻止启动生产消息  没有多大作用
 5 Vue.config.productionTip = true;
 6 
 7 // $mount 手动挂载  把生成的实例挂载到标签上面
 8 /* es5 
 9    render: function(createElement)
10         return createElement(App)
11    
12 
13    render(createElement)
14       return createElement(App)
15    
16 
17    render(h)
18       return h(App)
19    
20 
21    render: h => h(App);
22 */
23 new Vue(
24   render: h => h(App),
25 ).$mount(‘#app‘);

 

 1 <template>
 2     <div>
 3         <label>姓：<input type="text" placeholder="请输入姓氏" v-model="firstName"></label>
 4         <p></p>
 5         <label>名：<input type="text" placeholder="请输入名字" v-model="lastName"></label>
 6 
 7         <p>-----------------------------------------------------------------------</p>
 8         <!--单向-->
 9         <label>姓 名：<input type="text" placeholder="请输入姓名" v-model="fullNameOne"></label>
10         <p></p>
11         <!--双向-->
12         <label>姓 名：<input type="text" placeholder="请输入姓名" v-model="fullNameTwo"></label>
13         <p></p>
14         <!--双向-->
15         <label>姓 名：<input type="text" placeholder="请输入姓名" v-model="fullNameThree"></label>
16     </div>
17 </template>
18 
19 <script>
20     export default 
21         name: "ComputedAndWatch",
22         data()
23             return 
24                 firstName: ‘‘, // 姓
25                 lastName: ‘‘, // 名
26                 // 被watch监听改变
27                 fullNameThree: ‘‘
28             
29         ,
30         // 配置计算属性
31         computed: 
32             // 计算属性 姓名
33             fullNameOne: 
34                get()
35                    return this.firstName + ‘·‘ + this.lastName
36                
37             ,
38 
39             fullNameTwo: 
40                 get()
41                    // console.log(`调用了fullNameTwo的getter方法`);
42                    return this.firstName + ‘·‘ + this.lastName;
43                 ,
44                 set(value)
45                     // console.log(`调用了fullNameTwo的setter方法, 值：$value`);
46                     // 1.更新firstName和lastName
47                     let names = value.split(‘·‘);
48                     console.log(names);
49                     this.firstName = names[0];
50                     this.lastName = names[1];
51                 
52             
53         ,
54         // 配置watch
55         watch: 
56             // 监听firstName
57             firstName(value)
58                 console.log(`watch监视到firstName发生改变：$value`);
59                 // 更新fullNameThree
60                 this.fullNameThree = value + ‘·‘ + this.lastName;
61             ,
62 
63             // 监听lastName
64             lastName(value)
65                 console.log(`watch监视到lastName发生改变：$value`);
66                 // 更新fullNameThree
67                 this.fullNameThree = this.firstName + ‘·‘ + value;
68             
69         
70     
71 </script>
72 
73 <style scoped>
74 
75 </style>

computed 可以产生一个新的字段；适用于多个数据作用于一个新的数据

watch 只可以监听已经存在的字段 ；一个数据的变化，影响其他的数据