<!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. BZOJ2653 middle 【二分 + 主席树】

    题目 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右端点在[c ...

  2. iOS-BMK标注&覆盖物

    在iOS开发中,地图算是一个比较重要的模块.我们常用的地图有高德地图,百度地图,谷歌地图,对于中国而言,苹果公司已经不再使用谷歌地图,官方使用的是高德地图.下面将讲述一下百度地图开发过程中的一些小的知 ...

  3. 【SCOI2003】【BZOJ1092】蜘蛛难题

    有一堆管道,还有一个蜘蛛Willy,如下图所示.所有管道的是上端开口,下端封底,直径都是1cm,连接两个管道的连接容量无限,但体积可以忽略不计. 在第一个管道上方有一个水源,从中有水不断往下流,速度为 ...

  4. Distinct Substrings(spoj 694)

    题意:要求不同子串的个数 /* 先求出height数组,不难看出height之和就是重复的字符串个数,用总的减去它就行了. */ #include<cstdio> #include< ...

  5. css3 背景图动画一

    一 实现背景图循环播放 @keyframes mlfly { 0%{ background-position:0 0; } 100%{ background-position:210px 0; } } ...

  6. spring boot--日志、开发和生产环境切换、自定义配置(环境变量)

    Spring Boot日志常用配置: # 日志输出的地址:Spring Boot默认并没有进行文件输出,只在控制台中进行了打印 logging.file=/home/zhou # 日志级别 debug ...

  7. AC日记——Sign on Fence Codeforces 484e

    E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...

  8. 富文本ZSSRichTextEditor之趟坑集锦

    富文本ZSSRichTextEditor是iOS原生与网页交互的集大成者,各种交互.自然问题也是多多,这篇文文章陆续更新遇到的奇葩问题. 1.问题1:从头条这种文章里头复制粘贴的文章,里边有图片,我们 ...

  9. 深入理解js中的立即执行函数(function(){…})()

    javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( f ...

  10. 初级Springboot(一)

    初级Springboot(一) 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 一.了解Springboot 做Java开发的小伙伴都知道,我们在做项目的时候,需要去写大量的配置文件 ...