Vue.js自定义指令　　传送门

　　自定义指令：除了内置指令，Vue也允许用户自定义指令

　　注册指令：通过全局API Vue.directive可以注册自定义指令

　　自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode

　　Learn

　　　　一、自定义指令钩子函数

　　　　二、自定义指令钩子函数的参数

　　　　三、自定义指令简写

　　项目结构

　　

　　【每个demo下方都存有html源码】

一、自定义指令钩子函数　　传送门

　　自定义指令的钩子函数：

　　　　bind：只调用一次，指令第一次绑定到元素时调用

　　　　inserted：被绑定元素插入父节点时调用

　　　　update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前

　　　　componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用

　　　　unbind：只调用一次，指令与元素解绑时调用

　　自定义指令的使用：在自定指令的名称前加 上 v-；

　　通过button点击按钮来控制是否解除绑定

  1. <div id="GaryId">
  2.     <input type="text" v-model="name"/><br />
  3.     name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />
  4.     <button @click="flag=!flag">解除绑定</button>
  5. </div>  
  1. Vue.directive('demo',{
  2.         //指令的钩子函数
  3.         bind(){
  4.             alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");
  5.         },
  6.         inserted(){
  7.             alert("instered 插入到父节点之后，DOM对象");
  8.         },
  9.         unbind(){
  10.             alert("unbind 解除绑定");
  11.         },
  12.         update(){
  13.             alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);
  14.         },
  15.         componentUpdated(){
  16.             alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);
  17.         }
  18.  
  19.     });

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Gary</title>
  6.     <script type="text/javascript"  src="../js/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10. <div id="GaryId">
  11.     <input type="text" v-model="name"/><br />
  12.     name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />
  13.     <button @click="flag=!flag">解除绑定</button>
  14. </div>
  15. </body>
  16.  
  17. <script>
  18.  
  19.     Vue.directive('demo',{
  20.         //指令的钩子函数
  21.         bind(){
  22.             alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");
  23.         },
  24.         inserted(){
  25.             alert("instered 插入到父节点之后，DOM对象");
  26.         },
  27.         unbind(){
  28.             alert("unbind 解除绑定");
  29.         },
  30.         update(){
  31.             alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);
  32.         },
  33.         componentUpdated(){
  34.             alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);
  35.         }
  36.  
  37.     });
  38.  
  39.     let vm = new Vue({
  40.         data:{
  41.             name:'Gary',
  42.             flag:true
  43.         }
  44.     }).$mount('#GaryId');
  45.  
  46. </script>
  47.  
  48.  </html>

Gary_Custom_Directive.html

二、自定义指令钩子函数的参数　　传送门

　　自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode；

　　el：获取DOM对象；

　　binding：一个包含很多属性的对象；

　　vnode：Vue编译生成的虚拟节点；

　　oldVnode：上一个虚拟节点；

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Gary</title>
  6.     <script type="text/javascript"  src="../js/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10. <div id="GaryId">
  11.             <input type="text" v-model="name" /><br />
  12.             name : <span v-demo.once.stop='name' ref='name'>{{name}}</span><br />
  13.             <button v-on:click="flag = !flag">click
  14. </body>
  15.  
  16. <script>
  17.  
  18.     Vue.directive('demo',{
  19.         //指令的钩子函数
  20.         bind(el,binding){
  21.             //console.log(el);
  22.             el.style.color='red';
  23.             console.log(binding.name);
  24.             console.log(binding.value);
  25.  
  26.             console.log(binding.expression);
  27.             console.log(binding.arg);
  28.             console.log(binding.modifiers);
  29.  
  30.                 if(binding.arg === 'click'){
  31.                     console.log("执行点击事件");
  32.                 }
  33.  
  34.                 if(binding.modifiers.once){
  35.                     console.log("只执行一次");
  36.                 }
  37.  
  38.         },
  39.         update(el,binding){
  40.             console.log("update value = "+binding.value);
  41.             console.log("update oldValue = "+binding.oldValue);
  42.         }
  43.     });
  44.  
  45.     let vm = new Vue({
  46.         data:{
  47.             name:'Gary',
  48.             flag:true
  49.         }
  50.     }).$mount('#GaryId');
  51.  
  52. </script>
  53.  
  54.  </html>

Gary_Custom_Directive-02.html

三、自定义指令简写　　传送门

