<!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. 解决 Could not load hsdis-amd64.dll

    win10下想查看JIT编译的汇编源码 结果提示: Could not load hsdis-amd64.dll; library not loadable; PrintAssembly is dis ...

  2. nginx 变量 + lua

    nginx变量使用方法详解(8) nil.null与ngx.null 发现一个nginx LUA开发Web App的框架 nginx是个好东西, nginx的openrtsy发行版本更是个好东西. 今 ...

  3. SharePoint中使用Global.asax

    Global.asax是ASP.Net应用程序的一个文件,用来处理Application级别的事情.可以添加自定义代码到这个文件,详细使用方式见 http://msdn.microsoft.com/e ...

  4. url相关

    #测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo$_SERVER['HTTP_HOST']."<br> ...

  5. poj 1970(搜索)

    The Game Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6247   Accepted: 1601 Descript ...

  6. 总结下常用js中的小语法和技巧

    1,数组对象遍历 对一个级数对象进行遍历,取出每个值 var arr={ "result":[ {"time":"2018-10-24 12:12:1 ...

  7. 网站robots.txt探测工具Parsero

    网站robots.txt探测工具Parsero   robots.txt文件是网站根目录下的一个文本文件.robots.txt是搜索引擎中访问网站的时候要查看的第一个文件.当搜索引擎访问一个站点时,它 ...

  8. redis常用命令与使用分析

    redis-cli的使用 连接服务器 redis-cli -h 127.0.0.1 -p 6392  -a 123456 set操作 语法 sadd key [members.......]      ...

  9. proc_get_status() has been disabled for security reasons

    找到php.ini搜索proc_get_status去掉即可.

  10. 一个能让你了解所有函数调用顺序的Android库

    http://mobile.51cto.com/android-536059.htm 原理 本库其实并没有什么黑科技,本库也没有java代码,核心就是2个build.gradle中的task.首先,原 ...