技術標籤：Vuevue.jshtml5javascript

目錄

一、什麼是指令

二、 Vue 中常用的指令

1. v-text

2. v-html

3.v-if

4. v-show

5. v-bind

6. v-on

7. v-model

8. v-for

9. Vue的methods屬性

好久沒更新 vue，上次寫這個系列的文章是 1年前吧，而且才寫2篇，可能是平時更多的是關注課堂教學內容吧，感覺自己都要落伍了~。不能偷懶~堅持學習~！！

一、什麼是指令

指令，是Vue中最常用的一項功能，主要職責是當其表示式的值改變時，相應的將某些行為應用在 DOM 上。

• 指令帶有字首 v-。Vue 中所有指令都是 v-xxx 的形式。

• v-xxx 類似於 HTML 標籤中的屬性。

<div v-xxx>
</div>

通過指令，Vue 可以對DOM和資料進行更為方便的操作。

二、 Vue 中常用的指令

1. v-text

相當於標籤的 innerText，只能用於雙標籤中。不過，它不能識別內容中的HTML程式碼。

let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message +'，I am happy.' "></div>
        </div>
    `,
    data:function(){
        return {
            message:"你好"
        }
    }
});
 

指令值本質是js表示式。使用變數不需要插值運算子{{ }}，直接是 data 中的 變數名，或者其他表示式。

這裡的變數，必須在 data 中宣告。

嚴格來講，這裡的“變數”其實是 data 的 Object 屬性名。

2. v-html

相當於標籤的 innerHTML，只能用於雙標籤中。類似 v-text 指令，不過它可以識別內容中的 HTML 程式碼。

3.v-if

判斷是否插入這個元素。判斷結果為true，頁面會新增這個元素；false，頁面不會新增這個元素。

v-else-if

v-else

v-if ， v-else-if ，v-else 三個指令使用，必須是緊鄰的DOM。

<button type="button" v-if="num>10">這個是個測試 v-if </button>
<button type="button" v-else-if="num>5">這個是個測試 v-else-if </button>
<button type="button" v-else>這個是個測試 v-else </button>
 

4. v-show

標籤顯示與否。確定隱藏，會給標籤的style 新增 display:none;

注意 v-show , v-if 的差異：

• v-show 是通過 CSS 的 display屬性來顯示隱藏標籤；

• v-if 則是純粹的不插入該元素。

<div id="app">
</div>
<!-- 引入 vue 檔案 -->
<script src="../../scripts/vue.js"></script>
<!-- 啟動 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message + ',I am happy' "></div>
           <div v-text="htmlText"></div>
           <div v-html="htmlText"></div>
           <button type="button" v-if="num>10">這個是個測試 v-if </button>
           <button type="button" v-else-if="num>5">這個是個測試 v-else-if </button>
           <button type="button" v-else>這個是個測試 v-else </button>
           <h3 v-show="isIn">測試 v-show </h3>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            htmlText:"<h1>測試能實現H1標籤不呢？</h1>",
            isIn: false,
            num: 2
        }
    }
});
</script>

5. v-bind

給元素的屬性賦值。

• 原生屬性，比如 src，value 之類。

• 自定義屬性，比如 mydata，myvalue 等程式設計師自己寫的屬性。

<div mydata="{{message}}">message的值是沒法賦值給 div的屬性 mydata 的</div>

正確做法，利用 v-bind，v-bind:屬性名=“變數|表示式”

<div v-bind:mydata="message"> OK </div>

可以簡寫 :屬性名="變數|表示式"

<div :mydata="message"> OK </div>

<div id="app">

</div>
<!-- 引入 vue 檔案 -->
<script src="../../scripts/vue.js"></script>
<!-- 啟動 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
   template:`
        <div>
            <div mydata="{{message}}">看看有無自定義屬性的值？？？</div>
            <div v-bind:mydata="message" :mynum="num+2"> OK </div>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            num: 2
        }
    }
});
</script>

