1.什么是指令?
指令：生活中的指令通常指代帶有方向和指導(dǎo)性的命令
計(jì)算機(jī)中的指令：描述的是帶有數(shù)據(jù)功能性處理的一段可執(zhí)行命令的集合
-
Vue 中的指令：實(shí)現(xiàn)特定功能的一種用法，一般以
v-符號開頭，如v-text
2.具體指令
①. v-text / v-html / v-once
功能描述: 網(wǎng)頁視圖中渲染展示變量中的數(shù)據(jù)
-
v-text：指令當(dāng)成標(biāo)簽的屬性進(jìn)行使用，輸出數(shù)據(jù)的變量包含在屬性值中，等價(jià)于插值表達(dá)式 -
v-html：指令當(dāng)成標(biāo)簽屬性進(jìn)行使用，輸出的數(shù)據(jù)中包含的標(biāo)簽會被渲染，使用時(shí)注意XSS代碼注入 -
v-once：指令經(jīng)常和插值表達(dá)式在一起結(jié)合使用，用于只做一次數(shù)據(jù)渲染的操作
代碼操作:
<body>
<div id="app">
<p v-text="msg"></p> <!-- v-text指令：輸出變量數(shù)據(jù)，指令=屬性的方式-->
<p v-html="msg"></p> <!-- v-html指令：解釋標(biāo)簽渲染數(shù)據(jù)-->
<p v-once>輸出數(shù)據(jù)：{{msg}} </p> <!-- v-once指令：只會在加載的時(shí)候渲染一次 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: "<h1>MaKaBaKa009527</h1>"
}
})
</script>
</body>
②. v-show / v-if
功能描述: 用于根據(jù)條件判斷，是否渲染展示指定數(shù)據(jù)的指令
-
v-show：通過變量控制display:none|block完成數(shù)據(jù)的隱藏 / 顯示 -
v-if：通過變量控制是否渲染加載DOM結(jié)構(gòu)完成數(shù)據(jù)的隱藏 / 顯示
代碼操作:
<body>
<div id="app">
<p v-show="seen">MaKaBaKa009527</p>
<p v-if="seen">MaKaBaKa009528</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
</body>
注意: 如果一個數(shù)據(jù)在頁面上頻繁的在顯示/隱藏之間進(jìn)行切換，需要使用v-show指令，反之則使用v-if指令
③. v-if / v-for
功能描述: 程序流程控制結(jié)構(gòu)，選擇結(jié)構(gòu)、循環(huán)結(jié)構(gòu)
代碼操作:
<body>
<div id="app">
<h3>v-if指令：選擇結(jié)構(gòu)</h3>
<p v-if="userRole===0">游客</p>
<p v-else-if="userRole===1">會員</p>
<p v-else-if="userRole===2">管理員</p>
<p v-else>異常</p>
<hr>
<h3>用戶權(quán)限描述：</h3>
<ul>
<li v-for="up in userPermissions"> {{ up.intro }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
userRole: 1, // 0 游客；1會員；2管理員
userPermissions: [
{id:1, name:'read', intro: "查看文章"},
{id:2, name:'publish', intro: "發(fā)表文章"},
{id:3, name:'edit', intro: "編輯文章"},
{id:4, name:'delete', intro: "刪除文章"},
]
}
})
</script>
</body>
④. v-bind
功能描述: 該指令主要用于操作標(biāo)簽屬性對象
代碼操作:
<body>
<div id="app">
<h2>v-bind操作標(biāo)簽屬性</h2>
<!-- <img v-bind:src="image_src" alt=""> -->
<img :src="image_src" alt="">
<ul>
<!-- for循環(huán)指令，數(shù)據(jù)渲染時(shí)，必須通過key屬性將數(shù)據(jù)和視圖進(jìn)行一一綁定 -->
<!-- 否則會影響頁面視圖的更新(認(rèn)識即可)-->
<li v-for="img in images_list" :key="img.id">
<!-- <img :src="img.image_src" alt=""> -->
<p>{{img.image_src}}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
image_src: "images/lifecycle.png",
images_list: [
{id: 3, image_src: "3.jpg"},
{id: 2, image_src: "2.jpg"},
{id: 1, image_src: "1.jpg"},
]
}
})
</script>
</body>
⑤. v-on
功能描述: 該指令用于給指定標(biāo)簽綁定對應(yīng)的事件
代碼操作:
<body>
<div id="app">
<!-- <button v-on:click="changeImg">更換圖片</button>-->
<button @click="changeImg">更換圖片</button>
<img :src="image_src" alt="" style="width:100px;height:auto;">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
image_src : "images/lifecycle.png"
},
methods: { // Vue實(shí)例中定義函數(shù)
changeImg() {
// 更換圖片，不需要DOM操作，只需要更新變量數(shù)據(jù)即可
this.image_src = "images/image2.jpg"
}
}
})
</script>
</body>
