directive 概念
Vue.directive(id,definition)注册一个全局自定义指令,接收两个参数,指令ID以及定义对象,
第一个参数是指dom对象,第二个参数就是下面代码块里边v-xart="{color:'red',text:'best learning video'}"里边的内容
<script src="http://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-xart="{color:'red',text:'best learning video'}"> 好好学习,天天向上 </div>
//第二个参数就是v-xart="{color:'red',text:'best learning video'}"里边的内容
</div>
<script>
Vue.directive('xart', function (el,binding) {
el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
el.style.color = binding.value.color
})
new Vue({
el: '#div1'
})
</script>
代码转自 http://how2j.cn/k/vuejs/vuejs-directive/1754.html
钩子函数
什么是回调函数
转载自https://www.zhihu.com/question/19801131/answer/13005983
你到一个商店买东西,刚好你要的东西没有货,于是你在店员那里留下了你的电话,过了几天店里有货了,店员就打了你的电话,然后你接到电话后就到店里去取了货。在这个例子里,你的电话号码就叫回调函数,你把电话留给店员就叫登记回调函数,店里后来有货了叫做触发了回调关联的事件,店员给你打电话叫做调用回调函数,你到店里去取货叫做响应回调事件。
钩子函数又叫做回调函数,或者事件响应函数。 指的是,一个指令在创建过程中,经历不同生命周期的时候,vue.js 框架调用的函数。
事件常见的有如下几种:
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
unbind:只调用一次,指令与元素解绑时调用。