vue 常用的指令

Vue中的常用的的指令:

v-text : 效果跟插值语法差不多{{}} 生成文本内容

v-html: 可以解析标签 跟innerHTML类似

v-show: 跟元素样式display:none,block类似 使用技巧: (重复多次使用的时候, 推荐)

v-if : 跟元素上下树类似, 可以跟template搭配使用

v-else-if

v-else : 跟v-if一起搭配使用

v-for: 循环数组, 对象 (这里一般需要加入Key 值, 为了避免重复的数据在数据更改的时候会出现渲染问题, 以防止在增删元素的时候出现代码顺序混乱

v-on:click 简写(@click) 点击触发事件

有修饰符: .stop 阻止事件冒泡

.prevent 阻止事件的默认行为

.self 只允许在自身触发事件

.once 只执行一次事件

v-bind: 简写:(:) 动态绑定属性

v-model: 绑定value属性和监听input事件 (只能在表单元素上面(input/textarea/select) 和组件上面使用)

有修饰符: .lazy 失去焦点时在触发

.number 自动用户输入值转为数值类型

.trim 自动过滤用户输入的首位空白字符

v-slot: 将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现

slot的三种形态: 匿名插槽 具名插槽 作用域插槽

v-pre: 跳过这个元素和它的子元素的编译过程 (就是不运算了, 写什么就在页面显示什么)

v-cloak: 可以用来解决双括号闪烁问题(跟CSS样式 [v-cloak]{display:none} 一起使用, 隐藏为编译的语法, 直道编译完成)

v-once: 只进行编译一次