6. v-on

給標籤繫結原生的事件，以便更好的根據事件操作資料。

v-on:原生事件名=“表示式，給變數進行操作||函式名，呼叫函式”

簡寫形式，@原生事件名=“表示式，給變數進行操作||函式名，呼叫函式”

<div id="app"></div>
<!-- 引入 vue 檔案 -->
<script src="../../scripts/vue.js"></script>
<!-- 啟動 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
            <div>{{message+234}}</div>
            <h1 v-on:click="message='abc'">點選試試</h1>
            <h1 @click="message='xyz'">點選試試</h1>
        </div>
    `,
    data:function(){
        return {
            message:"test"
        }
    }
});
</script>

7. v-model

我們知道Vue的核心特性之一是雙向繫結，vue的響應式原理是實現了資料－>檢視，接下來我們要學習 檢視－>資料的原理。

v-model是一個指令，限制在<input>、<select>、<textarea>、components（必須是有value屬性的元素）中使用。

在給 < input /> 元素新增 v-model 屬性時，預設會把 value 作為元素的屬性，然後把 'input' 事件作為實時傳遞 value 的觸發事件。

 <input type="text" v-model="mes">  
//  此時mes值就與input的值進行雙向繫結

<div id="app"></div>
<!-- 引入 vue 檔案 -->
<script src="../../scripts/vue.js"></script>
<!-- 啟動 Vue -->
<script>
 let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <input type="text"  v-model="message">
            <div>{{message}}</div>
            <button type="button" v-if="message=='abc'"  
					@click="message='xyz'">這個是按鈕</button>
        </div>
    `,
        data:function(){
            return {
                message:"test"
            }
        }
    });
</script>

8. v-for

基本語法： v-for="item in Arr" ， 變數 item 表示的是 陣列元素 。

物件操作：v-for="item in Obj" ， 變數 item 表示物件的屬性值，或者 方法體。

v-for 中的各變數的順序：

• 陣列：v-for=" ( item，index ) in Arr"

• 物件：v-for=" ( value，key，index ) in Obj "

demo:根據年齡大小，更改背景色

<style>
 .a{ background: #ff0;}
 .b{ background: #ffad00;}
</style>

<div id="app"></div>
<!-- 引入 vue 檔案 -->
<script src="../../scripts/vue.js"></script>
<!-- 啟動 Vue -->
<script>
    let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <ul>
                <li v-for="item in students"   
 					v-bind:class="item.age>17?'a':'b'">
                    學生姓名：{{ item.name }} --
                    年齡：{{ item.age }}
                </li>
            </ul>
            <div>
                  陣列一共  {{ students.length }}個學生。
            </div>
        </div>
    `,
        data:function(){
            return {
                students:[
                    {name:"張三",age:18},
                    {name:"Lily",age:19},
                    {name:"Lucy",age:17}
                ]
            }
        }
    });
</script>

程式碼中，v-for，v-bind 的順序無所謂。

9. Vue的methods屬性

Vue 的methods 定義了 v-on 指令中可以呼叫的方法。如：

<button type="button"  v-on:click="myFun()">點擊出現特效</button>

methods:{
   myFun:function(){
        // 方法體
   }
}

methods中的 $event 引數

傳遞的 $event 引數其實就是 vue 封裝了的 event事件物件。

<button @click=”add(2,$event)”>add</button> 

let myv = new Vue({
        el:"#app",
        template:`
            <button type="button"  v-on:click="myFun($event,message)">
            		點擊出現特效
            </button>
        `,
        data:function(){
            return {
                message:"Hello,world"
            }
        },
        methods:{
            myFun:function(e,msg){
                console.info(this);  // this 是data return 的物件。
                console.info( this.message ); // this.xxx 就可以獲取、更改data的資料
                console.info(e.target);  // 事件物件, 當前標籤
                alert(msg);
            }
        }
});