Vue基礎系列（四）——Vue中的指令（上）

時間 2020-05-22

標籤 vue 基礎系列指令简体版

原文原文鏈接

寫在前面的話：javascript

文章是我的學習過程當中的總結，爲方便之後回頭在學習。css

文章中會參考官方文檔和其餘的一些文章，示例均爲親自編寫和實踐，如有寫的不對的地方歡迎你們和我一塊兒交流。html

VUE基礎系列目錄

《VUE基礎系列（一）——VUE入坑第一篇》vue

《VUE基礎系列（二）——VUE中的methods屬性》java

《VUE基礎系列（三）——VUE模板中的數據綁定語法》npm

《VUE基礎系列（四）——VUE中的指令（上）》數組

《VUE基礎系列（五）——VUE中的指令（中）》ide

一.前言

vue中的指令是指以「v-」開頭的一個語法，它主要是將vue中data數據和數據的變化做用到DOM元素中。學習

二.指令的基本語法

<tag v-指令ID="單個的javascript表達式"> </tag

三.v-html

　　v-html指令在《VUE基礎系列（三）——VUE模板中的數據綁定語法》中有使用過，可是是以模板數據綁定的使用總結的，而實際上v-html被稱爲vue中的指令，它的做用咱們以前也總結過：v-html會將數據中的html片斷解析成DOM節點插入到元素子節點中。測試

　　在這裏咱們寫一個跟之前不同的示例，學習一下v-html的另一個特性：v-html指令會以innerHTML的方式更新元素的內容。

#示例

<!DOCTYPE html> <html> <head> <title>vue中的指令(上)</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .content{ font-size: 16px; } </style> </head> <body> <div id='box'> <div class="content" v-html='msg'> <h1>這是一段測試文本</h1> </div> </div> <script type="text/javascript"> var vm = new Vue({ el: '#box', data: { msg: '<h1>我也是一段測試文本,我可能會覆蓋div.content中的節點內容</h1>', } }); </script> </body> </html>

#結果

#總結

v-html會將數據中的html片斷解析成DOM節點插入到元素子節點中。
v-html指令會以innerHTML的方式更新元素的內容（即若是v-html指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）。

四.v-text

　　v-text指令會將數據數據解析成文本在更新到元素中，而且是以innerText的方式更新的。

#示例

 1 <!DOCTYPE html>  2 <html>  3 <head>  4 <title>vue中的指令(上)</title>  5 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  6 <style type="text/css">  7  .content{  8  font-size: 16px;  9 } 10 11 </style> 12 </head> 13 <body> 14 <div id='box'> 15 <div class="content" v-text='msg'> 16 <h1>這是一段測試文本</h1> 17 </div> 18 </div> 19 <script type="text/javascript"> 20 var vm = new Vue({ 21  el: '#box', 22  data: { 23  msg: '<h1>我也是一段測試文本,我可能會覆蓋div.content中的節點內容</h1>', 24  } 25  }); 26 </script> 27 </body> 28 </html>

#結果

#總結

v-text會將數據中的html片斷以文本的形式插入到元素子節點中（不解析html片斷，將html片斷以字符串的形式原封不動的顯示在模板中）。
v-text指令會以innerText的方式更新元素的內容（即若是v-text指令所在的DOM元素存在子節點，那子節點就會被指令綁定的數據所覆蓋）

五.v-bind

v-bind這個指令咱們在《VUE基礎系列（三）——VUE模板中的數據綁定語法》中也有過總結：v-bind能夠將數據綁定到元素的屬性上，在這裏咱們不在演示這個特性。

在瀏覽vue官方文檔時，能夠看到v-bind指令對元素的class屬性和style屬性有一些加強的特性（官網連接傳送門 biubiubiu ！！！）。

1.v-bind綁定元素的class屬性

　　v-bind:class可指定javascript表達式有兩種數據類型：對象類型和數組類型。下面咱們寫一個示例，分別看一下這兩個數據類型的用法和效果。

#對象類型

<!DOCTYPE html>
<html>
<head>
  <title>vue中的指令(上)</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css"> .red{ color: red;
    } .green{ color: green;
    }
  </style>