　　通过directives指令和focus指令实现修改样式和加载页面时自动聚焦

  1. <div id="GaryId">
  2.             <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->
  3.             <input type="text" v-model="name"  v-focus/><br />
  4.             name : <span v-font_style:blue>{{name}}</span><br />
  5. </body>
  1.    　　 directives : {
  2.             font_style : function(el, binding){
  3.                 el.style.color = binding.arg;
  4.             },
  5.             //聚焦
  6.             focus:{
  7.                 inserted(el){
  8.                     el.focus();
  9.                 }
  10.             }    

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Gary</title>
  6.     <script type="text/javascript"  src="../js/vue.js"></script>
  7.  
  8. </head>
  9. <body>
  10. <div id="GaryId">
  11.             <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->
  12.             <input type="text" v-model="name"  v-focus/><br />
  13.             name : <span v-font_style:blue>{{name}}</span><br />
  14. </body>
  15.  
  16. <script>
  17.  
  18.         let vm = new Vue({
  19.             data : {
  20.                 name : 'Gary',
  21.                 flag : true
  22.             },
  23.             directives : {
  24.                 font_style : function(el, binding){
  25.                     el.style.color = binding.arg;
  26.                 },
  27.                 focus : {
  28.                     inserted(el){
  29.                         el.focus();
  30.                     }
  31.                 }
  32.             }
  33.     }).$mount('#GaryId');
  34.  
  35. </script>
  36.  
  37.  </html>

Gary_Custom_Directive-03.html

Vue_(组件)自定义指令的更多相关文章

  1. 在angular7中创建组件/自定义指令/管道

    在angular7中创建组件/自定义指令/管道 组件 使用命令创建组件 创建组件的命令:ng generate component 组件名 生成的组件组成: 组件名.html .组件名.ts.组件名. ...

  2. 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  3. vue_简介_渐进式 js 框架_内置指令_自定义指令_自定义插件

    vue 尤雨溪 华裔 Google 工程师 遵循 MVVM 模式 编码简洁,体积小,运行效率高,适合 移动 / PC 端 开发 动态构建用户界面: 异步获取后台数据,展现到页面 渐进式 js 框架 渐 ...

  4. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  5. Vue_自定义指令

    关于Vue的自定义指令: - 在Vue中除了核心功能默认内置的指令(v-model & v-show) - Vue也允许注册自定义指令. 注意,在 Vue2.0 中,代码复用和抽象的主要形式是 ...

  6. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  7. 使用Vue自定义指令实现Select组件

    完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...

  8. Angular的自定义指令以及实例

    本文章已收录于:  AngularJS知识库  分类: javascript(55)  http://www.cnblogs.com/xiaoxie53/p/5058198.html   前面的文章介 ...

  9. 走进AngularJs(五)自定义指令----（下）

    自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...

随机推荐

  1. HashMap—— values() remove方法 containsKey（）方法 containsValue（）方法

    values()方法:看下面的实例,就是把所有的value值封装成一个connection型的数组 Map<Integer,Student> students=new HashMap< ...

  2. 解决tomcat端口冲突

    1.根据8080端口号查找占用8080端口的进程 netstat -ano|findstr " 进程id:6352 2.根据进程ID查找进程名字 tasklist|findstr " ...

  3. Laravel使用whereHas进行过滤不符合条件的预加载with数据

    问题描述:目前有用户表,文章表,文章评论表,收藏表.我需要获我的收藏文章列表(可以被搜索,通过分类,文章标题等),通过收藏预加载with文章表,文章评论表,文章用户表 解决办法:通过whereHas限 ...

  4. Intellij Idea 建立maven项目 报错 :java: 错误: 不支持发行版本 5

    百度一搜这个错误,好多人都遇到了 不计其数的人都遇到.网上大多数都是菜鸟的愚见.经过本人的测试发现,用Idea建立普通的Java项目 然后随便建立一个类运行就不会报错. 但是如果用Idea建立一个普通 ...

  5. input框blur事件 ie问题

    在chrome和firefox里会返回 在ie却获取不到relatedTarget:可以通过document.activeElement获取到点击到哪个标签 注意document.activeElem ...

  6. jboss日志的自定义

    最近由于想着每次调试socket接收数据情况都需要源码debug好麻烦,要是能把接收到的数据输出到一个单独的日志文件,那出问题的时候,查看问题就方便多了. log4j的日志是可以很方便自定义的,只是这 ...

  7. 第十章、jupyter入门之pandas

    目录 第十章.jupyter入门之pandas 一.什么是pandas 二.Series 三.基本概念 四.基本运算 五.DataFrame 第十章.jupyter入门之pandas 一.什么是pan ...

  8. ScrollView 滚动视图

    ScrollView 种类: 1.HorizontalScrollView:水平滚动视图 2.ScrollView:垂直滚动视图(常用类) public class MainActivity exte ...

  9. 微信小程序开发（一）创建一个小程序Hello World！

    开发微信小程序并不是很难,网上有很多小程序开发资料,尤其是微信官方的<小程序开发指南>最详细. 下面是我开发小程序的历程: 第一步,请前往https://mp.weixin.qq.com/ ...

  10. 2.2.EJB_Bean

    1.EJB中的三种Bean 1．会话bean(sessionbean) 负责与客户端交互．是编写业务逻辑的地方．在会话Bean中可以通过jdbc直接操作数据厍．但大多数情况下都是通过实体bean来完 ...