（.NET進階五十）Vue技能進階

vue技能進階

一、v-bind及class與style的綁定

---

在vue中，DOM元素經常會動態地綁定一些class類名或style樣式，其實現方式是通過v-bind指令來綁定class與style。

1. v-bind指令的理解

---

v-bind指令的主要用法是動態地去更新HTML上的屬性，當數據發生變變化的時候，通過v-bind指令綁定的HTML元素的屬性就會發生相應的更改。
在數據綁定中，最常見的綁定：

• 元素的樣式名稱class
• 內聯樣式style

在vue中，只需要使用v-bind指令計算出表達式的最終字符串就可以實現，當表達式的邏輯複雜的時候，使用字符串拼接的方式難以維護，vue就對class和style的綁定進行了加強。

2.綁定class

---

class的綁定方式包括多種：

• 對象語法
  給v-bind:class設置一個對象,就可以動態地切換class

<button :class="{'layui-btn':isLayuiBtn,'layui-btn-lg':isLargeBtn}">
 	這是一個按鈕 
</button> 

var app = new Vue({ 
		el: '#app', 
		data: { 
			isLayuiBtn: false, 
			isLargeBtn: false, 
			} 
		})

• 數組語法
  當需要應用多個class的時候，可以使用數組語法，給 :class 綁定一個數組，就可以應用一個class列表

<button class="layui-btn" :class="[isDangerBtn?dangerClass:'',layuiSmallClass]">
	 這是一個Layui按鈕 
</button> 

var app = new Vue({ 
		el: '#app', 
		data: { 
			dangerClass:'layui-btn-danger',
			layuiSmallClass:'layui-btn-sm', 
			isDangerBtn: true, 
			} 
		})

二、vue中內置指令的使用

---

指令是帶有特殊前綴 v- 的HTML特性，可以綁定一個表達式，並將一些特性綁定在DOM上

1.v-if v-else-if v-else

---

vue的條件指令可以根據表達式的值在DOM中渲染或者銷燬元素

<div id="app"> 
	<p v-if="status==1">當status爲1時顯示這裏</p> 
	<p v-else-if="status==2">當status爲2時顯示這裏</p> 
	<p v-else>否則顯示這裏</p> 
</div>

var app = new Vue({ 
		el: '#app', 
		data:{
			status:1 
			} 
		})

注意：
v-else-if 要緊跟 v-if , v-else 要緊跟 v-else-if 或 v-if 。表達式的值爲真的時候，元素/組件及所有的子節點都會被渲染，爲假的時候就移除

當需要一次判斷多個元素的時候，可以在vue內置的 template元素上使用條件指令，最終的渲染結果將不會包括該元素

<div id="app"> 
	<template v-if="status==1"> 
		<p>這是一段文本</p> 
		<p>這是一段文本</p> 
		<p>這是一段文本</p> 
	</template> 
</div>

var app = new Vue({ 
		el: '#app', 
		data:{
		status:1 
		} 
	})

vue在渲染元素的時候，爲了提升效率。儘可能的去複用已有的元素，而不是重新渲染。

<div id="app"> 
	<template v-if="type === 'name'"> 
		<label>用戶名：</label> 
		<input placeholder="請輸入用戶名"> 
	</template> 
	<template v-else> 
		<label>郵箱：</label> 
		<input placeholder="請輸入郵箱"> 
	</template> 
		<button @click="changInputStatus">切換登錄方式</button> 
</div>

var app = new Vue({ 
		el: '#app', 
		data: { 
		type: 'name' 
		},
		methods: { 
			changInputStatus: function () { 
				this.type = this.type === 'name' ? 'phoneNumber' : 'name' 
				} 
			} 
		})

在上述示例中，鍵入內容後，點擊切換按鈕，雖然DOM變了，但是之前在輸入框鍵入的內容並沒有發生改變，只
是替換了placeholder中的內容，這說明 元素被複用了。
爲了讓每個元素都重新渲染，可以使用key來要求進行重新渲染，key的值必須唯一

<template v-if="type==='name'"> 
	<label>用戶名：</label> 
	<input type="text" placeholder="請輸入用戶名" key="name-input"> 
</template> 
	<template v-else> 
		<label>郵箱：</label>. 
		<input type="text" placeholder="請輸入郵箱" key="phone-input"> 
	</template> 
	<button @click="changeLoginType">切換登錄方式</button>

• v-show
  v-show 的用法與 v-if 的用法基本一致，與 v-if 不同的是， v-show 只是改變元素的CSS屬性display。當v-show 表達式值爲false時，元素會被隱藏，查看DOM結構就會看到元素上加載了內聯樣式

