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


Posted in Javascript onNovember 20, 2018

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

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

    测试案例步骤:

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

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

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

    局部定义的格式:

directives:{
      'xxx':{
       bind:function(el,binding){
        el.style.xxx = binding.value
      }
     }
   }

 7.指令函数的简写

    function等同于将代码写入bind和update里

directive:{  
    'xxx':function(el,binding){
      el.style.xxx = binding.value
    }
  }
<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8" />
   <title></title>
   <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
   <div id="box">
     <p v-fontsize="'20px'" v-color="'green'">{{msg}}<input type="text" v-focus /></p>
     <p v-color="'red'">{{msg}}<input type="text" v-color="'red'" /></p>
   </div>
 </body>
 <script type="text/javascript">
   //使用Vue.directive()定义一个全局指令
   //1.参数一:指令的名称,定义时指令前面不需要写v-
   //2.参数二:是一个对象,该对象中有相关的操作函数
   //3.在调用的时候必须写v-
   Vue.directive('focus',{
     //1.指令绑定到元素上回立刻执行bind函数,只执行一次
     //2.每个函数中第一个参数永远是el,表示绑定指令的元素,el参数是原生js对象
     //3.通过el.focus()是无法获取焦点的,因为只有插入DOM后才生效
     bind:function(el){
       //el.focus()
     },
     //inserted表示一个元素,插入到DOM中会执行inserted函数,只触发一次
     inserted:function(el){
       el.focus()
     },
     //当VNode更新的时候会执行updated,可以触发多次
     updated:function(el){
       //el.focus()
     }
   })
   //自定义一个设置字体颜色指令
   Vue.directive('color',{
     //只要通过指令绑定给了元素,元素一定会显示在页面上
     //一般情况和样式有关的使用bind函数
     bind:function(el,binding){ //通过binding来传递值
       el.style.color = binding.value
     }
   })
   //实例化Vue
   var vm = new Vue({
     el:'#box',
     data:{
       msg:'测试:'
     },
     //定义一个局部指令
     directives:{ //自定义一个局部指令
       'color':{ //设置字体颜色
         bind:function(el,binding){
           el.style.color = binding.value
         }
       },
       //指令函数的简写:
       //function等同于将代码写入bind和update里
       'fontsize':function(el,binding){ //设置字体大小
         el.style.fontSize = parseInt(binding.value) + 'px' 
       }
     }
   })
 </script>
</html>

总结

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

Javascript 相关文章推荐
javascript实现信息增删改查的方法
Jul 25 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
关于vue.js发布后路径引用的问题解决
Aug 15 Javascript
简单的网页广告特效实例
Aug 19 Javascript
深入理解node.js http模块
Jan 24 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
详解Vue.js在页面加载时执行某个方法
Nov 20 #Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 #Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 #jQuery
一步步教你利用Docker设置Node.js
Nov 20 #Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
Nov 20 #Javascript
vue中的适配px2rem示例代码
Nov 19 #Javascript
JS监听事件的叠加和移除功能
Nov 19 #Javascript
You might like
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
解析strtr函数的效率问题
2013/06/26 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
2014/01/14 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Vue.js 单页面多路由区域操作的实例详解
2017/07/17 Javascript
js作用域和作用域链及预解析
2019/04/11 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue实现移动端省市区选择
2019/09/27 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python中异常重试的解决方案详解
2017/05/05 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
将不规则的Python多维数组拉平到一维的方法实现
2021/01/11 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
优秀应届生推荐信
2013/11/09 职场文书
高中生家长寄语大全
2014/04/03 职场文书
法学院毕业生求职信
2014/06/25 职场文书
手机销售员岗位职责
2015/04/11 职场文书
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
字节飞书面试promise.all实现示例
2022/06/16 Javascript