Vue常用的幾個指令

摘要： 越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統一歸納一下，做個demo演示。 指令 v-text v-html v-bind v-on v-model v-for 程式碼 學習技術最好還是要看下程式碼是什麼樣的。 ...

越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統一歸納一下，做個demo演示。

指令

• v-text
• v-html
• v-bind
• v-on
• v-model
• v-for

程式碼

學習技術最好還是要看下程式碼是什麼樣的。

v-text

解釋：更新DOM物件的 textContent

<h1 v-text="msg"></h1>

v-html

解釋：更新DOM物件的 innerHTML

<h1 v-html="msg"></h1>

v-bind

作用：當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM

語法：

v-bind:title="msg"
// 簡寫：:title="msg"

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on

作用：繫結事件

語法：v-on:click="say" or v-on:click="say('引數', $event)"

簡寫：@click="say"

說明：繫結的事件定義在methods

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

v-model

作用：在表單元素上建立雙向資料繫結

說明：監聽使用者的輸入事件以更新資料

案例：計算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-for

作用：基於源資料多次渲染元素或模板塊

<div v-for="item in items">
{{ item.text }}
</div>

<!-- item 為當前項，index 為索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>

<!-- item 為值，key 為鍵，index 為索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>

完整案例

<template>

<div>
<p v-text="msgData"></p>
<p>{{ msgData }}</p>

<p v-text="msgHtml"></p>
<p v-html="msgHtml"></p>

<input v-model="msgModel" type="text"/>
<p>v-model資料：<span v-text="msgModel"></span></p>

<button v-on:click="alert">按鈕</button>

<p v-for="(item, index) in list" :key="index">{{item}} -- {{index}}</p>
</div>
</template>

<script>
export default {
data () {
return {
message: 'Vue的生命週期',
msgData: '訊息資料',
msgHtml: '<span style="color: red">訊息HTML</span>',
msgModel: '',
list: [
'apple', 'banana', 'fruit'
]
}
},
methods: {
alert () {
this.$notify({
title: '請求異常',
message: '通知'
})
}
},
mounted: function () {
console.log('------mounted 掛載結束狀態------')
},
}
</script>

Note:程式碼是在腳手架的專案中寫的。

效果如下：

結束

介紹幾個基本的指令用法，更多指令參考官方文件

參考

• ofollow,noindex">Vue官方參考