本篇文章給大家詳細介紹Vue的常用指令。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
插入文字：
v-text
#相當於元素的innerText屬性，必須是雙標籤
#插入HTML：
相當於元素的innerHTML屬性
循環遍歷
v-for的使用，除了item屬性，還有一些其他輔助屬性
/* 在html中使用v-for指令进行渲染 */
/*
普通数组
*/
data:{
list:[1,2,3,4,5,6]
}
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
/*
对象数组
*/
data:{
list:[1,2,3,4,5,6],
listObj:[
{id:1, name:'zs1'},
{id:2, name:'zs2'},
{id:3, name:'zs3'},
{id:4, name:'zs4'},
{id:5, name:'zs5'},
{id:6, name:'zs6'},
]
}
<p v-for="(user,i) in listObj">--id--{{user.id}} --姓名--{{user.name}}</p>
/*
对象
*/
data:{
user:{
id:1,
name:'托尼.贾',
gender:'男'
}
}
<p v-for="(val,key) in user">--键是--{{key}}--值是--{{val}}</p>
/*
数字
<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
*/
<p v-for="count in 10">这是第{{count}}次循环</p>條件渲染
v-if：是否插入元素
v-show是否隱藏元素，根據CSS進行元素的渲染
屬性綁定
#v-bind：屬性名稱=「常數|| 變數名稱」
簡單寫形式：屬性名稱=「常數|| 變數名稱」
<p v-bind:属性名="变量"></p> //可以简写成 <p :属性名="变量"></p> //如果要赋值常量，需要给常量用单引号包起来，如 <p :属性名=" '常量' "></p>
雙向綁定:v-model
所謂的雙向綁定，就是你在視圖層裡面改變了值，vue裡面對應的值也會改變。只能給予具備value屬性的元素進行雙向資料綁定。
綁定事件:v-on
v-on:click = “方法名稱|| 直接改變vue 內部變數”，
簡寫形式：@click = “方法名稱|| 直接改變vue 內部變數」
<p v-on:click=" num = 1 "></p> //可以简写成 <p @click=" num = 1 "></p>
跳過元素節點
v-pre：跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 Mustache 標籤。跳過大量沒有指令的節點會加快編譯。
只渲染一次
v-once：只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
推薦學習：vue.js教學
#以上是一招搞定Vue常用指令的詳細內容。更多資訊請關注PHP中文網其他相關文章！
