vue的模板語法指令如何使用
本篇內(nèi)容介紹了“vue的模板語法指令如何使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！
在尼開遠等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供做網(wǎng)站、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作按需求定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),高端網(wǎng)站設(shè)計,全網(wǎng)營銷推廣,外貿(mào)網(wǎng)站建設(shè),尼開遠網(wǎng)站建設(shè)費用合理。
指令的概念
指令（Directives）是 vue 為開發(fā)者提供的模板語法，用于輔助開發(fā)者渲染頁面的基本結(jié)構(gòu)。
vue 中的指令按照不同的用途可以分為如下 6 大類：
內(nèi)容渲染指令 v-text {{ }} v-html
屬性綁定指令 v-bind =>
:事件綁定指令 v-on =>
@雙向綁定指令 v-model
條件渲染指令 v-if v-show
列表渲染指令 v-for
內(nèi)容渲染指令
內(nèi)容渲染指令用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有如下 3 個：
v-text
{
{ }}
v-html
區(qū)別：
v-text 指令會覆蓋元素內(nèi)默認值
vue 提供的 {{ }} 語法，專門用來解決 v-text 會覆蓋默認文本內(nèi)容的問題。這種 {{ }} 語法的專業(yè)名稱是插值表達式。不會覆蓋元素中默認的文本內(nèi)容。
v-text 指令和插值表達式只能渲染純文本內(nèi)容，可以把包含 HTML 標簽的字符串渲染為頁面的 HTML 元素
屬性綁定指令 v-bind
如果需要為元素的屬性動態(tài)綁定屬性值，則需要用到 v-bind 屬性綁定指令
由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，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.導(dǎo)入vue 的庫文件，在window 全局就有了vue這個構(gòu)造函數(shù) -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 3.vue 能控制下面這個div 幫我們把數(shù)據(jù)填充到div內(nèi)部 -->
<div id="app">
<input type="text" v-bind:placeholder="tips">
<hr>
<img v-bind:src="photo" alt="" style="width: 150px;">
<hr>
<div>tips翻轉(zhuǎn)的結(jié)果是：{{ tips.split('').reverse().join('')}}</div>
</div>
<!-- 2.創(chuàng)建vue實例對象 -->
<script>
// 創(chuàng)建vue的實例對象
const vw = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data: {
tips: "請輸入內(nèi)容",
photo: "https://cdn.segmentfault.com/r-ce71be5c/static/logo-b.d865fc97.svg"
}
})
</script>
</body>
</html>在 vue 提供的模板渲染語法中，除了支持綁定簡單的數(shù)據(jù)值之外，還支持 Javascript 表達式的運算，例如
.jpg)
事件綁定指令 v-on
vue 提供了 v-on 事件綁定指令，用來輔助程序員為 DOM 元素綁定事件監(jiān)聽。語法格式如下：
.jpg)
注意：原生 DOM 對象有 onclick、oninput、onkeyup 等原生事件，替換為 vue 的事件綁定形式后，
分別為：v-on:click、v-on:input、v-on:keyup
通過 v-on 綁定的事件處理函數(shù)，需要在 methods 節(jié)點中進行聲明
.jpg)
由于 v-on 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 @ ）。
.jpg)
代碼案例：
<!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 幫我們把數(shù)據(jù)填充到div內(nèi)部 -->
<div id="app">
<h4>count的值為{{count}}</h4>
<!-- 可以給函數(shù)加(形參) -->
<!-- <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.導(dǎo)入vue 的庫文件，在window 全局就有了vue這個構(gòu)造函數(shù) -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 2.創(chuàng)建vue實例對象 -->
<script>
// 創(chuàng)建vue的實例對象
const vm = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
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>事件修飾符
在事件處理函數(shù)中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對事件的觸發(fā)進行控制。常用的 5 個事件修飾符如下：
.jpg)
語法格式如下：
代碼案例：
<!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 幫我們把數(shù)據(jù)填充到div內(nèi)部 -->
<!-- <div id="app">{{ username }}</div> -->
<div id="app">
<a href="http://ww.baidu.com" @click="show">跳轉(zhuǎn)到百度頁面</a>
</div>
<!-- 1.導(dǎo)入vue 的庫文件，在window 全局就有了vue這個構(gòu)造函數(shù) -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 2.創(chuàng)建vue實例對象 -->
<script>
// 創(chuàng)建vue的實例對象
const vw = new Vue({
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data: {
},
methods:{
show(e){
// 在控制臺輸出，阻止瀏覽器跳轉(zhuǎn)
e.preventDefault()
console.log('點擊了a連接');
}
}
})
</script>
</body>
</html>雙向綁定指令 v-model
vue 提供了 v-model 雙向數(shù)據(jù)綁定指令，用來輔助開發(fā)者在不操作 DOM的前提下，快速獲取表單的數(shù)據(jù)。
<!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 自動將用戶輸入的值轉(zhuǎn)為數(shù)值類型 -->
<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 指令的修飾符
為了方便對用戶輸入的內(nèi)容進行處理，vue 為 v-model 指令提供了 3 個修飾符，分別是：
.jpg)
條件渲染指令
條件渲染指令用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是：
v-if
v-show
v-if 和 v-show 的區(qū)別
實現(xiàn)原理不同：
v-if 指令會動態(tài)地創(chuàng)建或移除 DOM 元素，從而控制元素在頁面上的顯示與隱藏；
v-show 指令會動態(tài)為元素添加或移除 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 列表渲染指令，用來輔助開發(fā)者基于一個數(shù)組來循環(huán)渲染一個列表結(jié)構(gòu)。
v-for 指令需要使用 item in items 形式的特殊語法，其中:
items是待循環(huán)的數(shù)組item是被循環(huán)的每一項
“vue的模板語法指令如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
當前題目：vue的模板語法指令如何使用
分享URL：http://www.yijiale78.com/article48/gjhshp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站維護、全網(wǎng)營銷推廣、電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計公司
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 導(dǎo)致網(wǎng)站收錄異常的因素有哪些 2014-11-29
- 掌握這“ 5 ”個SEO優(yōu)化技巧，新站收錄不再難! 2015-09-29
- SEO：網(wǎng)站優(yōu)化如何加快收錄、提高收錄量？ 2014-04-27
- 長沙做網(wǎng)站結(jié)構(gòu)對網(wǎng)站收錄的影響 2022-09-23
- 影響搜索引擎收錄的因素有什么 2016-11-14
- 網(wǎng)站頁面不收錄的典型原因是什么 2016-09-13
- 被收錄的內(nèi)容被納入底層庫如何解決？ 2014-10-23
- 收錄的文章在次修改要注意什么? 2014-04-24
- 網(wǎng)站頁面收錄后又被刪除了？ 2013-08-13
- SEO優(yōu)化加快網(wǎng)站收錄的秘訣方法 2023-04-14
- 如何讓搜索引擎收錄自己的網(wǎng)站？ 2014-04-12
- 網(wǎng)站優(yōu)化不被收錄有哪些原因? 2013-12-05