vue常用指令

Vue常用指令

指令的完整格式

v-else            //什么都没有，无值
v-text="val"      //有值
v-bind:src="val"  //有参，有值
v-on:click.stop="val"  //有值，有参，有修饰符

常用指令

v-show

取值true || false 控制显示或者隐藏，配合点击事件（点击事件控制取值）可实现一个开关的切换，效果就是控制display属性的值

• true 显示
• false 隐藏

v-if

视觉上与v-show效果一样，但是这个会删除代码的，可以理解为对节点进行了操作，减少DOM的操作就应该少用v-if

v-if/v-else

顾名思义，与v-if搭配使用 ，else后面可以不给值

v-if/v-else/v-else-if

if后面都是要跟值说的

v-on:EventName =""

Vue绑定事件的方法 v-on: 可简写 @

v-for in 循环 v-for="(item,index) in list"

循环遍历 list 集合，用于数据渲染，可遍历 Array、Object、number、string、Iterable

v-bind

v-bind 可简写 : 用于绑定类名操作

v-model

双向数据绑定 ,应用于双向的修改和删除,只要有一端的数据改动，另外一端也跟着改动，一般用于表单元素，会忽略所有表单的value、checked、selected属性的初始值，将Vue实例的数据作为数据源

• v-model值绑定到 value 属性
  • input:text
  • textarea
  • radio
  • select(无value属性则与内容绑定)
• 复选框CheckBox
  • Vue实例的数据源初始值：为数组时与value属性绑定
  • 初始值为其他，与checked属性绑定（true || false）
    • true-value 设置选中时的值
    • false-value 设置不选中时的值

非常用指令

v-once

只渲染一次

v-pre

不渲染指令所在标签中的内容

v-cloak

相当于美化页面，渲染成功后销毁

特殊指令、修饰符

ref

Vue用于操作节点的指令

• 在节点中添加ref="keyword"
• 在实例中通过this.$refs.keyword获取到节点从而可以进行节点的操作

.stop

阻止事件冒泡，直接在事件名后面.stop即可。
其原理：

• 在事件绑定时传入事件对象参数@click="finishItem(idx,$event)
• 实例方法中接收并阻止冒泡finishItem(idx,ev) {ev.stopPropagation();}

.once

只执行一次，可链式调用，加在事件后面

v-model的修饰符

v-model原理就是 v-bind + v-on:input 结合

.lazy

原本的input事件换成change事件

.trim

去除前后空格

.number

转成number数值类型，默认是String