<template>
<div>
<input v-model="dir1" v-my-directive1="dir1"/>
     <input v-model="dir2" v-my-directive2="dir2"/>
</div>
</template>
<script>
export default {
data(){
return {
         dir1:'',
         dir2:''
       }
},
directives:{
       //直接绑定函数,作用等同于update,不做准备工作和扫尾工作
myDirective1(val){
console.log(val)
},
       myDirective2:{
          bind(){
             //第一次绑定到元素的准备工作
          },
          update(val,old){
            //在绑定到元素后立即以初始值第一次调用,然后每次example2变化都会调用update
            console.log(val)
          },  
          unbind(){
            //销毁前的清理工作
          }
       }
}
}
</script>

vue之自定义指令directive的更多相关文章

  1. Vue(九)---自定义指令(directive )

    1.无参数 自定义指令的方式:1. 使用Vue.directive 来自定义2. 第一个参数就是 指令名称 xart3. el 表示当前的html dom对象4. 在方法体内就可以通过 innerHT ...

  2. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

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

  3. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  4. 最简单的方式理解Vue的自定义指令与混合

    vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...

  5. vue 通过自定义指令实现 置顶操作;

    项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令  ...

  6. vue怎么自定义指令??

    最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...

  7. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  8. Vue 3自定义指令开发

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...

  9. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

随机推荐

  1. [转]C#调用FFMPEG,并异步读取输出信息的代码

    http://www.cnblogs.com/Leo_wl/archive/2011/12/31/2308841.html

  2. js中的深复制和浅复制

    在实际情况中经常会遇到对对象复制的问题.比如在处理项目中的一笔多结构的数据存储或者调用,这个时候你就要对对象(json)进行操作,而不同的操作根据不同的需求来定义.其中最常见最普遍的是对对象的复制,重 ...

  3. Java多线程20:多线程下的其他组件之CountDownLatch、Semaphore、Exchanger

    前言 在多线程环境下,JDK给开发者提供了许多的组件供用户使用(主要在java.util.concurrent下),使得用户不需要再去关心在具体场景下要如何写出同时兼顾线程安全性与高效率的代码.之前讲 ...

  4. 《C#图解教程》读书笔记之一:C#和.NET框架

    本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.在.NET之前的编程世界 C#语言是在微软公司的.NET框架上开发程序而设计的,首先作者给大家纠正了一下C# ...

  5. 使用Chef管理windows集群

    但凡服务器上了一定规模(百台以上),普通的ssh登录管理的模式就越来越举步维艰.试想Linux发布了一个高危漏洞的补丁,你要把手下成百上千台机器都更新该补丁,如果没有一种自动化方式,那么至少要耗上大半 ...

  6. 成都亚马逊AWSome Day回顾

    6月25日我和公司同仁一起参加了亚马逊在成都的第一场AWSome Day活动.整个活动时间异常紧促,短短一天包含了7堂session,讲师的狂轰乱炸使得我们同学们普遍觉得比上班累多了.好了,废话不多说 ...

  7. Microsoft Dynamics CRM 2013 and 2011 Update Rollups and Service Packs

      Microsoft Dynamics CRM 2013   BTW: RC stands for Release for Candidate, and RTM stands for Release ...

  8. C#对七牛云的操作

    1.配置环境 项目中引用 QiNiu.4.0.dll 在webconfig:<add key="USER_AGENT" value="qiniu csharp-sd ...

  9. EF架构~EF6配置需要注意的几个地方

    回到目录 从EF5升级到EF6之后,可能会出现一些问题,这是正常的,任何系统的升级都没有一帆风顺的,当然这些不是我要说的重点,我真正要说的是,当出现这些问题时,我们应该如何去应对它,下面我总结了几个方 ...

  10. struts2学习笔记之十二:struts2对异常的自动处理

    在UserAction类中引发异常,但是不处理 package com.djoker.struts2; import java.util.Date; import org.apache.struts2 ...