Vue系列-01指令

Vue系列

指令

概述：vue中的指令，vue中都是以v-开头（一般用来操作dom）

v-for

v-for和v-if连用问题

v-for会比v-if的优先级一些，如果连用的话会把v-if给每个元素都添加一下，会造成性能问题(使用计算属性优化)

---

从AST转化为JS语法的时候内部会调用一个_的函数，参数为n表示循环几次

v-if

v-if如果条件不成立不会渲染当前指令所在节点的dom元素

---

从AST转化为JS语法的时候v-if会被转化为三元表达式

v-show

v-show只是通过样式切换当前dom的显示或者隐藏

v-model

v-model本质就是一个语法糖，可以看成是value+input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性

---

应用在组件上

就是一个语法糖，解析成value和事件挂载到propsData，被当成组建的props属性（一个组件上的v-model默认会利用名为value的prop和名为input的事件）

应用在标签上

真正的一个指令

v-on

v-on：绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。缩写：@

---

vm.$on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数

不要和$on混淆

v-bind

v-bind：动态地绑定一个或多个attribute，或一个组件prop到表达式。缩写：：

---

主要是通过ast语法解析，实现的将对应属性转化成变量

自定义指令

指令定义对象可以提供如下几个钩子函数

bind

只调用一次，指令第一次绑定到元素时调用

inserted

被绑定元素插入父节点时调用

update

所在组件的VNode更新时调用，组件更新前状态

componentUpdated

所在组件的VNode更新时调用，组件更新后的状态

unbind

只调用一次，指令与元素解绑时调用