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 ...
随机推荐
- 用js判断浏览器类型及设备
<!DOCTYPE html> <html> <head> <title>JS判断是什么设备是什么浏览器</title> <meta ...
- nvm、node、npm安装以及pycharm配置eslint
nvm.node.npm之间的区别 1. nvm的官方叫法:nodejs版本管理工具. nvm相当于是家长,一个家长可以管理多个孩子. 也就是说:一个nvm可以管理很多node版本和npm版本. 2. ...
- FZOJ Problem 2219 StarCraft
...
- 【BZOJ2286】消耗战（虚树，DFS序，树形DP）
题意:一棵N个点的树上有若干个关键点,每条边有一个边权,现在要将这些关键点到1的路径全部切断,切断一条边的代价就是边权. 共有M组询问,每组询问有k[i]个关键点,对于每组询问求出完成任务的最小代价. ...
- Windows下载 Curl 命令
Windows下载 Curl 命令 描述: 不仅Linux命令行可以使用curl命令下载软件, Windows系统的cmd命令窗口也可以使用curl命令下载,并且更稳定. 原文作者:Wayne Zhu ...
- LeetCode OJ--Regular Expression Matching
http://oj.leetcode.com/problems/regular-expression-matching/ 问题给想复杂了,只有p中可以含有. *,s中的字符都是确定的.想了好久,最终还 ...
- AC日记——[SCOI2010]游戏 bzoj 1854
1854: [Scoi2010]游戏 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 4938 Solved: 1948[Submit][Status] ...
- python笔记1：python基础
1.Python模块的标准文件模板: #!/usr/bin/env python #第1行注释可以让这个 .py 文件直接在Unix/Linux/Mac上运行 # -*- coding: utf-8 ...
- (1)hello world
操作系统安装SDK https://www.microsoft.com/net/download/windows 选择对应的操作系统 wget -q https://packages.micr ...
- 编译lua
http://www.lua.org/ 新建一个 static library 工程,把解压得到的目录下的src子目录中的所有.h和.c文件拷贝到新工程目录下. 工程中删除自动生成的 main.c 文 ...