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 ...
随机推荐
- MySQL-MongoDB开源监控利器之PMM
背景说明: PMM是percona公司提供的一个对于MySQL和MongoDB的监控和管理平台.PMM有两部分组成PMM Client和PMM Server PMM Client:安装在每一台需要进行 ...
- 刷题总结——date(ssoj)
题目: 题目背景 SOURCE:NOIP2015-SHY-9 题目描述 小Y和小Z好不容易有机会相见啦,可是邪恶的小H却不想让他们相见.现在有一些城市,城市之间有双向路径相连,有路径相连的城市之间可以 ...
- 【BJOI2014/bzoj4530】大融合
题意 有 $n$ 个点,初始没有连边,要求支持两个动态操作: 1. 加一条边(保证之前两点不连通) 2. 查询过一条边的简单路径数量(就是两边连通块的大小的乘积) $n,Q\le 100000$ 题解 ...
- jq 的replaceWith方法在360下面会出现兼容问题
弄的繁琐点, 先remove旧的元素,然后append就好了
- 【Codevs1034】家园（最大流，裂点）
题意:由于人类对自然的疯狂破坏,人们意识到在大约2300年之后,地球不能再居住了,于是在月球上建立了新的绿地,以便在需要时移民.令人意想不到的是,2177年冬由于未知的原因,地球环境发生了连锁崩溃,人 ...
- LeetCode OJ--Set Matrix Zeroes **
http://oj.leetcode.com/problems/set-matrix-zeroes/ 因为空间要求原地,所以一些信息就得原地存储.使用第一行第一列来存本行本列中是否有0.另外对于第一个 ...
- python--导入就方便实现你需要的功能（模块）
模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保存了 ...
- fread函数和fwrite函数
1.函数功能 用来读写一个数据块. 2.一般调用形式 fread(buffer,size,count,fp); fwrite(buffer,size,count,fp); 3.说明 ( ...
- Java中将List转成逗号数组的方案
说明:逗号字符串转成数组或者List都是可以的,反过来依然可行:但是如果是List<String>转List<Integer>,基本误解,在Java 7只能for循环,如果在J ...
- Scut游戏服务器免费开源框架--快速开发（1）
Scut快速开发(1) 1 开发环境 需要安装的软件 a) VS2010开发工具(.Net Framework 4.0以上) 2 HelloWorld 2.1 ...