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 相关文章推荐
LazyLoad 延迟加载(按需加载)
May 31 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
谈谈IntersectionObserver懒加载的具体使用
Oct 15 Javascript
token 机制和实现方式
Dec 15 Javascript
JavaScript前端面试组合函数
Jun 21 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封装的mysqli类完整实例
2016/10/18 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
YII2框架使用控制台命令的方法分析
2020/03/18 PHP
Javascript 面试题随笔
2011/03/31 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
webpack入门+react环境配置
2017/02/08 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python连接DB2数据库
2016/08/27 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python斐波那契数列的计算方法
2018/09/27 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
如何理解python中数字列表
2020/05/29 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
python基本算法之实现归并排序(Merge sort)
2020/09/01 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
中介公司区域经理岗位职责范本
2014/03/02 职场文书
应届生求职信范文
2014/05/26 职场文书
离婚协议书标准格式
2014/10/04 职场文书
老龙头导游词
2015/02/11 职场文书
商超业务员岗位职责
2015/02/13 职场文书
趣味运动会广播稿
2015/08/19 职场文书
java项目构建Gradle的使用教程
2022/03/24 Java/Android