vue directive demo
<!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的更多相关文章
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
前言 最近优化项目-手机拍照图片太大,回显速度比较慢,使用了vue的自定义指令实现H5压缩上传base64格式的图片 canvas自定义指令 Vue.directive("canvas&qu ...
- Vue.directive()的用法和实例
官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue directive 回调运用
Vue的官方自定义directive,基本调用简洁如下: Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触 ...
- Vue.directive 自定义指令的问题
1.今天复习一下Vue自定义指令的代码,结果出现一个很无语的结果,先贴代码. 2. <div id="example" v-change-by="myColor&q ...
- Vue.directive添加全局指令详解
自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...
- Vue.directive注册指令
指令定义函数提供了几个钩子函数(可选): vue指令的生命周期 bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作. inserted: 被绑定 ...
- Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
随机推荐
- Agile工作方法
[工具] Slack https://slack.com/ 看板 https://trello.com/ 其他TBC
- js simple drag.
// by zhangxinxu welcome to visit my personal website http://www.zhangxinxu.com/ // zxx.drag v1.0 20 ...
- WPF，布局，Menu,MenuItem,DockPanel,Grid,DockPanel.Dock='',ToolBar，Content,Image,Uri
布局相关: Grid as title Binding Path="", Mode= TwoWay, model should implement IPropertyChanged ...
- wxpython example
#!/usr/bin/env python #---------------------------------------------------------------------------- ...
- HDU 2767:Proving Equivalences(强连通）
题意: 一个有向图,问最少加几条边,能让它强连通 方法: 1:tarjan 缩点 2:采用如下构造法: 缩点后的图找到所有头结点和尾结点,那么,可以这么构造:把所有的尾结点连一条边到头结点,就必然可以 ...
- （49）C# npoi-word
//新建段落 XWPFParagraph p1 = doc.CreateParagraph(); //对齐方式 p1.SetAlignment(ParagraphAlignment.LEFT); p1 ...
- HDU 5790 Prefix（Hash + 主席树）
题目链接 Prefix 题意 给定一个字符串序列,求第$l$个字符串到第$r$个字符串之间有多少个不同的前缀 强制在线 考虑$Hash$ 首先把所有前缀都$hash$出来,按顺序组成一个长度不超过 ...
- 洛谷——P2919 [USACO08NOV]守护农场Guarding the Farm
P2919 [USACO08NOV]守护农场Guarding the Farm 题目描述 The farm has many hills upon which Farmer John would li ...
- java保留n位小数
double x = 123456789.987654312; String.format("%.nf", x) n为保留的小数位,x必须为double类型. 例如保留3位小数 S ...
- DELPHI 10.2 TOKYO搭建LINUX MYSQL开发环境
DELPHI 10.2 TOKYO搭建LINUX MYSQL开发环境 笔者使用ubuntu64位LINUX 首先必须保证LINUX可以连互联网. 安装MYSQLsudo apt-get update ...