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>