文章目錄
vue基礎-指令大全
一. v-text 更新textContent
v-text主要用來更新textContent,可以等同於JS的text屬性.
<span v-text='msg'></span>
//等價於
<span>{{msg}}</span>
二.v-html 解析HTML標籤
- {{}}mustache模板語句只能將綁定的數據源以文本字符串的格式進行處理,因此如果需要將數據源按照HTML5結構處理,此時可以使用v-html.
- v-html=“data” : 該指令可以將綁定的數據源data中的HTML標籤按照HTML5的網頁結構進行解析
//HTML
<div id="app" v-html="msg"></div>
//js
<script>
let vm = new Vue({
el: '#app',
data: {
msg: "<p>我是p標籤</p>"
}
})
</script>
三.v-pre 跳過編譯過程
-
不需要表達式
-
v-pre主要用來跳過這個元素和它的子元素編譯過程。可以用來顯示原始的Mustache標籤。跳過大量沒有指令的節點加快編譯。
`{{ this will not be compiled }}`
四.v-cloak 關聯實例結束編譯
- 不需要表達式
- 這個指令保持在元素上直到關聯實例結束編譯. 和css規則如[v-cloak]{ display: none }一起使用時,這個指令可以隱藏未編譯的Mustache標籤直到實例準備完畢.
//css
[v-cloak] {
display: none;
}
//html
<div id="app">
<h3 v-cloak>{{introduce}}</h3>
</div>
//js
<script>
let timer = setTimeout(function(){
let vm = new Vue({
el: "#app",
data:{
introduce: '我叫張三',
}
})
},5000)
</script>
五.v-once 渲染一次
- 不需要表達式
- v-once關聯的實例，只會渲染一次。之後的重新渲染，實例極其所有的子節點將被視爲靜態內容跳過，這可以用於優化更新性能。
<span v-once>This will never change:{{msg}}</span> //單個元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //組件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
例子中,msg,list即使產生改變, 也不會重新渲染.
六.v-if v-else-if v-else判斷語句
-
v-if v-else-if v-else:是一個分支結構,可以根據當前指令對應添加的返回結果,決定數據的加載方式,如果返回結果爲真,則加載該條件對應的標籤結構,否則該結構不加載
-
可以鏈式的使用多次. 可以更加方便地實現switch語句
-
優點:可以根據條件靈活決定加載某一部分代碼, 有效降低代碼的冗餘度
-
缺點:如果對應的條件判斷頻繁發生變化, 此時會增加瀏覽器的系統開銷, 影響網頁的DOM渲染
-
該結構適用於條件變化頻率不是很快的場景
//HTML <div id='app'> <div v-if="type==='A'"> A </div> <div v-else-if="type==='B'"> B </div> <div v-else-if="type==='C'"> C </div> <div v-else> Not A,B,C </div> </div> //js let vm = new Vue({ el: '#app', data: { type:A, } })
七.v-show條件展示元素
-
v-show:也是根據條件展示元素. 和v-if不同的是, 如果v-if的值是false, 則這個元素被銷燬, 不再dom中. 但是v-show的元素會始終被渲染並保存在dom中, 它只是簡單的切換css的dispaly屬性.
-
注意: v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
因此，如果要非常頻繁的切換，則使用v-show較好；如果在運行時條件不太可能改變，則v-if較好<p v-show="state == c">c</p>
八.v-for根據遍歷數組來進行渲染
-
v-for 循環結構, 後面跟的循環表達式
-
v-for =" item in items"items用來存儲每一次從itable變量中提取的一個數據源.item爲別名. -
基於源數據多次渲染元素或模板塊. 此指令之值, 必須使用特定語法
alias in expression, 爲當前遍歷的元素提供別名.<div v-for="item in items"> {{ item.text }} </div> -
另外也可以爲數組索引指定別名(或者用於對象的鍵)
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div> -
注意: v-for在構建過程中一般需要通過綁定一個特殊的key來區分不同的模塊, 原因是vue在進行dom渲染的過程中爲了提高頁面的渲染速度, 默認使用就近複製的元素, 此時新增加的元素可能出現和上面元素數據相同的情況, 爲了避免使用就近複製, 每一次都能重新創建, 此時需要給每一個創建的dom結構綁定一個唯一的key
<div id="app"> <div class="contact" v-for="item in contacts" :key="item.id"> <h3>姓名:{{item.name}}</h3> <form action=""> <input type="radio" value="1" :checked="item.sex == '1' "> <span>1</span> <input type="radio" value="2" :checked="item.sex == '2' "> <span>2</span> </form> <div class="age">{{item.age}}</div> </div> </div>
let vm = new Vue({
el: '#app',
data: {
contacts:[
{id: 1, name: '張三', sex: '1', age: 30},
{id: 2, name: '李四', sex: '1', age: 30},
{id: 3, name: '王二', sex: '1', age: 30},
]
}
})
九.v-bind 動態的綁定一個或者多個特性
- v-bind用來動態的綁定一個或者多個特性. 沒有參數時, 可以綁定到一個包含鍵值對的對象.常用於動態綁定class和style,以及href等.
- 帶參指令語法: 指令:參數=數值
- 簡寫爲一個冒號":"
<div id="app">
<h3 :class = "className">{{msg}}</h3>
</div>
let vm = new Vue({
el: '#app',
data: {
className:'active',
msg:'hello world',
}
})
-
示例
<!-- 綁定一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 內聯字符串拼接 --> <img :src="'/path/to/images/' + fileName"> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 綁定 --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定一個有屬性的對象 --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通過 prop 修飾符綁定 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 綁定。“prop”必須在 my-component 中聲明。--> <my-component :prop="someThing"></my-component> <!-- 通過 $props 將父組件的 props 一起傳給子組件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg> -
.camel修飾符允許在使用 DOM 模板時將v-bind屬性名稱駝峯化，例如 SVG 的viewBox屬性：<svg :view-box.camel="viewBox"></svg>在使用字符串模板或通過
vue-loader/vueify編譯時，無需使用.camel。
十.v-model 雙向數據綁定
-
v-model:用來實現form表單控件和model層數據源之間的雙向數據綁定, 即view層數據的改變會影響Model層數據源, 同時model層數據源的變換也會影響view層數據的展示.
<div id="app"> <input type="text" name="introduce" v-model:value="introduce"> {{introduce}} </div>let vm = new Vue({ el: "#app", data:{ introduce: '我叫張三', } }) -
v-model修飾符
-
.lazy 默認情況下, v-mode同步輸入框的值和數據. 可以通過這個修飾符, 轉變在change事件在同步.
<input v-model.lazy="msg"> -
.number 自動將用戶的輸入值轉化爲數值類型
<input v-model.number="msg"> -
.trim 自動過濾用戶輸入的首尾空格
<input v-model.trim="msg">
十一.v-on 監聽dom事件
-
v-on主要用來監聽dom事件, 以便執行一些代碼塊. 表達式可以是一個方法名.
-
簡寫爲: @
//html <div id="app"> <button @click="consoleLog"></button> </div> //js <script> var app = new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(1) } } }) </script> -
事件修飾符
-
.stop阻止事件繼續傳播 -
.prevent事件不再重載頁面 -
.capture使用事件捕獲模式,即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -
.self只當在 event.target 是當前元素自身時觸發處理函數 -
.once事件將只會觸發一次 -
.passive告訴瀏覽器你不想阻止事件的默認行爲
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滾動事件的默認行爲 (即滾動行爲) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用v-on:click.prevent.self會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。