溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue的模板語法指令如何使用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
指令（Directives）是 vue 為開發者提供的模板語法，用于輔助開發者渲染頁面的基本結構。
vue 中的指令按照不同的用途可以分為如下 6 大類：
內容渲染指令 v-text {{ }} v-html
屬性綁定指令 v-bind => :
事件綁定指令 v-on => @
雙向綁定指令 v-model
條件渲染指令 v-if v-show
列表渲染指令 v-for
內容渲染指令用來輔助開發者渲染 DOM 元素的文本內容。常用的內容渲染指令有如下 3 個：
v-text
{
{ }}
v-html
區別：
v-text 指令會覆蓋元素內默認值
vue 提供的 {{ }} 語法，專門用來解決 v-text 會覆蓋默認文本內容的問題。這種 {{ }} 語法的專業名稱是插值表達式。不會覆蓋元素中默認的文本內容。
v-text 指令和插值表達式只能渲染純文本內容，可以把包含 HTML 標簽的字符串渲染為頁面的 HTML 元素
v-bind如果需要為元素的屬性動態綁定屬性值，則需要用到 v-bind 屬性綁定指令
由于 v-bind 指令在開發中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 : ）
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind 屬性綁定指令</title>
<!-- 1.導入vue 的庫文件，在window 全局就有了vue這個構造函數 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 3.vue 能控制下面這個div 幫我們把數據填充到div內部 -->
<div id="app">
<input type="text" v-bind:placeholder="tips">
<hr>
<img v-bind:src="photo" alt="" style="width: 150px;">
<hr>
<div>tips翻轉的結果是：{{ tips.split('').reverse().join('')}}</div>
</div>
<!-- 2.創建vue實例對象 -->
<script>
// 創建vue的實例對象
const vw = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數據
data: {
tips: "請輸入內容",
photo: "https://cdn.segmentfault.com/r-ce71be5c/static/logo-b.d865fc97.svg"
}
})
</script>
</body>
</html>在 vue 提供的模板渲染語法中，除了支持綁定簡單的數據值之外，還支持 Javascript 表達式的運算，例如
v-onvue 提供了 v-on 事件綁定指令，用來輔助程序員為 DOM 元素綁定事件監聽。語法格式如下：
注意：原生 DOM 對象有 onclick、oninput、onkeyup 等原生事件，替換為 vue 的事件綁定形式后，
分別為：v-on:click、v-on:input、v-on:keyup
通過 v-on 綁定的事件處理函數，需要在 methods 節點中進行聲明
由于 v-on 指令在開發中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 @ ）。
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on 事件綁定指令</title>
</head>
<body>
<!-- 3.希望vue 能控制下面這個div 幫我們把數據填充到div內部 -->
<div id="app">
<h4>count的值為{{count}}</h4>
<!-- 可以給函數加(形參) -->
<!-- <button v-on:click="add(2)">+1</button>
<button v-on:click="sub">-1</button> -->
<!-- v-on 簡寫@ -->
<button @click="add(2)">+1</button>
<button @click="sub">-1</button>
</div>
<!-- 1.導入vue 的庫文件，在window 全局就有了vue這個構造函數 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 2.創建vue實例對象 -->
<script>
// 創建vue的實例對象
const vm = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數據
data: {
count: 0
},
methods:{
// add: function(){
// console.log("OK");
// }, 簡寫
add(n){
// 控制臺打印詳細信息出來
console.log(vm);
// this.count += 1;
this.count += n;
},
sub(){
this.count -= 1;
}
}
})
</script>
</body>
</html>在事件處理函數中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對事件的觸發進行控制。常用的 5 個事件修飾符如下：
語法格式如下：
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修飾符</title>
</head>
<body>
<!-- 3.希望vue 能控制下面這個div 幫我們把數據填充到div內部 -->
<!-- <div id="app">{{ username }}</div> -->
<div id="app">
<a href="http://ww.baidu.com" @click="show">跳轉到百度頁面</a>
</div>
<!-- 1.導入vue 的庫文件，在window 全局就有了vue這個構造函數 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 2.創建vue實例對象 -->
<script>
// 創建vue的實例對象
const vw = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數據
data: {
},
methods:{
show(e){
// 在控制臺輸出，阻止瀏覽器跳轉
e.preventDefault()
console.log('點擊了a連接');
}
}
})
</script>
</body>
</html>vue 提供了 v-model 雙向數據綁定指令，用來輔助開發者在不操作 DOM 的前提下，快速獲取表單的數據。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙向綁定指令 v-model</title>
</head>
<body>
<div id="app">
<!-- 1. v-model.number 自動將用戶輸入的值轉為數值類型 -->
<input type="text" v-model.number="num1"> +
<input type="text" v-model.number="num2"> =
<span>{{ num1 + num2}}</span>
<hr>
<!-- 2.trim 自動過濾用戶輸入收尾空白字符 -->
<input type="text" v-model.trim="name">
<button @click="show">獲取用戶名</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
const vw = new Vue({
el: '#app',
data: {
name: "小脆筒",
num1: 1,
num2: 2,
},
methods:{
show(){
console.log(`用戶名是："$this.name"`);
}
}
})
</script>
</body>
</html>v-model 指令的修飾符
為了方便對用戶輸入的內容進行處理，vue 為 v-model 指令提供了 3 個修飾符，分別是：
條件渲染指令用來輔助開發者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是：
v-if
v-show
v-if 和 v-show 的區別
實現原理不同：
v-if 指令會動態地創建或移除 DOM 元素，從而控制元素在頁面上的顯示與隱藏；
v-show 指令會動態為元素添加或移除 style=“display: none;” 樣式，從而控制元素的顯示與隱藏
性能消耗不同：
v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此：
如果需要非常頻繁地切換，則使用 v-show 較好
如果在運行時條件很少改變，則使用 v-if 較好
代碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>條件渲染指令</title>
</head>
<body>
<div id="app">
<p v-if="flag">v-if 控制</p>
<p v-show="flag">v-show控制</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
const vw = new Vue({
el: '#app',
data:{
// 如果為true,都顯示；否則控制臺只顯示v-show代碼被隱藏，v-if直接被移除了
flag: true
}
})
</script>
</body>
</html>vue 提供了 v-for 列表渲染指令，用來輔助開發者基于一個數組來循環渲染一個列表結構。
v-for 指令需要使用 item in items 形式的特殊語法，其中:
items 是待循環的數組
item 是被循環的每一項
“vue的模板語法指令如何使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