</head>
<body>
  <div id='box'>
    <!-- 給v-bind:class指定對象類型的javascript表達式-->
    <h1 v-bind:class='{red: redActive}'>這是一段測試文本</h1>
    <h1 v-bind:class='{green: greenActive}'>這也是一段測試文本</h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({ el: '#box', data: { redActive: false, greenActive :true } }); </script>
</body>
</html>

　　從上面的代碼示例中能夠看出，當v-bind綁定的對象的鍵值爲true時，鍵會做爲字符串添加到元素的類名中，相應的css規則就會生效。

　　同時對象類型的javascript表達式支持多個鍵值對。

<!DOCTYPE html>
<html>
<head>
  <title>vue中的指令(上)</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css"> .red{ color: red;
    } .green{ color: green;
    } .small{ font-size: 20px;
    }
  </style>
</head>
<body>
  <!-- v-bind:class -->
  <div id='box'>
    <h1 v-bind:class='{red: redActive }'>這是一段測試文本</h1>
    <!-- 對象類型的javascript表達式支持多個鍵值對，只要知足值爲true，對應的鍵都會以字符串的形式添加到class類名中 -->
    <h1 v-bind:class='{green: blackActive, small: smallActive}'>這也是一段測試文本</h1>
  </div>
  <script type="text/javascript">
    var vm = new Vue({ el: '#box', data: { redActive: false, blackActive :true, smallActive :true, } }); </script>
</body>
</html>

　　能夠看到，多個鍵值對時，只有對應鍵的值爲true，元素就會存在多個類名。

#數組類型

　　接下來咱們寫一個數組類型的javascript表達式

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css"> .red{ color: red;
        } .small{ font-size: 20px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <h1 v-bind:class='[redActive,smallActive]'>這是一段測試文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { redActive: 'red', smallActive :'small', } }); </script>
</body>
</html>

　　能夠看到數組表達式的語法和對象表達式的語法是徹底不同的，是直接將數組的值做爲元素的類名。

2.v-bind綁定元素的style屬性

　　v-bind綁定數據到style屬性，一樣能夠指定數組類型和對象類型的javascript表達式。

#對象類型

爲style綁定的對象類型的基本語法以下：

<tag v-bind:style="{ css屬性：vue中的數據或者css屬性值 }"> </tag>

或者

<tag v-bind:style="vue中的某個對象類型數據"> </tag>

css的屬性值能夠直接是css的屬性值，也能夠是vue中的data數據，或者直接使用vue中的某個對象數據。

注意：這裏須要注意的是當css屬性是相似於font-size這樣中間帶橫線的屬性，有兩種方式書寫，一種是駝峯命名方式fontSize，一種是使用單引號括起來'font-size'。

咱們先寫一個例子

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css"> .red{ color: red;
        } .small{ font-size: 20px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <!-- css的屬性值能夠直接是css的屬性值，也能夠是vue中的data數據 -->
        <h1 v-bind:style="{color: 'red',fontSize: fontSize}">這是一段測試文本</h1>

        <!-- 直接使用vue中某個對象類型的數據 -->
        <h1 v-bind:style="styleObj">這是一段測試文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { fontSize: '20px',
　　　　　　　　　 // styleObj 對象類型的數據 styleObj: { color: 'green', fontSize: '30px' } } }); </script>
</body>
</html>

　　這個結果也是顯而易見，咱們也就很少說了。

#數組類型

　　數組類型的javascript表達式能夠是單個或者多個的vue對象數據。

<!DOCTYPE html>
<html>
<head>
    <title>vue中的指令(上)</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style type="text/css"> .red{ color: red;
        } .small{ font-size: 20px;
        }
    </style>
</head>
<body>
    <div id='box'>
        <!-- v-bind:style綁定數組類型的javascript表達式，其中styleObject和borderStyle均爲對象類型的數據-->
        <h1 v-bind:style="[styleObj, borderStyle]">這是一段測試文本</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({ el: '#box', data: { fontSize: '20px', styleObj: { color: 'green', fontSize: '30px' }, borderStyle: { border: '1px solid' } } }); </script>
</body>
</html>