站長資訊網(wǎng)
本篇文章給大家?guī)砹岁P(guān)于前端vue的相關(guān)知識，聊聊什么是內(nèi)容渲染指令以及屬性綁定指令等等，感興趣的朋友，下面一起來看一下吧，希望對需要的朋友有所幫助！
vue 指令與過濾器
內(nèi)容渲染指令
內(nèi)容渲染指令是用來輔助開發(fā)者渲染 DOM 元素的文本內(nèi)容。常用的內(nèi)容渲染指令有3種。
v-text
示例
<div id="app"> <!-- 把 username 對應(yīng)的值，渲染到第一個 p 標(biāo)簽中 --> <p v-text="username"></p> <!-- 把 gender 對應(yīng)的值，渲染到第二個 p 標(biāo)簽中 --> <!-- 注意：第二個 p 標(biāo)簽中，默認文本會被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: '男', } });
v-html
可以把帶標(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: '<h4 style="color: red; font-weight: bold;"> 歡迎學(xué)習(xí) vuejs</h4>' } });
屬性綁定指令
注意：插值表達式只能用在元素內(nèi)容節(jié)點中，不能用在元素的屬性節(jié)點
動態(tài)綁定屬性值 v-bind
在屬性前加屬性指令 v-bind: 為元素動態(tài)綁定值，vue 規(guī)定 v-bind 可以簡寫成: ,示例
<input type="text" v-bind:placeholder="tips"> <img :src="photo" style="width: 150px;">
使用 javascript 表達式
在 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 綁定事件
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 |
阻止默認行為（例如：阻止 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 鏈接"); } } });
推薦學(xué)習(xí)：《vue.js視頻教程》
