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 ...
随机推荐
- 用keychain这个特点来保存设备唯一标识。
由于IOS系统存储的数据都是在sandBox里面,一旦删除App,sandBox也不复存在.好在有一个例外,那就是keychain(钥匙串). 通常情况下,IOS系统用NSUserDefaults存储 ...
- 微信公众号开发总结(Node.js + express + winston)
关于订阅号.服务号.企业号 官方定位 订阅号:主要偏于为用户传达资讯(类似报纸杂志),认证后每天可以群发一条消息,可达到宣传效果,构建与读者之间更好的沟通和管理模式. 服务号:主要偏于服务交互(类似银 ...
- iOS runtime的应用实例
一直想弄明白runtime是怎么回事,因为面试的时候这是一道必备问题,但是平时用的机会真的少之又少,我一度以为runtime只是用来装13的利器,没什么卵用.但是随着学习的增多,发现runtime ...
- storm 1.0版本滑动窗口的实现及原理
滑动窗口在监控和统计应用的场景比较广泛,比如每隔一段时间(10s)统计最近30s的请求量或者异常次数,根据请求或者异常次数采取相应措施.在storm1.0版本之前,没有提供关于滑动窗口的实现,需要开发 ...
- 什么是Git?
其实我在写这篇随笔的时候连Git是什么都不知道,只是听说过,也注册了一个GitHub的账号,但并不会玩. 我也是查看了半天的网页才明白一个大概,但我觉得以后肯定会经常用到它. 简单的来说, Git 是 ...
- 最简单的 RabbitMQ 监控方法 - 每天5分钟玩转 OpenStack（158）
这是 OpenStack 实施经验分享系列的第 8 篇. 先来看张图:这是 Nova 的架构图,我们可以看到有两个组件处于架构的中心位置:数据库和Queue.数据库保存状态信息,而几乎所有的 nova ...
- Laravel 开发笔记
Laravel 4.2 鉴权使用加盐密码 刚开始接触laravel,发现laravel默认的鉴权模块密码并未加盐处理(密码由password_hash方法创建).所以自己琢磨着对密码加盐.像下面这样 ...
- smarty模板基础2
Smarty自带了一些内置函数,这些内置函数是Smarty模板引擎的组成部分.他们被编译成相应的内嵌PHP代码,以获得最大性能. 您创建的自定义函数不能与内置函数同名,也不必修改这些内置函数. 其中一 ...
- SQL Server-聚焦深入理解死锁以及避免死锁建议（三十三）
前言 终于进入死锁系列,前面也提到过我一直对隔离级别和死锁以及如何避免死锁等问题模棱两可,所以才鼓起了重新学习SQL Server系列的勇气,本节我们来讲讲SQL Server中的死锁,看到许多文章都 ...
- 代写编程的作业、笔试题、课程设计，包括但不限于C/C++/Python
代写编程作业/笔试题/课程设计,包括但不限于C/C++/Python 先写代码再给钱,不要任何定金!价钱公道,具体见图,诚信第一! (截止2016-11-22已接12单,顺利完成!后文有成功交付的聊天 ...