[Vue]基础指令

No	name	express	tip
1	差值表达式	{{variable}}
2	v-if/v-else/v-show	v-if="variable"
3	v-for	(item,key,index) in items	:key="key"完整地触发组件的生命周期钩子
4	v-text/v-html	v-text/html="variable"	v-html不会作为 Vue 模板进行编译,scoped 的样式不会应用
5	v-on	@click="function"	@keyup.enter="fn"-@keyup.13="fn" 使用keycode
6	v-model	v-model="variable"
7	v-bind	:src="variable[obj/arr/str/fn]"	{classB:isOk[boolean]},[C1,C2],isOk?C1:C2,varName
8	v-pre	<span v-pre>{{data}}</span>	在模板中跳过vue的编译，直接输出原始值。
9	v-cloak		[v-cloak]{display:none}
10	v-once		只渲染一次，不会被更改

v-model

1. .lazy.lazy修饰符，焦点离开文本框发生变化
2. .trim去空格
3. .number

Vue.directive自定义指令

<div id="app">
    <div v-jojo='color'>{{num}}</div>
    <p><button @click="add">Add</button></p>
</div>

<script>
Vue.directive('haha',{
    bind(el,binding,vnode){//被绑定 
        console.log('1 - bind')
        console.log(el,binding,vnode);
        el.style = 'color:'+binding.value;
    },
    inserted(el,binding,vnode){//绑定到节点
        console.log('2 - inserted')
    },
    update() {//组件更新
        console.log('3 - updated')
    },
    componentUpdated(){//组件更新完成 
        console.log('4 - componentUpdated')
    },
    unbind(){//解除绑定
        console.log('5 - unbind')
    }
})

demo