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点击按钮来控制是否解除绑定

<div id="GaryId">

    <input type="text" v-model="name"/><br />

    name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />

    <button @click="flag=!flag">解除绑定</button>

</div>  
Vue.directive('demo',{

        //指令的钩子函数

        bind(){

            alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");

        },

        inserted(){

            alert("instered 插入到父节点之后，DOM对象");

        },

        unbind(){

            alert("unbind 解除绑定");

        },

        update(){

            alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);

        },

        componentUpdated(){

            alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);

        }

    });

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

    <input type="text" v-model="name"/><br />

    name:<span v-if="flag"  v-demo ref='name'>{{name}}</span><br />

    <button @click="flag=!flag">解除绑定</button>

</div>

</body>

<script>

    Vue.directive('demo',{

        //指令的钩子函数

        bind(){

            alert("bind 首次绑定到元素时候执行，执行一次，常用于数据的初始化操作");

        },

        inserted(){

            alert("instered 插入到父节点之后，DOM对象");

        },

        unbind(){

            alert("unbind 解除绑定");

        },

        update(){

            alert("updata 绑定该指令的元素 所在的Vue实例挂载的DOM树 发生更新时候调用"+"name ="+vm.$refs.name.textContent);

        },

        componentUpdated(){

            alert("componentUpdated 更新后调用"+"name ="+vm.$refs.name.textContent);

        }

    });

    let vm = new Vue({

        data:{

            name:'Gary',

            flag:true

        }

    }).$mount('#GaryId');

</script>

 </html>

Gary_Custom_Directive.html

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

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

　　el：获取DOM对象；

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

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

　　oldVnode：上一个虚拟节点；

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

            <input type="text" v-model="name" /><br />

            name : <span v-demo.once.stop='name' ref='name'>{{name}}</span><br />

            <button v-on:click="flag = !flag">click

</body>

<script>

    Vue.directive('demo',{

        //指令的钩子函数

        bind(el,binding){

            //console.log(el);

            el.style.color='red';

            console.log(binding.name);

            console.log(binding.value);

            console.log(binding.expression);

            console.log(binding.arg);

            console.log(binding.modifiers);

                if(binding.arg === 'click'){

                    console.log("执行点击事件");

                }

                if(binding.modifiers.once){

                    console.log("只执行一次");

                }

        },

        update(el,binding){

            console.log("update value = "+binding.value);

            console.log("update oldValue = "+binding.oldValue);

        }

    });

    let vm = new Vue({

        data:{

            name:'Gary',

            flag:true

        }

    }).$mount('#GaryId');

</script>

 </html>

Gary_Custom_Directive-02.html

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

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

<div id="GaryId">

            <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->

            <input type="text" v-model="name"  v-focus/><br />

            name : <span v-font_style:blue>{{name}}</span><br />

</body>
   　　 directives : {

            font_style : function(el, binding){

                el.style.color = binding.arg;

            },

            //聚焦

            focus:{

                inserted(el){

                    el.focus();

                }

            }    

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Gary</title>

    <script type="text/javascript"  src="../js/vue.js"></script>

</head>

<body>

<div id="GaryId">

            <!--通过v-focus标签，当页面加载时，自动聚焦到这个表单上-->

            <input type="text" v-model="name"  v-focus/><br />

            name : <span v-font_style:blue>{{name}}</span><br />

</body>

<script>

        let vm = new Vue({

            data : {

                name : 'Gary',

                flag : true

            },

            directives : {

                font_style : function(el, binding){

                    el.style.color = binding.arg;

                },

                focus : {

                    inserted(el){

                        el.focus();

                    }

                }

            }

    }).$mount('#GaryId');

</script>

 </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. c#连接Java后台，处理返回的数据

    首先定义共通文件,根据url连接Java后台 class ConntectUtil { public JObject ConsoleApplication(string appID, CustomDa ...

  2. O038、Shelve Instance 操作详解

    参考https://www.cnblogs.com/CloudMan6/p/5524751.html   Instance 被 Suspend 后虽然处于 shutdown 状态,但 Hypervis ...

  3. python 中英文时间转换

    上例子:time='Friday, November 18, 2016',将其转换为标准格式: time_format = datetime.datetime.strptime(time, '%A, ...

  4. 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素

    jQuery 学习8 遍历-父亲兄弟子孙元素   jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素.   什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...

  5. 自定义springboot-starter

    参考: https://juejin.im/entry/5b447cbbe51d45199566f752 https://www.baeldung.com/spring-boot-custom-sta ...

  6. jsp引入文件时候经常遇到的${ctx}

    jsp引入文件时候经常遇到的${ctx} 在jsp页面中经常见到这样的代码: <script type="text/JavaScript" src="${ctx}/ ...

  7. go语言入门（5）工程管理

    在工程中不会简单到只有一个源代码文件,且源文件之间会有相互的依赖关系,早期Go语言使用makefile作为工程管理的临时方案,后来的Go命令行工具的革命性之处在于彻底消除了工程文件的概念,完全用目录结 ...

  8. 使用hbuilder打包时，调用地图和相机

    <template> <div class="comCon"> <!-- 你是头部区域的内容 --> <headback class=&q ...

  9. 记录-Intellij Idea下以Tomcat运行Web项目时的位置问题

    今天本来准备把原来的一个Web项目导入到Idea下,之前这个项目是用eclipse写的,容器用的tomcat,首先导入前我把一些没用的配置文件都给删了,像什么.eclipse..setting什么的, ...

  10. idea中无法自动提示相关jar包

    遇到的问题:今天在pom.xml导入数据库坐标后,发现在在配置数据相关属性时,idea无法使用我引入的jar包,后面才发现是因为在下载包时,没网络了,jar包下载失败 解决办法:cmd进入自己的mav ...