<button class="layui-btn" v-show="isShow">這是一個按鈕</button> 

var app = new Vue({ 
		el: '#app', 
		data:{
		isShow:true 
		} 
	})

2.v-for

---

當需要將一個數組遍歷時,可以使用列表渲染指令v-for,這個指令需要結合in來進行使用,類似於item in的形式

<div id="app">
    <ul>
        <li v-for="book in bookList">
           書名:{{book.name}}
            價格:{{book.price}}元
        </li>
    </ul>
</div>

var app=new Vue({
    el:'#app',
    data:{
        bookList:[
            {name:'C#從入門到放棄',price:'50'},
            {name:'Java從看懂到看開',price:'40'},
            {name:'MySql從刪庫到跑路',price:'70'},
            {name:'C#從入門到放棄',price:'50'}

        ]
    }
})

在遍歷對象屬性的時候,有兩個可選參數,分別是鍵名和索引

<ul>
    <li v-for="(value,key,index) in user">
        {{index}}-{{key}}:{{value}}
    </li>
</ul>

var app=new Vue({
    el:'#app',
    data:{
        user:{
            name:'蒼老師',
            gender:'女',
            age:27
        }
    }
})

注意:
當vue使用v-for時正在更新已經渲染過的元素列表時,就會使用"就地複用"
如果數據項的順序發生了改變,vue不會移動DOM元素來匹配數據的順序,而是簡單的複用元素.爲了解決這個問題,需要爲每個循環的項添加一個key進行識別

3.vue中的方法與事件

---

在vue 中,使用v-on指令綁定DOM的事件,可以在觸發的時候執行對應的js

<div id="app">
    點擊的次數:{{counter}}
    <button @click="handleClick()">+1</button>
    <button @click="handleClick(10)">+10</button>
</div>

var app=new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        handleClick:function (count) {
            count=count||1;
            this.counter+=count;
        }
    }
})

注意:
@click調用方法名後面可以不跟(),如果該方法有參數,默認把原生事件對象event傳遞過去,在大部分的應用場景中,如果方法不需要傳遞參數的話,一般不加括號

<div id="app">
    點擊的次數:{{counter}}
    <button @click="handleClick()">+1</button>
    <button @click="handleClick(10)">+10</button>
    <a href="heep://www.baidu.com" @click="handleLinkClick('禁止跳轉',$event)">
        跳轉?
    </a>
</div>

var app=new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        handleClick:function (count) {
            count=count||1;
            this.counter+=count;
        },
        handleLinkClick:function(message,$event){
            event.preventDefault();
            window.alert(message);
        }
    }
})

三.vue中的表單與v-model

---

在web開發中,表單類控件承載了一個網頁數據的錄入與交互,在vue中,將使用v-model來完成表單的數據雙向綁定。

1.基礎用法

• 輸入框的綁定

<div id="app">
    <input type="text" v-model="message" placeholder="請輸入...">
    <p>輸入內容是:{{message}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        message:''
    }
})

注意:
使用v-model指令後,表單控件顯示的值只依賴與所綁定的數據,不在關心初始化時的vue屬性

• 單選框

<div id="app">
    <input type="radio" value="html" v-model="picked" id="html">
    <label for="html">HTML</label>

    <input type="radio" value="js" v-model="picked" id="js">
    <label for="js">JS</label>

    <input type="radio" value="css" v-model="picked" id="css">
    <label for="css">CSS</label>
    <p>選擇的項目爲:{{picked}}</p>

</div>

var app=new Vue({
    el:'#app',
    data:{
        picked:'js'
    }
})

• 多選框

<div id="app">
    <input type="checkbox" value="html" v-model="checked" id="html">
    <label for="html">HTML</label>

    <input type="checkbox" value="js" v-model="checked" id="js">
    <label for="js">JS</label>

    <input type="checkbox" value="css" v-model="checked" id="css">
    <label for="css">CSS</label>
    <p>選擇的項目是:{{checked}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        checked:[]
    }
})

• 下拉選

<div id="app">
    <select v-model="selected" id="">
        <option v-for="(option,index) in options"
                :value="option.value"
                :key="index">
            {{option.text}}
        </option>
    </select>
    <p>選中的值:{{selected}}</p>
</div>

var app=new Vue({
    el:'#app',
    data:{
        selected:'01',
        options:[
            {text:'HTML',value:'01'},
            {text:'JS',value:'02'},
            {text:'CSS',value:'03'}
        ]
    }
})