vue2.0自定义指令的使用方法
感觉2.0好坑啊，自定义指令和1.0完全不一样，并且文档写得也不太清晰，下面是我写得一个demo,希望帮助大家更好地理解自定义指令
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="vue.js"></script> -->
</head> <body>
<div id="box">
<p v-demo="{color:'red'}">红色文字</p>
<input type="text" name="" v-focus>
</div>
<script type="text/javascript">
window.onload = function() {
// 全局指令
Vue.directive('demo',{
bind:function(el,val){
el.style.color = val.value.color
}
});
Vue.directive('focus',{
inserted: function(el,val) {
el.focus()
}
});
// 局部指令
var app = new Vue({
el: '#box',
directives: {
demo: {
bind: function(el, val) {
el.style.color = val.value.color
}
},
focus: {
inserted: function(el,val) {
el.focus()
}
}
}
});
}
</script>
</body> </html>
vue2.0自定义指令的使用方法的更多相关文章
- vue2.0自定义指令
前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...
- Vue2.0 - 自定义指令 vue-directive
Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...
- vue2.0 自定义指令
Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...
- vue2.0 自定义指令详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法
因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...
- Vue中自定义指令的使用方法！
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...
- vue3.0自定义指令（drectives)
在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- vue2.0 自定义 弹窗（MessageBox）组件
组件模板 src/components/MessageBox/index.vue <!-- 自定义 MessageBox 组件 --> <template> <div c ...
随机推荐
- python - bilibili（二）出错的解决办法
在获取房间号之前我们先解决上篇文章遗留的bug,即输入的房间号不是数字和对应的房间号不存在而产生的问题. 输入的房间号不是数字: 在python中,你所输入的必定是字符串,虽然你输入的是数字,但是类型 ...
- [Hadoop] - 自定义Mapreduce InputFormat&OutputFormat
在MR程序的开发过程中,经常会遇到输入数据不是HDFS或者数据输出目的地不是HDFS的,MapReduce的设计已经考虑到这种情况,它为我们提供了两个组建,只需要我们自定义适合的InputFormat ...
- MASMPlus编译出错：error LNK2001: unresolved external symbol _WinMainCRTStartup
初学汇编,感觉很多不懂.不过那也是,如果懂了的话就不用学了,从无到有学习一门编程语言果然不是那么容易的一件事. 学习汇编总得要有一款汇编软件才行,没理由只是使用Windows自带的DEBUG.于是上了 ...
- GDKOI2015滚粗记
又是愉悦的滚粗了hahaha（特别不甘心啊啊啊） 其实去比赛每次都一样啦，就是每次吃饭睡觉补番考试评讲互黑跪烂什么的，这次就不用说了啦，先把老师要求写的东西贴出来再写点别的啦 这次暴露了很多问题，首先 ...
- 新手向--git版本控制器
body { width: 70%; border: 1px solid #ddd; outline: 1300px solid #fff; margin: 16px auto } body .mar ...
- Nginx http 500错误分析及解决方法
出现场景: 在用nginx做负载均衡服务器对系统做并发测试,并发量比较大时Nginx会报出Http 500错误 报错原因: 访问量大的时候,由于系统资源限制,而不能打开过多的文件 ...
- alisql安装步骤
卸载原有自带的Mysql yum remove mysql-libs 安装依赖包 yum install centos-release-scl devtoolset-4-gcc-c++ devto ...
- 移动端click事件延迟300ms到底是怎么回事，该如何解决？
不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...
- win8系统不小心禁用了管理员权限怎么解决
第一步:查看系统有没有其他管理员账户 按win+x键,然后选择命令提示符 点击命令提示符打开窗口,输入net localgroup Administrators命令,然后回车 如上图,查看窗口中的&q ...
- v3学院带你一次性认清UART、RS-232、RS-422、RS-485的区别
通讯问题,和交通问题一样,也有高速.低速.拥堵.中断等等各种情况.如果把串口通讯比做交通,UART比作车站,那么一帧的数据就好比汽车.汽车跑在路上,要遵守交通规则.如果是市内,一般限速30.40,而高 ...