开发者学堂课程【Vue.js 入门与实战:Watch-监视路由地址的改变】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8206
Watch-监视路由地址的改变
根据实践可以发现,watch 固然可以实现名称案例,但是和方式一来比,方式一会更简单一些,一个函数定义一次就可以。用 watch 的情况下,如果有好几个属性,就需要制作好几个监听,会比较繁琐。
但是 watch 有 方式一没有的优势:如果想要监视虚拟的变化,只能够使用 watch (例如监视路由的变化)。
一、代码及视图展示
watch: {
//使用这个属性,可以监视 data中指定数据的变化,然后触发这个watch 中对应的function处理函数
’;firstname ’ : function (newval, oldval){l / console . log( 监视到了firstname的变化’;)
l/ this.fullname = this.firstname + '-' + this .lastname
l / console.log (newval + ' --- ' + oldval)
this.ful1name = newval + '-' + this.lastname,
’lastname' : function (newval){
this.fullname = this.firstname + ’-’ + newval
}
});
监视路由地址的改变:
// this. $route.path
’$route.path’: function (newVal,oldva1){
console. Log(newval + ’ --- ’ + oldval2’
<div id"app ">
视图展示:
<!--分析:-->
<!-- 1.我们要监听到文本框数据的改变,这样才能知道什么时候去拼接出一个 fullname -->
<!--2.如何监听到文本框的数据改变呢???-->
<input type="text" v-model="firstname" @keyup="getrul1name">
<input type="text" v-model="lastname" @keypp="getrullname">
<input type="text" v-model="fullname">