1.名称案例使用keyup实现
<div id="app">
//分析：
(1).我们要监听到文本框数据的改变，这样才能知道什么时候去拼接出一个fullname
(2).如何监听到文本框的数据改变
<input type="text" v-model="firstname" @keyup="getFullname">+<input type="text" v-model="lastname" @keyup="getFullname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
fullname:' '
}
methods:{
getFullname(){
this.fullname = this.firstname+'-'+this.lastname
}
}
})
2.使用watch监听文本框数据的变化
<div id="app">
<input type="text" v-model="firstname">+<input type="text" v-model="lastname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
fullname:' '
}
methods:{},
watch:{
//使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function处理函数
'firstname':function(newVal,oldVal){
//newVal是表示监听到的新的数据，oldVal表示旧的数据
//this.fullname = this.firstname+'-'+this.lastname
this.fullname = newVal+'-'+this.lastname
},
'lastname':function(newVal){
this.fullname=this.firstname+'-'+newVal
}
}
})
3.watch监视路由地址的改变
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<router-view></router-view>
</div>
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
var router = new VueRouter({
routes:[
{path:'/',redirect:'/login'},
{path:'/login',component:login},
{path:'/register',component:register}
]
})
var vm = new Vue({
el:'#app',
data:{},
methods:{},
router,
watch:{
//this.$route.path
'$route.path':function(newVal,oldVal){
if(newVal === '/login'){
console.log('欢迎进入登录页面')
}else if(newVal === '/register'){
console.log('欢迎进入注册页面')
}
}
}
})
4.computed计算属性的使用和三个特点
<div id="app">
<input type="text" v-model="firstname">+<input type="text" v-model="lastname">=<input type="text" v-model="fullname">
</div>
var vm = new Vue({
el:'#app',
data:{
firstname:' ',
lastname:' ',
}
methods:{},
computed:{
//在computed中可以定义一些属性，这些属性叫做计算属性，计算属性的本质，就是一个方法，只不过，我们在使用这些计算属性的时候，是把它们的名称，直接当做属性来使用的，并不会把计算属性，当做方法去使用；
//注意：(1).计算属性，在引用的时候一定不要加()去调用，直接把它当做普通属性去使用就好了；
(2).只要计算属性这个function内部，所用到的任何data中的数据发生了变化，就会立即重新计算这个计算属性的值
(3).计算属性的求值结果，会被缓存起来，方便下次直接使用；如果计算属性方法中，所依赖的任何数据，都没有发生变化，则不会重新对计算属性求值
'fullname':function(){
return this.firstname+'-'+this.lastname
}
}
})
5.watch,computed,methods的对比
(1).computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用；
(2).methods方法表示一个具体的操作，主要书写业务逻辑
(3).watch一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是computed和methods的结合体
网友评论