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