vue ,指令定义全局和局部指令及指令简写

指令定义全局和局部指令以及指令简写

　　

1。使用Vue.directive()定义一个全局指令,,,Vue.directive(指令名称,{对象})
　　2.参数一:指令的名称,定义时指令前面不需要写v -
　　3.参数二:是一个对象,该对象中有相关的操作函数
　　4.在调用的时候必须写v -
　　5.自定义指令中的常用的3个钩子函数:
　　,,5.1绑定:
　　,,,,1.指令绑定到元素上回立刻执行绑定函数,只执行一次
　　,,,,2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
　　,,,,3 .通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
　　,,5.2插入:
　　,,,,1.插入表示一个元素,插入到DOM中会执行插入函数,只触发一次
　　,,5.3更新:
　　,,,,1.当VNode更新的时候会执行更新,可以触发多次
　　6 .定义一个局部指令

　　 　　

,, <强>,测试案例步骤:

　　

,,,1 .首先需要在html中创建一个盒子

　　

,,,2 .接着需要通过实例化Vue并且通过埃尔将盒子所对应的id进行绑定

　　

,,,3 .在盒子里面所对应的要自定义的标签上通过v-xxx标注

　　

,,,局部定义的格式:

　　 　　 　　指示:{ 　　“xxx”: { 　　绑定:函数(el、绑定){ 　　el.style。xxx=binding.value 　　} 　　} 　　} 　　 　　

7。指令函数的简写

　　

,,,函数等同于将代码写入绑定和更新里

　　 　　 　　指令:{ 　　“xxx”:函数(el、绑定){ 　　el.style。xxx=binding.value 　　} 　　} 　　& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=" utf - 8 "/比; 　　& lt; title> & lt;/title> 　　& lt;脚本src=" https://www.yisu.com/zixun/js/vue-2.4.0.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=昂凶印北? 　　& lt; p v-fontsize=" 20 px”v-color=薄奥躺薄霸趝{味精}}& lt;输入类型=拔谋尽眝-focus/祝辞& lt;/p> 　　& lt; p v-color=昂焐痹趝{味精}}& lt;输入类型=拔谋尽眝-color=昂焐?祝辞& lt;/p> 　　& lt;/div> 　　& lt;/body> 　　& lt;脚本type=" text/javascript祝辞//使用Vue.directive()定义一个全局指令//1 .参数一:指令的名称,定义时指令前面不需要写v -//2 .参数二:是一个对象,该对象中有相关的操作函数//3。在调用的时候必须写v - 　　Vue.directive(“焦点”,{//1 .指令绑定到元素上回立刻执行绑定函数,只执行一次//2 .每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象//3。通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效 　　绑定:函数(el) {//el.focus () 　　}，//插入表示一个元素,插入到DOM中会执行插入函数,只触发一次 　　插入:函数(el) { 　　el.focus () 　　}，//当VNode更新的时候会执行更新,可以触发多次 　　更新:函数(el) {//el.focus () 　　} 　　}）//自定义一个设置字体颜色指令 　　Vue.directive(“颜色”,{//只要通过指令绑定给了元素,元素一定会显示在页面上//一般情况和样式有关的使用绑定函数 　　绑定:函数(el、绑定){//通过绑定来传递值 　　el.style。颜色=binding.value 　　} 　　}）//实例化Vue 　　var vm=new Vue ({ 　　埃尔:“#箱”, 　　数据:{ 　　味精:“测试:“ 　　}，//定义一个局部指令 　　指示:{//自定义一个局部指令 　　“颜色”:{//设置字体颜色 　　绑定:函数(el、绑定){ 　　el.style。颜色=binding.value 　　} 　　}，//指令函数的简写://函数等同于将代码写入绑定和更新里 　　“字形大小”:函数(el、绑定){//设置字体大小 　　el.style。字形大?方法(binding.value) +“px” 　　} 　　} 　　}） 　　& lt;/script> 　　& lt;/html> 　　 　　

　　

以上所述是小编给大家介绍的vue 指令定义全局和局部指令及指令简写,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

vue ,指令定义全局和局部指令及指令简写