1.案例：名字合并(监听data数据的改变)
使用keyup事件监听data数据的改变
<!DOCTYPE html> <html> <head> <title>案例：名字合并</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname" @keyup="getFullName">+ <input type="text" v-model="lastname" @keyup="getFullName">= <input type="text" v-model="fullname"> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { getFullName() { this.fullname = this.firstname + "--" + this.lastname; } } }); </script> </body> </html>
使用watch监听data数据的改变
<!DOCTYPE html> <html> <head> <title>案例：名字合并</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', fullname: '' }, methods: { }, watch: {//监听data中指定数据的变化，然后触发对应的function处理函数 //firstname可以加引号，也可以不加。当中间有-时必须加 firstname: function(newVal, oldVal) { // this.fullname = this.firstname + "--" + this.lastname; this.fullname = newVal + "--" + this.lastname; }, lastname: function(newVal, oldVal) { this.fullname = this.firstname + "--" + newVal; } } }); </script> </body> </html>
2.watch-监视路由地址的改变
<!DOCTYPE html> <html> <head> <title> watch监听路由的改变 </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> <!-- 安装 vue-router 路由模块 --> <script type="text/javascript" src="vue-router.js"></script> </head> <body> <div id="app"> <p> <router-link to="/com1">Go to com1</router-link> <router-link to="/com2">Go to com2</router-link> </p> <!-- 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> <script type="text/javascript"> // 组件的模板对象 var com1 = { template: "<h2>这是组件1</h2>" }; var com2 = { template: "<h2>这是组件2</h2>" }; // 创建一个路由对象 var routerObj = new VueRouter({ routes: [ // 路由匹配规则 {path: '/com1', component: com1}, {path: '/com2', component: com2} ] }); //创建一个vue实例 var vm = new Vue({ el: '#app', data: { }, methods: { }, router: routerObj, watch: { '$route.path': function(newVal, oldVal) { //alert(newVal + "------------" + oldVal); if(newVal === '/com1'){ alert("进入到组件com1"); }else if(newVal === '/com2'){ alert("进入到组件com2"); } } } }); </script> </body> </html>
3.computed-计算属性的使用和3个特点
<!DOCTYPE html> <html> <head> <title>案例：名字合并</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 导入vue的包 --> <script type="text/javascript" src="vue2.js"></script> </head> <body> <div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> </div> <script type="text/javascript"> //创建一个vue实例 var vm = new Vue({ el: '#app', data: { firstname: '', lastname: '', }, methods: { }, watch: { }, //在computed中，可以定义一下属性，这些属性叫做计算属性；计算属性本质就是一个方法； computed: { //使用计算属性时，直接当做data属性来使用。 //计算属性的结果会被缓存，下次使用该计算属性时，从缓存中取。 //只要计算属性依赖的data数据发生了变化，该计算属性就会重新计算，并更新缓存。 //注意：计算属性必须要有return结果，该结果就是计算属性的值。 fullname: function() { return this.firstname + "----" +this.lastname; } } }); </script> </body> </html>