vuejs教程：学习自定义指令

2018-9-29

指令是指示VueJS以某种方式执行某些操作。在前面的学习中，我们已经看到了诸如：v-if，v-show，v-else，v-for，v-bind，v-model，v-on等指令。

在本章中，将学习自定义指令。创建类似于我们在学习组件中使用的全局指令。

语法

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

需要使用Vue.directive创建一个指令。它采用如上所示的指令名称。下面来看一个例子演示指令的工作细节。创建一个文件：directives.html -

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs自定义指令</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-changestyle>VueJS 指令</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               e1.style.color = "red";
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script></span%3

THE END

vuejs教程：学习有条件的渲染和列表渲染

<<上一篇

vuejs教程：可用的过渡和动画功能

下一篇>>