溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
越來越多的人在用Vue，剛開始接觸vue的話常接觸的指令就幾個，統一歸納一下，做個demo演示。
指令
v-text
v-html
v-bind
v-on
v-model
v-for
代碼
學習技術最好還是要看下代碼是什么樣的。
v-text
解釋：更新DOM對象的 textContent
<h2 v-text="msg"></h2>
v-html
解釋：更新DOM對象的 innerHTML
<h2 v-html="msg"></h2>
v-bind
作用：當表達式的值改變時，將其產生的連帶影響，響應式地作用于 DOM
語法：
v-bind:title="msg" // 簡寫：:title="msg" <!-- 完整語法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a> <!-- 縮寫 --> <a :href="url" rel="external nofollow" rel="external nofollow" ></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 >消息HTML</span>',
msgModel: '',
list: [
'apple', 'banana', 'fruit'
]
}
},
methods: {
alert () {
this.$notify({
title: '請求異常',
message: '通知'
})
}
},
mounted: function () {
console.log('------mounted 掛載結束狀態------')
},
}
</script>
Note:代碼是在腳手架的項目中寫的。
效果如下：
結束
介紹幾個基本的指令用法，更多指令參考官方文檔
參考
Vue官方參考
總結
以上所述是小編給大家介紹的Vue常用的幾個指令附完整案例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
