- vue官方指令：
v-model
///双向绑定，常用于表单中。 ///<p>zhiwei:{{md}}</p><input type="text" v-model.trim='md'></li> 代码中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"> <!-- prop 绑定。“prop”必须在 my-component 中声明。--> <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 }。 自定义指令例子： <p v-value='{color:"#f00",fontSize:"30px"}'>asfds</p> Vue.directive('value',{ update(el,binding){ el.style.background="red"; el.style.color=binding.value.color; el.style.fontSize=binding.value.fontSize; } })