码迷,mamicode.com
首页 > 其他好文 > 详细

vue相关

时间:2020-03-14 01:20:59      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:很多   方法   添加   业务逻辑   而且   深度   click   耦合   ops   

一、mvvm
model:基本的业务逻辑
view:页面视图
viewModel:接口提供两个东西:动作和数据,将model和view两者联系在一起。

优点:
1.降低耦合,视图(view)和数据(model)可以独立开来;
2.可重用性,把一些视图逻辑放在一个ViewModel里面,让很多view重用这段视图逻辑;
3.独立开发,业务逻辑、数据和页面设计独立专注开发;
方便测试,测试可以针对ViewModel来测试;

核心:
MVVM是将“数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此view的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应到View上。

mvvm在vue中的体现:
组件内双向绑定的实现:
父组件:
<div>
<input type="text" v-model="value">
<children :val="value"></children>
</div>
data:{
value:‘‘
}

子组件:
<input type="text" :value="val" @input="handlerInput">

props:["val"]
handlerInput(e){
this.$emit("input",e.target.value)
}

二、vue有哪些指令:
v-for、v-show、v-html 、v-if

三、监控某个属性的变化:
1.深度监控,监测所有属性的变化
watch:{
obj:{
handler(newVal,oldVal){

},
deep:true
}
}

2.监测某个属性的变化:
watch:{
‘obj.a‘:{
handler(newVal,oldVal){

}
}
}

3.
computed:{
a1(){
return this.obj.a;
}
}

4.watch与computed的区别?


四、vue中怎样动态添加属性:
<button @click="addObjB"></button>
data:{
obj:{
a:‘‘
}
}

methods:{
addObjB(){
this.$set(this.obj,‘b‘,111)
}
}
$set()方法相当于手动的去把obj.b处理成一个响应式的属性,此时视图也会跟着改变了

五、delete与Vue.delete区别
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a) //[1,empty,3,4]
this.$delete(b,1)
console.log(b) //[1,3,4] 直接删除,改变了数组的键值

vue相关

标签:很多   方法   添加   业务逻辑   而且   深度   click   耦合   ops   

原文地址:https://www.cnblogs.com/annie211/p/12489965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!