Vue中的监听事件的属性
2018-10-16 本文已影响0人
追逐_chase
Vue.jpeg
监听事件
- keyup
<div id="app">
<input type="text" v-model="fisst" @keyup="getName">+
<input type="text" v-model="second" @keyup="getName"> =
<input type="text" v-model="full">
<!--
监听输入框 数据的改变
//文本数据的改变
->
</div>
<script>
new Vue({
el:"#app",
data:{
fisst:"",
second:"",
full:""
},
methods:{
getName:function () {
this.full = this.fisst + this.second;
}
}
})
</script>
-
watch属性，可以监视data中指定数据的变化，然后触发这个watch中对应的function函数 -
watch属性也可以监听路由事件的URL的改变$route.path:function(){}监听URl的变化
//上面的例子 可以更改 Vue是函数
<script>
new Vue({
el:"#app",
data:{
fisst:"",
second:"",
full:""
},
methods:{
getName:function () {
// this.full = this.fisst + this.second;
}
},
watch:{
//使用这个属性，可以监视data中指定的数据变化，然后出发这个watch中对应的functionha函数
//函数有2个参数，newValue,oldValue 一个是新值，一个变化之前的值 旧值
fisst:function () {
console.log(this.fisst);
}
}
})
-
computed可以定义一些属性，这些属性是【计算属性】，其本质是一个方法,- 只要计算属性，这个function内部，所用到的 任何data中的数据发生变化，就会重新计算这个属性的值
- 计算属性：在引用的时候。不加()调用，直接当做普通属性使用
- 计算属性的求职结果会缓存起来，方便下次使用，如果计算属性方法中，来的数据没有发生变化，则不会重新对计算属性求值
<div id="app">
<input type="text" v-model="fisst" >+
<input type="text" v-model="second" > =
<input type="text" v-model="full">
</div>
<script>
new Vue({
el:"#app",
data:{
fisst:"",
second:""
},
methods:{
},
watch:{
},
computed:{
//可以定义一些属性，这些属性是【计算属性】，其本质是一个方法
full:function () {
return this.fisst + this.second;
}
//计算属性：在引用的时候。不加()调用，直接当做普通属性使用
//只要计算属性，这个function内部，所用到的 任何data中的数据发生变化，就会重新计算这个属性的值
}
})
</script>
computed, methods,watch区别
computed：计算属性，属性的结果会缓存，
methods属性方法中，表示一个具体的操作，是写逻辑处理
watch：一个对象，key是需要观察的表达式，value是对应的回调函数，主要用来监听某些特定数据变化，从而进行业务逻辑操作
