1.mvvm 分别代表什么?
MVVM模式是Model、View、ViewModel的简称:
1.Model(数据模型)
2.View(视图模型,即DOM结构)
3.ViewModel(同步对象new Vue)
视图更新:1.使用数组的length属性去改变数组的时候,不会触发视图更新;2.使用数组下标去改变数组的时候,不会触发视图更新
解决办法:(1) 使用vue.set(arr,index,newVal)arr是需要改变的数组,index是数组里的项,newVal 是改变后的值;(2) 数组的方法:Array.prototype.splice()
2.插值表达式 ({{}})是用来干什么的?
应用js表达式:渲染文本,数据绑定(加减乘除,字符串拼接,方法调用)
3.v-text指令
使用场景:在元素的属性节点上,添加v-text指令,如:<p v-text="name"></p>
与插值表达式的区别:
1.插值表达式只是一个占位符,但v-text会把内容区域之前的内容覆盖掉
2.插值表达式有闪烁问题,v-text不存在闪烁问题
3.插值表达式适合在 前后追加一个元素的内容;
4.如果想要防止插值表达式闪烁问题,同时,没有其它内容,推荐使用 v-text
4.v-html 指令
可渲染带标签的文本
插值表达式和v-text会将数据解释为纯文本,而非HTML,如果没有html 标签的数据被绑定,则会当做纯文本解释,作用同{{}}和v-text
5.v-bind 指令
给html元素或组件动态绑定一个或者多个属性
6.v-for 指令
渲染数组和对象
- 渲染数组
(1) 在标签属性位置上写上v-for="item in array",item表示数组中的每一项,array代表需要遍历的数组
(2) 在标签属性上写v-for="(item,index) in arr",item表示数组中的每一项,index表示数组的索引,array代表需要遍历的数组 - 渲染对象
(1) 在标签属性位置上写上v-for="value in obj",value表示对象键的值,obj代表需要遍历的对象
(2) 在标签属性上写v-for="(value,key,index) in obj",value表示对象键的值,key代表键,index代表索引,obj代表需要遍历的对象
注意:v-for必须结合key 属性来使用,当数组中的某一项发生改变时,会只更新那一项,提升性能,key的值是唯一的,不能重复,使用方法:在v-for后边加‘:key=" 循环当前目标唯一不重复的标示 " ’
7. v-model
实现双向数据绑定
只能在input,select,textarea,components(Vue中的组件) 这些元素中使用
8.v-on
绑定事件监听,只能监听原生DOM事件。
常用事件:
v-on:click;
v-on:keydown;
v-on:keyup;
v-on:mousedown;
v-on:mouseover;
v-on:submit;
使用方法:
(1) 在标签的属性位置上写上:v-on:事件名="执行函数"
(2) 在标签的属性位置上写上:@:事件名="执行函数"(推荐使用)
(3) 通过执行函数添加参数
(4) 通过执行函数中添加event参数传递事件对象,只能是event,且不加引号
(5) 事件修饰符可以给事件添加特殊功能,常用的有:.stop(阻止事件冒泡) 和.prevent(阻止默认行为)
(6) 按键修饰符:只有按下指定键的时候才会执行事件处理函数,常用的有.enter
9.v-if 和 v-show
控制元素的显示和隐藏
写法:v-if="布尔值", v-show="布尔值",为true的时候为显示,false为隐藏
区别:
v-if通过控制dom来控制元素的显示与隐藏,适用于异步数据渲染的时候,v-show通过控制样式display来控制元素的显示与隐藏,适用于涉及大量dom操作的时候