0二、Vue.js---指令

時間  2019-11-18
標籤 vue.js vue 指令 欄目 JavaScript 简体版
原文   原文鏈接

一、插值

    在Vue.js指令學習以前，先簡單學習一下Vue插值javascript

    語法：{{ }}，將vue 實例中的數據 寫入到頁面對應的位置。下面代碼中hello、msg、num等均是在vue的data中定義的變量。css

1.1 文本插值

<div>{{hello}}<div>

1.2 HTML 標籤插值

    Vue.js中沒有直接的語法能夠完成HTML標籤插值，須要Vue指令 v-html方法實現。html

<div v-html="msg" ></div>

1.3 簡單的JS腳本

    在頁面中加載數據時，能夠實現簡單的運算和判斷前端

<div>{{ num%2 }}</div>
<div>{{ num>2 }}</div>
<div>{{ num==1? msg:hello }}</div>

二、指令

    Vue的指令以 v- 開頭，以元素的屬性方式存在的。官網給出了十三條指令，具體見下文。vue

    指令參數，參數以 ‘:’ 爲關鍵字，寫在指令的後面，並接受一個具備實際意義的參數值，如：v-on:click =""java

    指令修飾符：判斷事件的觸發條件，以 ‘.’ 爲關鍵字寫在指令和參數的後面，並接受一個具備實際意義參數或者鍵盤碼。數組

2.01 v-text

    v-text 做用和 {{ }} 相同，在指定的位置寫入變量參數，純文本。下面兩行代碼效果相同。其中，hello是變量。瀏覽器

<div>{{hello}}</div>
<div v-text="hello"></div>

2.02 v-html

    v-html 用於在指定標籤中寫入html 值（可以解析標籤）app

<div v-html="hello"></div>

2.03 v-on

    用於對指定元素進行事件綁定函數

    只可綁定 Vue 實例中的方法

    方法中 沒法直接訪問 vue 實例中的屬性

    能夠簡寫爲 ‘@’

2.04 v-bind

    屬性綁定

    表單標籤 和 全部的html 的元素標籤進行屬性綁定，不侷限於HTML 的原始屬性

    只完成數據到頁面的操做（單向操做）

    能夠簡寫爲  ‘:’ 

2.05 v-model

    數據雙向處理

    只能在 表單標籤 ，侷限於 表單標籤的填值屬性 (value)

    會完成數據到頁面 和 頁面到數據的操做 （雙向數據綁定）

    在第一篇博客中《Vue.js 開篇－－－Vue的介紹及準備工做》的事例中，之因此在文本框改動數據，頁面會同步更新，就是由於使用了 v-model 來綁定 input 文本框的值。

2.06 v-pre

    html 中<pre>以用戶格式進行輸出

    v-pre 以用戶格式進行輸出

2.07 v-cloak

    用於解決頁面的閃爍問題，解決 數據綁定前頁面代碼的 顯示

2.08 v-once

    對元素只作一次渲染

    後續所對應的數據發生變化時，不會在產生改變

2.09 v-if

    用於判斷該屬性所對應的元素是否正常顯示

    在渲染模板時 判斷 指定的元素是否須要渲染（建立元素）

    v-if能夠引導 v-else 和 v-else-if 的使用

2.10 v-show

    用於判斷該屬性所對應的元素是否正常顯示

    在元素掛載時 判斷指定的元素 是否要顯示 （display: none;）

