vue---vue中常用指令，以及如何自定义指令vue.directive进行节点操作？

---

- vue官方指令：

v-model

///双向绑定，常用于表单中。

///
zhiwei:{{md}}

代码中trim为v-model指令修饰符;
trim:去除表单value中首位空格；number:字符串转为数字；lazy：化同步双向为change双向

v-show,v-if,v-else-if,v-else:

四个指令都是通过表达式决定当前标签是否要显现。

v-show 通过改变css属性；
v-if等则通过判断进行物理留去,v-else与v-else-if必须紧跟于v-if后；

v-for:

//遍历数组并进行渲染，遍历单项可有三个参数key,value,index

<li v-for="(val, key, index) in object">{{index}}:{{key}}:{{value}}li>

v-bind:

//v-bind用于响应式绑定属性和特性，

---class,style,src,prop等，v-bind简写为':';

修饰符：

.prop - 被用于绑定 DOM 属性。(what’s the difference?)
.camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。


<img v-bind:src="imageSrc">

<img :src="imageSrc">


<my-component :prop="someThing">my-component>

v-on:

1. v-on用于绑定事件，如keyup，click等
2. v-on简写为@；
3. v-on修饰符：stop组织冒泡、prevent阻止默认事件、native监听组件根元素的原生事件等等


<button @click.stop="doThis">button>


<my-component @click.native="onClick">my-component>

v-text, v-html:

//v-text  等价于{{}}

//v-html 可以绑定dom结构

//二者可以解决网速慢导致的{{]}闪动问题

v-once:

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-cloak:

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

v-pre:

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

---

- vue自定义指令：

• 生命周期

bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

componentUpdated:被绑定元素所在模板完成一次更新周期时调用。

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

• bind参数

el:指令所绑定的元素 ，可以直接用了操作dom

binding:一个对象包括一些属性

vnode: Vue编译生成的虚拟节点

• bingding对象

// name: 指令名，不包括 v- 前缀。

// value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2

// oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

// expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

// arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

// modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

• 自定义指令例子：

value='{color:"#f00",fontSize:"30px"}'>asfds

Vue.directive('value',{
        update(el,binding){
            el.style.background="red";
            el.style.color=binding.value.color;
            el.style.fontSize=binding.value.fontSize;
        }
    })