<!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. Junit框架使用--JUnit常用断言及注解

    从别人博客中抄过来一点东西 原文地址:http://blog.csdn.net/wangpeng047/article/details/9628449 断言是编写测试用例的核心实现方式,即期望值是多少 ...

  2. STL学习笔记(七) 程序中使用STL

    条款43:算法调用优先于手写循环 class Widget { public: bool test(); }; vector<Widget> vec; 算法调用: for_each(vec ...

  3. Keep-Alive 长连接（转载）

    短连接与长连接 通俗来讲,浏览器和服务器每进行一次通信,就建立一次连接,任务结束就中断连接,即短连接.相反地,假如通信结束(如完成了某个HTML文件的信息获取)后保持连接则为长连接.在HTTP/1.0 ...

  4. Requery,Refresh，Adoquery.Close,Open 区别

    经过测试发现: Requery 相当于 Adq.Close,Open:并且比Close,Open方法有个优点就是不丢失排序,Sort Adq.Close,Open 后,原来的 Adq.Sort 会丢失 ...

  5. Understanding Linux CPU Load - when should you be worried?

    http://blog.scoutapp.com/articles/2009/07/31/understanding-load-averages

  6. AC日记——爱情之路 codevs 2070

    2070 爱情之路  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description yh非常想念他的女朋友小y,于是他 ...

  7. AC日记——[福利]可持久化线段树 cogs 2554

    2554. [福利]可持久化线段树 ★★☆   输入文件:longterm_segtree.in   输出文件:longterm_segtree.out   简单对比时间限制:3 s   内存限制:2 ...

  8. Unity3d Inspector面板实现set/get访问器

    简单说一下属性和字段的区别:字段就是成员变量,而属性确实提供给外部访问内部成员变量的接口.之所以会有属性的出现,就是为了避免外部对类的成员的直接访问,通俗的说就是OOP中的封装思想. using Un ...

  9. FZU 2224 An exciting GCD problem(GCD种类预处理+树状数组维护)同hdu5869

    题目链接:http://acm.fzu.edu.cn/problem.php?pid=2224 同hdu5869 //#pragma comment(linker, "/STACK:1024 ...

  10. Java爬取51job保存到MySQL并进行分析

    大二下实训课结业作业,想着就爬个工作信息,原本是要用python的,后面想想就用java试试看, java就自学了一个月左右,想要锻炼一下自己面向对象的思想等等的, 然后网上转了一圈,拉钩什么的是动态 ...