Vue基本使用二-指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性

常用指令

v-text

// 用來設置當前元素的文本內容。相當於 innerText 的功能
<h1 v-text="msg">默認的文本內容</h1>

v-html

<h1 v-html="msg">默認的文本內容</h1>

v-bind

• 作用:用來給當前元素添加HTML屬性，進行HTML屬性數據的動態綁定
• v-bind:title 用來給當前元素綁定 title 屬性，冒號後面表示要綁定的屬性名稱
• :zhidingyi 可以綁定自定義屬性

<!-- 完整語法 -->
 <h1 v-bind:title="msg" v-bind:zhidingyi="xm">默認的文本內容</h1>
 // <!-- 縮寫 -->
 <h1 :title="msg" :zhidingyi="xm">默認的文本內容</h1>
 <!-- 引號內是表達式或屬性 -->
<a :href="http://www.baidu.com">百度</a>

樣式處理 class和style

class:

<!-- 1 -->
<!-- 對象的鍵表示類的名稱，值爲true表示添加類，false不添加-->
<div v-bind:class="{ active: true }"></div> 等價於
<div class="active"></div>

<!-- 2 -->
<div :class="['active']"></div> 等價於
<div class="active"></div>

<!-- 3 -->
<!-- 數組中元素不帶引號，表示屬性，屬性的值表示類名 -->
<div v-bind:class="[{ active: true }, shuxingClass]"></div> ===>
<div class="active text-danger"></div>

style：

<!-- 1 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 baseStyles是data的屬性，其值類型是對象（baseStyles：{fontSize: '30px'}）-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-on

• 作用：綁定事件
• 語法：v-on:click=”say” or v-on:click=”say(‘參數’, $event)”
• 簡寫：@click=”say”

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<!-- name:屬性，帶引號就是字符串；$event:用於獲取當前元素節點 -->
<div @click="fn(name,$event)"></div>

vue配置項methods提供方法或事件
methods: {
    doSomething：function（）{},
    fn:function (na, e) {
        e.currentTarget.innerHTML='hello'
        this.msg = na
    }
    }

事件修飾符

• .stop 阻止冒泡，調用 event.stopPropagation()
• .prevent 阻止默認行爲，調用 event.preventDefault()
• .capture 添加事件偵聽器時使用事件捕獲模式
• .self 只當事件在該元素本身（比如不是子元素）觸發時，纔會觸發事件
• .once 事件只觸發一次

<-- @click.事件修飾符 -->
<button @click.stop="fn1">按鈕</button>

v-model

<!-- 實現數據的雙向綁定。監聽用戶的輸入事件以更新數據-->
<!-- 選擇後觸發cacl事件， opt的值發生改變 -->
<select @change="calc" v-model="opt">
    <option value="1">北京</option>
    <option value="2">天津</option>
</select>

v-for

<!-- item 爲值，key 爲鍵，index 爲索引 -->
<!-- 通過 key 屬性來讓Vue保證列表中每一項的唯一性，提高渲染的性能 -->
<!-- 說明：使用 key，vue會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。-->
<div v-for="(item, key, index) in obj" :key="index">{{item}}</div>
<div v-for="item in obj">{{item}}</div>

v-if 和 v-show

• v-if：根據表達式的值的真假條件，銷燬或重建元素
• v-show：根據表達式值的真假，切換元素CSS 的 display 樣式屬性

<h1 v-show="isShow">
<h1 v-if="isShow">

v-pre和v-once

• v-pre：跳過這個元素和它的後代元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
• v-once：只渲染元素和組件一次。隨後的重新渲染，元素/組件及其所有的子節點將被視爲靜態內容並跳過。用於優化更新性能。

<span v-pre>{{ this will not be compiled }}</span>
<span v-once>This will never change: {{msg}}</span>