感觉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自定义指令的使用方法的更多相关文章

  1. vue2.0自定义指令

    前面一片文章说了vue2.0过滤器,其实自定义指令跟过滤器非常相似,单就定义方式而言,其与过滤器完全一致,分为局部指令,和全局指令.不过就是filter改为directive的区别. 过滤器一般用于对 ...

  2. Vue2.0 - 自定义指令 vue-directive

    Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用 ...

  3. vue2.0 自定义指令

    Vue指令 Vue的指令以v-开头,作用在HTML元素上,将指令绑定在元素上,给绑定的元素添加一些特殊行为. 例如: <h1 v-if="yes">Yes</h1 ...

  4. vue2.0 自定义指令详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. CKEditor5 + vue2.0 自定义图片上传、highlight、字体等用法

    因业务需求,要在 vue2.0 的项目里使用富文本编辑器,经过调研多个编辑器,CKEditor5 支持 vue,遂采用.因 CKEditor5 文档比较少,此处记录下引用和一些基本用法. CKEdit ...

  6. Vue中自定义指令的使用方法!

    除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM ...

  7. vue3.0自定义指令(drectives)

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能 ...

  8. vue2.0父子组件通信的方法

    vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...

  9. vue2.0 自定义 弹窗(MessageBox)组件

    组件模板 src/components/MessageBox/index.vue <!-- 自定义 MessageBox 组件 --> <template> <div c ...

随机推荐

  1. Swift 2.0 自定义cell和不同风格的cell

    昨天我们写了使用系统的cell怎样创建tableView,今天我们再细分一下,就是不同风格的cell,我们怎写代码.先自己创建一个cell,继承于UItableviewcell 我们看看 cell 里 ...

  2. 封装keyframes插件

    模仿jquery,使用简单,自动添加浏览器前缀 var keyframes = new SHBKerframes(); keyframes.define([{ name:'myAnimate', 0% ...

  3. webForm系列 前端框架快速引用

    Html的确定就是不能重用,MVC可以在_Layout.cshtml中将每个页面都需要的js和css文件(如jq,bootstrap等)都引用进去,webform就麻烦一点. webForm需要给所以 ...

  4. PKUSC2015总结

    突然发现这是自己第100篇博客...写下总结庆祝一下好啦 首先就是..D类狗果真没人权啊啊啊.考的辛辛苦苦结果因为D类拿不到一个好协议真的是哭瞎辣QAQ 然后就是..自己真的是太弱啊啊啊..各种傻逼题 ...

  5. BZOJ 1009 :[HNOI2008]GT考试(KPM算法+dp+矩阵快速幂)

    这道到是不用看题解,不过太经典了,早就被剧透一脸了 这道题很像ac自动机上的dp(其实就是) 然后注意到n很大,节点很小,于是就可以用矩阵快速幂优化了 时间复杂度为o(m^3 *log n); 蒟蒻k ...

  6. Brackets 前端编辑器试用

    Brackets编辑器介绍 "一个现代的,开源的,了解网页设计的编辑器"这是官方的宣传语.也就是说它适用于网页开发,包含了许多亮点功能:实时预览(Live Preview).内联编 ...

  7. 2017-2-28 C#基础 数组

    1.什么是数组? 数组就是具有相同数据类型变量的集合. 2.数组的作用:操作大量数据. 3.数组的定义要求:(1)数组里面的内容必须是同一类型.(2)数组必须有长度限制. 4.数组分为一维数组,二维数 ...

  8. HTML复习

  9. javascript的字符串判断方法

    Javascript中判断符号主要有:==.!=.===.!== ==.!=这两个符号在判断之前会先对变量类型进行转换,如果类型相同会再比较值; ===.!==这是直接判断两个变量的类型,如果类型不一 ...

  10. 大数据系列之Flume+HDFS

    本文将介绍Flume(Spooling Directory Source) + HDFS,关于Flume 中几种Source详见文章 http://www.cnblogs.com/cnmenglang ...