1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6.  
  7. </head>
  8. <body>
  9. <script src="https://unpkg.com/vue/dist/vue.js"></script>
  10. <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
  11. <div id="app">
  12.    <div>
  13.         <input v-model="dir1" v-my-directive1="dir1"/>
  14.  
  15.     </div>
  16. </div>
  17.  
  18. <script>
  19.  
  20. const app = new Vue({
  21.   el: '#app',
  22.   data:{
  23.   dir1:'111',
  24. dir2:'222'
  25.   },
  26.    directives:{
  27.             myDirective1:function(val){
  28.                 console.log("===="+val)
  29.             }
  30.         }
  31.  
  32. })
  33.  
  34. </script>
  35.  
  36. </body>
  37. </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——1215七夕节（因数和）

    七夕节 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  2. HDU——1420Prepared for New Acmer（快速幂取模）

    Prepared for New Acmer Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  3. js对象的扁平化与反扁平化

    Object.flatten = function(obj){ var result = {}; function recurse(src, prop) { var toString = Object ...

  4. caffe编译新问题

    我在一台机子上,配置第二个caffe的时候,复制之前的Makefile文件,直接 make all 居然报错了报错如下 ndefined reference to cv::imread(cv::Str ...

  5. Django AUTHENTICATION_BACKENDS

    指定认证后端 Django维护一个”authentication backends”的列表用来测试认证.当调用 django.contrib.auth.authenticate() — Django将 ...

  6. 【Hihocoder1636】Pangu and Stones（区间DP）

    题意:N堆石子,每次可以合并连续的长度从L到R的若干堆石子为1堆,费用为选择的石子总个数,求将N堆合并成1堆的最小总花费,无解输出0 思路:dp[i][j][k]表示将i到j这段区间合并为k堆的最小代 ...

  7. Linux Malloc分析-从用户空间到内核空间【转】

    转自:http://blog.csdn.net/ordeder/article/details/41654509 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...

  8. Arduino可穿戴教程保存源文件与打开已经存在的源文件

    Arduino可穿戴教程保存源文件与打开已经存在的源文件 Arduino IDE保存源文件 保存源文件可以通过“文件”菜单的“保存”或者快捷键Ctrl+S完成,如图2.28所示.   图2.28  保 ...

  9. luogu P2158 [SDOI2008]仪仗队

    题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...

  10. IntelliJ IDEA出现Search for无法退出的问题

    说明: 1.这个不是安装了Vim导致的 解决方式: 1.可能是在不正确的系统时间启动的IDEA,然后启动完成后又把时间改成正确的. 2.直接方式是重启. 3.间接方式是修改完时间后再重启一下全部IDE ...