标签：component update app order bind isnan one 参数 setattr
1、指令定义的钩子函数：（这些钩子函数都是可选的）
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用，即模版更新完成的调用。
unbind: 只调用一次， 指令与元素解绑时调用。
2、钩子函数的参数（参数可选）
v- 前缀。v-my-directive="1 + 1", value 的值是 2。update 和 componentUpdated 钩子中可用。无论值是否改变都可用。v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。v-my-directive:foo， arg 的值是 "foo"。v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。update 和 componentUpdated 钩子中可用。3、自定义指令的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> <style> #app { width: 900px; height: 800px; border: 1px black solid; } </style> </head> <body> <div id="app"> <input id="num" type="text" v-validate-number:aa.bb.cc="num" v-model="num"> </div> </body> <script type="text/javascript"> Vue.directive("validateNumber", { /*验证输入框中是否是数字，如果不是则边框变红*/ bind: function(el, binding, vnode) { console.info("钩子函数bind的参数列表如下(v-validate-number:aa.bb.cc=‘num‘)："); console.info("绑定的dom元素标签,el.nodeName：" + el.nodeName); console.info("绑定的dom元素id,el.id：" + el.id); console.info("指令的整行名(包括参数和修饰符), binding.rawName：" + binding.rawName); console.info("指令的名字,binding.name：" + binding.name); console.info("指令的参数,binding.arg：" + binding.arg); console.info("指令的修饰符（以json格式字符串输出）,binding.modifiers：" + JSON.stringify(binding.modifiers)); console.info("指令的表达式,binding.expression：" + binding.expression); console.info("指令的值,binding.value：" + binding.value); if (el.getAttribute("type").toLowerCase() == "text") { if (typeof binding.value != "number") { el.setAttribute("style", "border-color:red;"); //不是数字，设置边框为红色 } } else { console.log("bind failed!"); } }, inserted: function(el, binding, vnode) { }, update: function(el, binding, vnode, oldVnode) { if (binding.value == "" || !isNaN(Number(binding.value))) { //判断是不是为空，或者是不是数字 el.setAttribute("style", "border-color:initial;"); //是数字改回默认值 } else { el.setAttribute("style", "border-color:red;"); //不是数字，设置边框为红色 } }, componentUpdated: function(el, binding, vnode, oldVnode) { }, unbind: function() { console.log("unbind directive -- validateNumber"); } }); new Vue({ el: "#app", data: { msg: "自定义的指令", num: "11" }, methods: { } }); </script> </html>
4、自定义指令的注意问题
标签：component update app order bind isnan one 参数 setattr
原文地址：http://www.cnblogs.com/shannonliang/p/6103178.html
