vm
-是用来监听view和model
插值表达式
-写法 {{}}
-渲染data数据
v-text
-也是渲染data数据,直接用在标签上,把数据添加在标签里
-渲染文本,v-开头的都是指令,增强html标签的功能,和插值表达式的
-区别:插值表达式写在innerhtml位置,v-text写在属性位置,推荐使用
插值表达式{{}}
插值表达式、v-text、v-html的区别及应用场景
-插值表达式、v-text会将数据解释为纯文本,而非html
-v-text可以将一段文本渲染到指定的元素中
-v-html可以渲染带标签的文本,不可以随便使用
v-bind
-绑定给标签
-v-bind可以动态绑定属性,使用方法 v-bind:属性名=“data里面的属性”
-v-bind简写形式:属性名=“data里面的属性”
v-bind想绑什么属性就绑什么属性,在后面组件开发的时候很常用
v-bind动态绑定样式 :class="{'类名':布尔值}"
v-for
-渲染数组和对象 能够根据data中的数据变化自动刷新视图 当时用数组
的length属性去改变
-数组的时候,不会触发视图更新。数组的下标 也不会触发。
-解决办法:a.使用vue.set(arr,index,newVal)arr是需要改变的数
组,index是数组里的项,newVal是改变后的值。
b.Array.prototype.splice()
*注意 v-for必须结合key属性来使用,他会唯一标识数组中的每一项,
未来当数组中的那一项改变的时候,他只会更新那一项,好处就是提
升性能,注意key的值唯一,不能重复
-key的使用方法:在循环后面:key="唯一"
-渲染数组2个参数 item > index
-渲染对象3个参数 item > key > index
v-model
-用来双向数据绑定,就是model和view的值进行同步变化,实时更新
-只能用在这几个input textarea select标签里
v-on
-用来监听dom事件
-使用方法:a.在标签的属性位置写上v-on:任意的事件类型=“执行的
函数”
b.简写形式 @任意的事件类型=“执行的函数” 推荐使用
c.通过执行函数添加参数
d.通过执行函数中添加$event参数传递事件对象,只能是
$event,不能加引号
e.事件修饰符可以给事件添加特殊功能 .stop阻止事件冒泡
.prevent阻止默认事件
f.可以给和按键相关的事件添加按键修饰符 常用的由enter
v-if和v-show
-v-if和v-show指令可以用来控制元素的显示和隐藏,v-if="布尔值" v-
show="布尔值",布尔值为true元素显示,false元素隐藏
-两者区别: v-if通过dom来控制元素的显示和隐藏
v-show通过控制样式display:none来控制元素的显
示和隐藏
使用场景区别:涉及到大量dom操作的时候,我们需要使用v-show
涉及到异步数据渲染的时候就要使用v-if
网友评论