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 相关文章推荐
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
JavaScript实现动态增删表格的方法
Mar 09 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
详解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中实现进程间通讯
2006/10/09 PHP
收集的DedeCMS一些使用经验
2007/03/17 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
2017/07/09 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
原生js滑动轮播封装
2020/07/31 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
python代码制作configure文件示例
2014/07/28 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
学习心理学心得体会
2016/01/22 职场文书