Vue自定义命令
自定義指令分為兩個部分：
1-元素指令
2-屬性指令
元素指令相當(dāng)于定義一個輕量級的組件
對于指令這里需要講解一下鉤子函數(shù)，對于Vue.js提供了幾個鉤子函數(shù)，這幾個鉤子函數(shù)之間都是可選的，相互并不制約。
鉤子函數(shù)的作用就是：
將作用域與DOM進行鏈接，鏈接函數(shù)用來創(chuàng)建可以操作DOM的指令
鉤子函數(shù)分類：
bind - 只調(diào)用一次，在指令第一次綁定到元素上時候調(diào)用
update - 在bind之后立即以初始值為參數(shù)第一次調(diào)用，之后綁定值變化的時候，參數(shù)為新值與舊值
unbind - 只調(diào)用一次，在指令從元素上解綁的時候調(diào)用
定義屬性指令：
Vue.directive(id,definition)注冊一個全局自定義指令，接收兩個參數(shù)，指令ID以及定義對象定義元素指令：
Vue.elementDirective(id,definition)注冊一個全局自定義指令，接收兩個參數(shù)，指令ID以及定義對象一個自定義指令的DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>VUE測試項目</title> </head> <script src="https://unpkg.com/vue/dist/vue.js"></script><!--HTML文件--> <body id="example"><div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div> </body><!--JS文件--> <script> window.onload = function(){Vue.directive('demo',function(value){console.info(value.color); //whiteconsole.info(value.text); // hello!})var demo = new Vue({el : '#demo'}) } </script> </body> </html>總結(jié)
- 上一篇： 世界三大烹饪国（世界三大美食国家）
- 下一篇： vue生命周期总结