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 ...
随机推荐
- Redis参数配置和运维说明
开发过程中使用缓存的情况还是比较多的,记录一下Redis的参数说明以备以后查看: #Redis Config daemonize yes pidfile /var/run/redis.pid port ...
- PHP学习2 — PHP Cookie 与 Session
PHP Cookies cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 ...
- Android.mk模板（持续更新中）
此文列出Android.mk的常用模板(部分内容源于多篇他人博客,这里不具体指出),如有错漏,还请在评论中指出,后期持续更新 #链接第三方动态库,在和部分android源码的编译中验证不过 LOC ...
- Linux实战教学笔记18:linux三剑客之awk精讲
Linux三剑客之awk精讲(基础与进阶) 标签(空格分隔): Linux实战教学笔记-陈思齐 快捷跳转目录: * 第1章:awk基础入门 * 1.1:awk简介 * 1.2:学完awk你可以掌握: ...
- 每天一个Linux命令（18）--locate命令
locate让使用者可以很快速的搜寻档案系统内是否有指定的档案.器方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就需查询这个数据库,而不必实际深入档案系统之中了.在一般的 ditr ...
- echarts动态添加数据（饼图为例）
$.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...
- 免费企业ERP系统OA+ERP
AIO5基于B/S架构而研发,集成了OA(办公自动化).SCM(供应链管理).FM(财务管理)三大主力单元.支持手机APP. 协助中小型企业全面管理采购.销售业务, 规范仓库进出,处理与合作伙伴的往来 ...
- JavaScript设计模式之构造器、模块和原型
JavaScript面向对象 JavaScript是一种无类语言,但可以使用函数来模拟,这就涉及到设计模式.模式是一种已经验证过的可复用的解决方案,可用于解决软件设计中遇到的常见的问题,通常将这些解决 ...
- 《Shell脚本学习指南》学习笔记之自定义函数
Shell的函数在使用之前必须先定义,定义格式: [ function ] funname [()] { action; [return int;] } 可以带function fun()定义,也可以 ...
- （十） Jquery的基本使用
一.引入 注意:如果在index.js中有使用到JQuery.js 那么JQuery.js文件必须比index.js文件先引入,否则index.js文件中不能使用JQuery.js. <scri ...