<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>

<div id="app">

   <div>

        <input v-model="dir1" v-my-directive1="dir1"/>

    </div>

</div>

<script>

const app = new Vue({

  el: '#app',

  data:{

  dir1:'111',

dir2:'222'

  },

   directives:{

            myDirective1:function(val){

                console.log("===="+val)

            }

        }

})

</script>

</body>

</html>

vue directive demo的更多相关文章

  1. Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式

    前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...

  2. Vue.directive()的用法和实例

    官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...

  3. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  4. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  5. Vue directive 回调运用

    Vue的官方自定义directive,基本调用简洁如下: Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触 ...

  6. Vue.directive 自定义指令的问题

    1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...

  7. Vue.directive添加全局指令详解

    自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...

  8. Vue.directive注册指令

    指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...

  9. Vue.directive自定义指令

    Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...

随机推荐

  1. HDU——1163Eddy's digital Roots（九余数定理+同余定理）

    Eddy's digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  2. HDU——2067小兔的棋盘（卡特兰数&递推DP）

    小兔的棋盘 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  3. python 命令行传入参数

    创建 test.py 文件,代码如下: #!/usr/bin/python # -*- coding: gbk -*- import sys print sys.argv if __name__==' ...

  4. 解决 Springboot中Interceptor拦截器中依赖注入失败

    问题: 在Springboot拦截器Interceptor中使用@Resource依赖注入时,发现运行的时候被注解的对象居然是null,没被注入进去 原配置为: @Configurationpubli ...

  5. K3Cloud调用存储过程

    SQLScriptServiceHelper.GetDataFromStoredProc( this.Context, DatabaseType.Oracle, "/*dialect*/TJ ...

  6. 牛客网 牛客小白月赛1 B.简单题2-控制输出格式

    B.简单题2   链接:https://www.nowcoder.com/acm/contest/85/B来源:牛客网 和A题一样,控制输出格式就可以. 代码: 1 #include<iostr ...

  7. Careercup | Chapter 2

    链表的题里面,快慢指针.双指针用得很多. 2.1 Write code to remove duplicates from an unsorted linked list.FOLLOW UPHow w ...

  8. SPOJ 8222 Substrings

    题面 Description 给长度为 n 的字符串 S , 对任意的 L , 求长度为 L 的子串最多出现的次数. Input String S consists of at most 250000 ...

  9. 电影TS/TC/SCR/R5/BD/HD/HC版本意思收集（转）

    一.版本说明: 1.CAM(枪版) CAM通常是用数码摄像机从电影院盗录.有时会使用小三角架,但大多数时候不可能使用,所以摄像机会抖动.因此我们看到画面通常偏暗人物常常会失真,下方的 字幕时常会出现倾 ...

  10. js获得checkbox选中值及input后面的文本

    原文:http://blog.csdn.net/u014079773/article/details/51865596 js如何获得多个checkbox选中的值及input后面所跟的文本 <!d ...