函数
自定义函数:
methods:{
fun:function(){
this.变量
}
}
<div @click="fun">
过滤函数:
<h1>{{str|fun}}</h1>
filters:{
fun:function(v){
return v.toUpperCase()
},
计算函数:
姓<input type="text" v-model="a">
名<input type="text" v-model="b">
<h2>{{fullname}}</h2>
computed:{
fullname:function(){
return this.a+this.b
}
}
监听函数:
监听函数的名称要与变量名相同
watch:{
count:function(news,old){
if(news>5){
this.count=5
}
console.log(news,old)
}
}
简答:计算函数和监听函数的区别?
计算函数:用来计算变量
计算函数处理多个变量
计算函数具有缓存性,页面重新渲染值不变化,会返回之前的结果,不再执行函数
计算函数是同步执行,不能操作异步
监听函数:用来观察动作
监听函数只监听一个变量
监听函数不具有缓存性,页面重新渲染值不变化也会执行
监听函数可以执行异步函数
vue对象
vue下的所有函数和变量,也可以在外部调用和定义
获取变量和函数的写法
var v=new Vue({})
console.log(v.$data.str)
console.log(v.str)//vue2.0之后可以这样用
新增变量和函数的用法
var v=new Vue({data:{num:0}})
v.$watch("num",function(news,old){
console.log(news,old)
})
简答:vue下key值的作用?
当定义v-for循环指令值,要写一个key的属性,存储唯一表示循环内容的变量,key的作用是为了提高更新虚拟dom,原理是在更新过程中通过key可以判断两个节点是否是同一个,从而避免更新不同元素,提高工作效率,减少dom渲染
注意:当遍历对象数组类型时,要用对象下的id值表示值的唯一性
简答:双向绑定的原理是什么?
是采用数据劫持结合发布订阅者模式,通过Object.defineProperty()来劫持各个属性,通过getter,setter进行对属性的获取和修改。在数据变动时发布消息给订阅者,触发响应的监听回调
例如:
var data={str:""}
Object.defineProperty(data,"str",{
get:function(){
return str
},
set:function(v){
str=v
}
})
var inp=document.getElementById("inp")
var h1=document.getElementById("font")
inp.οnchange=function(){
data.str=inp.value
h1.innerHTML=data.str
}