版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83855516
文章目录
watch
可以用来监控程序员想要监控的对象,当这些对象发生改变以后,可以触发回调函数做一些逻辑处理。
示例
监听data中属性的变化
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<div id="app">
<input type="text" v-model="lastName" placeholder="姓">
<input type="text" v-model="firstName" placeholder="名">
<h2>拼接:{{fullName}}</h2>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
new Vue({
el:'#app'
,data:{
firstName:''
,lastName:''
,fullName:''
}
,watch:{
'firstName':function () {
this.fullName = this.lastName + '·' + this.firstName;
}
,'lastName':function () {
this.fullName = this.lastName + '·' + this.firstName;
}
}
});
</script>
</html>
结果
分析
上图中实现的功能是通过watch
关键字来监控data
中的lastName
与firstName
属性,由于我们在输入文本框中通过v-model
双向数据绑定了该属性,因而当上述属性的值发生变化时,其会自动的触发watch
中的回调函数,而上述两个回调函数所执行的功能都是相同的,就是在所监控的属性值发生变化时,重新生成新的fullName
属性值,于是结果就如上图中所示。
监听路由中的属性变化
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-router</title>
</head>
<body>
<template id="root">
<div>
<!--路由占位-->
<router-view></router-view>
</div>
</template>
<template id="register">
<div>
<h2>注册页面</h2>
<input type="text" v-model="uname">
<button @click="registerMethod">注册</button>
</div>
</template>
<template id="login">
<div>
<h2>登录页面</h2>
<input type="text" placeholder="请输入登录账号" v-model="loginName">
<button @click="loginMethod">登录</button>
</div>
</template>
<template id="welcome">
<div>
<h2>欢迎界面</h2>
<h3 v-show="currentUser != ''">{{currentUser}}</h3>
</div>
</template>
<div id="app">
<router-link to="/root/register">注册</router-link> |
<router-link to="/root/login">登录</router-link>
<!--路由占位-->
<router-view></router-view>
</div>
</body>
<script src="../../../js/vue/vue/2.0/vue.js"></script>
<script src="../../../js/vue/vue-router/2.3.1/vue-router.js"></script>
<script type="application/javascript">
//定义路由根组件
var App = Vue.extend({});
//根页面
var root = Vue.extend({
template:'#root'
});
//欢迎页面
var welcome = Vue.extend({
template:'#welcome'
,data(){
return {
uname:''
,currentUser:''
}
}
,created(){
//接收传过来的参数,将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
//排除非空可能
if(this.uname != '' && this.uname != 'undefined' && this.uname != undefined){
this.currentUser = '欢迎您:' + this.uname + "!"
}
}
});
//定义register页面
var register = Vue.extend({
template:'#register'
,data(){
return {
uname:''
}
}
,methods:{
registerMethod(){
alert('注册成功!用户名为:' + this.uname);
//跳转到登录页面
this.$router.push({path:'/root/login',query:{uname:this.uname}});
}
}
});
//定义login页面
var login = Vue.extend({
template:'#login'
,data(){
return {
uname:''
,loginName:''
}
}
,created(){
//接收传过来的参数,将其存放到本地数据域uname中
this.uname = this.$route.query.uname;
}
,methods:{
loginMethod(){
//如果没有输入任何信息,则提示输入账号。
if(this.loginName.trim() == ''){
alert('请输入登录账号!');
return;
}
//如果填写的登录名与注册的账号相一致,则登录成功!
if(this.uname == this.loginName){
alert('登录成功!');
//登录成功后跳转到欢迎界面
this.$router.push({path:'/root/welcome',query:{uname:this.loginName}});
} else {
alert('登录失败!');
}
}
}
});
//设定路由规则
var router = new VueRouter({
routes:[
{
path:'/'
,redirect:'/root/welcome'
}
,{
path:'/root'
,component:root
,children:[
{
path:'register'
,component:register
}
,{
path:'login'
,component:login
}
,{
path:'welcome'
,component:welcome
}
]
}
]
});
//开启路由
new Vue({
el:'#app'
,router:router
,watch:{
'$route':function (newroute,oldroute) {
console.log('跳转前:' + newroute.path + ' 跳转后:' + oldroute.path);
}
}
});
</script>
</html>
结果
分析
这里的路由监控代码和上一篇文章中的Vue中路由的传参代码大体相同,只是在上一篇的基础上加上了watch
路由监控功能,在watch
的回调函数中实现的功能是将变化的路由打印在控制台上。置于其它部分的解说,直接看上一篇文章就可以了。