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>
时间: 2024-10-11 22:55:57

vue2.0自定义指令的使用方法的相关文章

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

Vue.directive('指令',function(el,binding,vnode){ el.style='color:'+binding.value;}); el : 指令所绑定的元素,可以用来直接操作DOM.. binding: 一个对象,包含指令的很多信息. 自定义指令有五个生命周期: >1.bind :  只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作. >2.inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存

vue2.0 自定义指令详解

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <div v-lang="color

Vue2.0内部指令(中)|言Sir‘s blog

第四节: v-text & v-html 在html中输出data值时, 使用 { { message }} .但是这种情况是有弊端的,就是当我们网速很慢或者javascript出错时,会暴露我们的 { { message }} .Vue给我们提供的 v-text就是解决这个问题的. <p>{{ message }}</p>=<p v-text="message"></p> 如果在javascript中写有html标签,用v-te

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

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令.举个聚焦输入框的例子,如下:(咳咳,借官网的用一用) 1.定义全局的自定义变量 main.js Vue.directive('color',{ inserted(el){ // 各单位注意,这里的el获取的是标签元素,说白了就是可以直接操作DOM cons

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

vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传递.为了对父组件产生反向影响,子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定.props方法传值比较简单,缺点是属性会比较多. (1)父传子 [ props传值 ] <template>  <div> <input type="text" v-mode

vue2.0 v-model指令

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </head> <body> <div id="app"> <input type="text&

vue2.0版本指令v-if与v-show的区别

v-if: 判断是否加载,可以减轻服务器的压力,在需要时加载. v-show:调整css dispaly属性,可以使客户端操作更加流畅. v-if示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue2.2.js"></script> </he

vue2.0 自定义 图片上传( UpLoader )组件

1.自定义组件 UpLoader.vue <!-- 上传图片 组件 --> <template> <div class="vue-uploader"> <!-- 添加图片 及 显示效果 --> <div class="file-list"> <!-- 图片列表 files --> <section v-for="(file, index) of files" class

vue2.0 自定义 生成二维码(QRCode)组件

1.自定义 生成二维码组件 QRCode.vue <!-- 生成二维码 组件 --> <template> <canvas class="qrcode-canvas" :class="{show: show}" :style="{height: size + 'px', width: size + 'px'}" :height="size" :width="size" ref=