2.11 v-else 和 v-else-if

    `v-else 和 v-else-if 的使用必須依賴於v-if 指令

2.12 v-for

    對元素進行循環，能夠 循環數組、循環對象和數值

3. 具體使用

    Vue 對頁面的元素處理採用虛擬DOM的格式進行實例化。

    vue 2.0.0後禁止在body及body外的其它元素中定義容器。這樣能夠保證頁面代碼的完整性。

    容器定義完成後，自己會和指定的容器產生關聯，在容器外所定義的代碼不能訪問容器實例中的data數據。

3.1 v-for

    v-for 能夠循環數組、對象和數字。注意：v-for 不一樣版本的變化

        vue 1.x v-for = 「(k,v) in arr」 默認輸出的是k，v-for = 「k in arr 」；

        vue 2.x v-for = 「(v,k) in arr」 默認輸出的是v，v-for = 「 v in arr 」。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-for</title>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function(){
      new Vue({
        el: "#app",
        data:{
          // 定義數組變量
          arr:["a","b","c","d"],
          // 定義對象變量
          obj:{
            id:01,
            name:"Tom",
            age:25,
            other:".........."
          },
          // 定義數組變量
          num:10
        }
      });
    };
  </script>
</head>
<body>
  <div id="app">
    <ul>
      <!-- v-for循環數組 -->
      <li v-for="(v,k) in arr">
        {{k}}：{{v}}
      </li>
      <!-- 循環對象 -->
      <li v-for="(v,k) in obj">
        {{k}}:{{v}}
      </li>
      <!-- 循環數字 -->
      <li v-for="(v,k) in num">
        {{k}}:{{v}}
      </li>
    </ul>
  </div>
</body>
</html>

3.2 v-cloak

    用於解決頁面的閃爍問題：解決數據綁定前頁面代碼的顯示。以下圖的{{info}}。

                    

    若是下段代碼在Chrome執行的時候沒出現上圖所示的效果，建議在火狐瀏覽器上測試一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-cloak</title>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function(){
      alert("彈窗");//阻斷後續代碼執行
      new Vue({
        el:"#app",
        data:{
          info:"這是一條字符串"
        }
      });
    };
  </script>
</head>
<body>
  <div id="app">
    <p>{{info}}</p>
  </div>
</body>
</html>

    在上段代碼添加兩處操做：

<p v-cloak >{{msg}}</p>
<style>
    [v-cloak]{
        display: none;
    }
</style>

    結果以下圖所示：

                

 

3.2 v-on

    用於對指定元素進行事件綁定，能夠簡寫 ‘@’。

    v-on:事件名＝「方法名()」，能夠簡寫成  @事件名＝「方法名()」。

    方法定義在 methods 中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-on</title>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function (){
      new Vue({
        el:"#app",
        data:{
          msg:"默認值"
        },
        methods:{
          show(){
            alert("你點擊了按鈕");

            // 還能夠經過this的方式訪問定義在data中的數據
            this.msg="這是在方法中經過this的方式訪問定義在data中的數據，並從新賦值"
          }
        }
      });
    };
  </script>
</head>
<body>
  <div id="app">
    <input type="button" value="按鈕" v-on:click="show()">
    <!-- 此處也能夠將 v-on: 簡寫成 @ -->
    <!-- <input type="button" value="按鈕" @click="show()"> -->
    <hr/>
    {{msg}}
  </div>
</body>
</html>

               

3.2.1 事件冒泡和默認事件

    談到事件時，就得說一說 事件冒泡和默認事件的處理。在 Vue.js 中事件冒泡使用 .stop 和 .self 處理，默認事件使用 .prevent 處理。具體能夠參考個人《Vue.js---事件冒泡和默認事件處理》。

3.2.2 事件對象 $event

    vue.js能夠識別的事件對象是 $event。@click=「方法名($event)」。在函數中能夠傳出參數打印看看該事件對象。

3.2.3 自定義修飾符

    ☛vue 1.0 鍵盤上全部的按鍵都有對應的別名 ==> a => .a ,ctrl => .ctrl ……

    ☛vue 2.0 刪除了絕大多數的鍵盤映射，只保留了部分 經常使用修飾符

    ☛提供了一個配置接口 ，能夠自定義 鍵盤映射

        ☞實測 2.0.0 版本 鍵盤映射被刪除

        ☞測 2.5.3 版本 鍵盤映射存在

    若須要使用自定義修飾符時(版本升級)，能夠參考下段代碼：

Vue.config.keyCodes = {
    a:65
}

    例 01：點擊鍵盤 a 鍵時觸發事件，並打印出事件源。主要代碼以下：

    js部分代碼

window.onload = function (){
  new Vue({
    el:"#app",
    methods:{
      showA(e){
        console.log("你按了a鍵");
        console.log(e);
      }
    }
  });
}

    html部分

<div id="app">
  <input type="text" @keyup.a="showA($event)">
</div>

    執行上述代碼後，在文本框中只有按鍵盤 a 鍵後（keyup），纔會觸發事件打印事件對象 e ，按其餘鍵均無效。事件對象e的具體內容以下：

    由於shifkey、ctrlKey、altKey等的取值是Boolean類型，true是表示按了該鍵，false表示未按該鍵。因此，要同時 按 ctrl 和 a 鍵時，只須要將上面代碼段的函數中加個判斷條件。以下所示。當且僅當同時按下ctrl 和 a 鍵時會console.log出結果。

showA(e){
  // console.log("你按了a鍵");
  // console.log(e);
  if(e.ctrlKey){
    console.log("你按了ctrl + a 鍵");
  }
}

3.3 v-bind

    用法：        v-bind: 屬性名 = "屬性值"，能夠簡寫爲     :屬性名="屬性值"

    3.3.1 v-bind綁定表單標籤的值

    使用 v-bind 綁定表單標籤的值使用方法是 v-bind:value ="值（能夠是data中定義的變量）"。此時，其與 使用 v-model 的主要區別是：v-mdel 是雙向綁定，當表單標籤的值發生改變時，該變量的值也隨之變化，當變量值發生變化時，表單的值也發生變化；而 使用 v-bind 綁定時，表單中的值發生變化不會影響變量中的值的變化。

    3.3.2 v-bind 綁定 HTML 標籤屬性

     v-bind 能夠對全部的html 的元素標籤進行屬性綁定，而且不侷限於HTML 的原始屬性。也可綁定自定義的html標籤的屬性。

    以v-bind綁定 class 爲例。v-bind綁定的屬性不影響原生屬性的綁定。其參數分爲字符串、變量、數組和對象四類，具體直接見代碼和註釋。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-bind 綁定class</title>
  <style>
    /* 寬高分別是 200px 100px 而且背景是 yellowgreen */
    .aa{
      width: 200px;
      height: 100px;
      background: yellowgreen;
    }

    /* 圓角 20px */
    .bb{
      border-radius: 20px;
    }

    /* 字體顏色紅色 */
    .colorRed{
      color: red;
    }
    /* 字體顏色藍色 */
    .colorBlue{
      color:blue;
    }
  </style>
  <script src="../js/vue.js"></script>
  <script>
    window.onload = function (){
      new Vue({
        el:"#app",
        data:{
          test01:"aa",
          test02:"bb",
          flag: true
        }
      });
    }
  </script>
</head>
<body>
  <div id="app">
    <!-- v-bind 不影響原生屬性的綁定 -->

    <!-- 參數是字符串 -->
    <div class="aa" :class="'bb'">v-bind參數是字符串，多加一對引號</div>
    <hr/>
    <!-- 參數是變量 -->
    <div :class="test01">v-bind參數是data中定義的變量</div>
    <hr/>
    <!-- 參數是數組 -->
    <div :class="[test01,test02]">v-bind參數是數組，其中數組的每一個元素又是data中定義的變量，顯示效果是 class="aa bb"</div>
    <hr/>
    <!-- 參數是對象 -->
    <div :class="{colorRed:flag , colorBlue: !flag ,aa:true}">v-bind參數是對象，索引是在css中定義的樣式，值是true(顯示)/false(不顯示)</div>
    <input type="button" value="變色" @click = "flag = !flag">
  </div>
</body>
</html>

    上段代碼的執行結果以下：

                                                

    須要注意的是，當使用 v-bind 綁定 style屬性使用使用對象傳參的特殊性。印象 html 標籤 style屬性的設置自己就是對象形式 style = "{fontSize:'20px' , color:'red'}"。因此，在使用v-bind的時

:style = "{ color: 變量名/字符串, fontSize: 變量名/字符串 }"

 

 

至此，完畢，感謝閱讀。

一入前端深似海，今後時間是路人。

                                                                                          －－論前端的技術更新

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程