您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue指令及其過濾器怎么使用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“vue指令及其過濾器怎么使用”吧!
內(nèi)容渲染指令是用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有3種。
示例
<div id="app">
<!-- 把 username 對應(yīng)的值,渲染到第一個 p 標(biāo)簽中 -->
<p v-text="username"></p>
<!-- 把 gender 對應(yīng)的值,渲染到第二個 p 標(biāo)簽中 -->
<!-- 注意:第二個 p 標(biāo)簽中,默認(rèn)文本會被gender值覆蓋 -->
<p v-text="gender">性別</p>
</div>
<!-- 導(dǎo)入 vue 的庫文件 -->
<script src="./lib/vue.js v2.7.13.js"></script>
//創(chuàng)建vue 的實例對象
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data: {
username: 'zs',
gender: '男'
}
});
{{}}
雙大括號在實際開發(fā)中應(yīng)用較多,不會覆蓋原有渲染
示例
<div id="app">
<p>姓名:{{username}}</p>
</div>
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data: {
username: 'zs',
gender: '男',
}
});
可以把帶標(biāo)簽的的字符串,渲染成真正的html 內(nèi)容
示例
<div id="app">
<div v-html="info"></div>
</div>
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data: {
info: '<h5 style="color: red; font-weight: bold;"> 歡迎學(xué)習(xí) vuejs</h5>'
}
});
注意:插值表達式只能用在元素內(nèi)容節(jié)點中,不能用在元素的屬性節(jié)點
在屬性前加屬性指令 v-bind:
為元素動態(tài)綁定值,vue 規(guī)定 v-bind
可以簡寫成:
,示例
<input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;">
在 vue 提供的模板渲染語法中,除了支持綁定簡單的數(shù)據(jù)值之外,還支持 javascript 表達式的運算,例如
{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};
<div v-bind:id="'list-' + id"></div>
注意在簡寫 v-bind 屬性綁定期間,如果綁定內(nèi)容需要進行動態(tài)拼接,則字符串外應(yīng)包裹單引號,例如
<div :title="'box' + index">!!!!!</div>
v-on 綁定事件指令,輔助程序員為DOM元素綁定監(jiān)聽事件,格式如下
<p>count的值是: {{count}}</p>
<!-- 語法格式為 v-on:事件名稱="事件處理函數(shù)的名稱" -->
<button v-on:click="addCount">+1</button>
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data:{
count: 0,
},
// 定義事件的處理函數(shù)
methods:{
add: function () {
// console.log(vm);
// vm.count += 1;
// this === vm
this.count += 1;
}
// 也可簡寫成
add () {
// console.log(vm);
this.count += 1;
}
}
});
v-on:
也可以簡寫為 @
<button @click="sub">-1</button>
注意:原生 DOM 對象有 onclick、oninput、onkeydown 等原生事件,替換成 vue 的事件綁定形式后,分別為: v-on:click 、v-on:input、v-on:keydown
vue 提供了內(nèi)置固定的變量 $event
,它就是原生 DOM 的事件對象 e
<!-- 如果 count 為偶數(shù),則按鈕背景變?yōu)樗{色,否則,取消背景 -->
<!-- vue 提供了內(nèi)置固定的變量 $event ,它就是原生 DOM 的事件對象 e-->
<button @click="add(1, $event)">+n</button>
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data:{
count: 0,
},
// 定義事件的處理函數(shù)
methods:{
add (n, e) {
this.count += 1;
// 判斷 this.count 的值是否為偶數(shù)
if (this.count%2 === 0) {
//偶數(shù)
e.target.style.backgroundColor = 'blue';
console.log(e);
} else {
// 奇數(shù)
e.target.style.backgroundColor = '';
}
}
}
});
在事件處理函數(shù)中調(diào)用 event.preventDefault()
或 event.stopPROpagation()
是非常常見的需求。因此, vue 提供了事件修飾的概念,輔助程序員更方便的**對事件的觸發(fā)進行控制。常用5種修飾符如下:
事件修飾符 | 說明 |
---|---|
.prevent | 阻止默認(rèn)行為(例如:阻止 a 鏈接跳轉(zhuǎn)、阻止表單提交等) |
.stop | 阻止事件冒泡 |
.capture | 以捕獲模式觸發(fā)當(dāng)前的事件處理函數(shù) |
.once | 綁定事件只觸發(fā)一次 |
.self | 只有在 event.target 是當(dāng)前元素自身時觸發(fā)事件處理函數(shù) |
示例1:
<a href="http://www.baidu.com" @click.prevent="show">跳轉(zhuǎn)到百度首頁</a>
const vm = new Vue({
//el 屬性是固定寫法,表示當(dāng)前 vm 實例要控制的區(qū)域,接收的是一個選擇器
el: '#app',
// data 對象就是要渲染到頁面上的數(shù)據(jù)
data:{},
// 定義事件的處理函數(shù)
methods:{
show () {
// e.preventDefault();
console.log("點擊了 a 鏈接");
}
}
});
到此,相信大家對“vue指令及其過濾器怎么使用”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。