在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ VueJS指令
VueJS渲染
VueJS事件
VueJS與其他框架比較
VueJS過渡和動畫
VueJS指令
VueJS模板
VueJS簡介
VueJS實(shí)例
VueJS混合
VueJS計(jì)算屬性
VueJS組件
VueJS入門程序
VueJS路由
VueJS環(huán)境設(shè)置
VueJS渲染函數(shù)
VueJS教程
VueJS watch屬性
VueJS Reactive接口
VueJS數(shù)據(jù)綁定
VueJS應(yīng)用示例

VueJS指令

指令是指示VueJS以某種方式執(zhí)行某些操作。在前面的學(xué)習(xí)中，我們已經(jīng)看到了諸如：v-if，v-show，v-else，v-for，v-bind，v-model，v-on等指令。

在本章中，將學(xué)習(xí)自定義指令。創(chuàng)建類似于我們在學(xué)習(xí)組件中使用的全局指令。

語法

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

需要使用Vue.directive創(chuàng)建一個(gè)指令。它采用如上所示的指令名稱。下面來看一個(gè)例子演示指令的工作細(xì)節(jié)。創(chuàng)建一個(gè)文件：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>
   </body>
</html>

在這個(gè)例子中，我們創(chuàng)建了一個(gè)自定義指令changestyle，如下面的一段代碼所示。

Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      e1.style.color = "red";
      e1.style.fontSize = "30px";
   }
});

將下面的changestyle指令分配給一個(gè)div。

<div id = "databinding">
    <div v-changestyle>VueJS 指令</div>
</div>

如果在瀏覽器中打開上面文件可以看到，它將以紅色顯示文本："VueJs指令"，并且字體大小為30px。

在上面代碼中，已經(jīng)使用了綁定方法，這是該指令的一部分。 它需要三個(gè)參數(shù)e1，自定義指令需要應(yīng)用的元素。 綁定就像傳遞給自定義指令的參數(shù)一樣：v-changestyle = ”{color:’green’}”，其中green將在綁定參數(shù)中讀取，而vnode是元素，即nodename。
以下是傳遞給自定義指令的值的示例。創(chuàng)建一個(gè)文件：directives-custom.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 = "{color:'green'}">VueJS Directive</div>
      </div>
      <script type = "text/javascript">
         Vue.directive("changestyle",{
            bind(e1,binding, vnode) {
               console.log(e1);
               console.log(binding.value.color);
               console.log(vnode);
               e1.style.color=binding.value.color;
               e1.style.fontSize = "30px";
            }
         });
         var vm = new Vue({
            el: '#databinding',
            data: {
            },
            methods : {
            },
         });
      </script>
   </body>
</html>

在瀏覽器中打開上面示例文件，效果如下 -

文本的顏色更改為綠色。該值使用下面的一段代碼傳遞。

<div v-changestyle = "{color:'green'}">VueJS Directive</div>
And it is accessed using the following piece of code.
Vue.directive("changestyle",{
   bind(e1,binding, vnode) {
      console.log(e1);
      console.log(binding.value.color);
      console.log(vnode);
      e1.style.color=binding.value.color;
      e1.style.fontSize = "30px";
   }
});

過濾器

VueJS支持文本格式的過濾器。它與v-bind和插值({{}})一起使用。但需要在JavaScript表達(dá)式的結(jié)尾處為過濾器使用管道符號。
創(chuàng)建一個(gè)文件：directives-filter.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs自定義指令</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input  v-model = "name" placeholder = "輸入名字..." /><br/>
         <span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name : ""
            },
            filters : {
               countletters : function(value) {
                  return value.length;
               }
            }
         });
      </script>
   </body>
</html>

在上面的例子中，我們創(chuàng)建了一個(gè)簡單的計(jì)數(shù)過濾器。計(jì)數(shù)過濾器計(jì)算在文本框中輸入的字符數(shù)。 要使用過濾器，需要使用filters屬性，可參考以下代碼定義所使用的過濾器。

filters : {
   countletters : function(value) {
      return value.length;
   }
}

定義方法countletters并返回輸入字符串的長度。要在顯示器中使用過濾器，使用了管道操作符和過濾器的名稱，即計(jì)數(shù)器。

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>

在瀏覽器中打開上面文件，可以看到以下效果 -

也可以使用下面的一段代碼將參數(shù)傳遞給過濾器。

<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>

現(xiàn)在，計(jì)數(shù)器將有三個(gè)參數(shù)，即消息a1和a2。也可以使用下面的一段代碼將多個(gè)過濾器傳遞給插值。

<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>

在filter屬性countlettersA和countlettersB是兩個(gè)方法，countlettersA將結(jié)果傳遞countlettersB。


上一篇：VueJS教程下一篇：VueJS應(yīng)用示例