當前位置：首頁 >

VUE基本语法1-插值属性绑定

發布時間：2024/9/30 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 VUE基本语法1-插值属性绑定小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

.1 插值綁定

插值綁定是Vue中最常見、最基本的語法，綁定的內容主要有文本插值和HTML插值兩種

文本插值

文本插值的方式十分簡單，只要用雙大括號（Mustache語法）將要綁定的變量、值、表達式括住就可以實現，Vue將會獲取計算后的值，并以文本的形式將其展示出來。下面一段代碼演示了文本插值的基本用法：

“html代碼（表達式）”和“html代碼（變量）”的差異：雖然兩者綁定的內容是一樣的，但是對于前者來說，Vue優先解釋了DOM節點span，并隔離了“{{”和“}}”，所以插值語法并沒有生效，“{{”和“}}”還被當作了p節點的文本內容。可以看到，無論是變量、表達式、執行函數還是DOM代碼，**Vue都只將結果當作文本處理。**另外，如果插值綁定的內容是變量或與變量有關，當變量的值改變時，視圖也會同步更新。

HTML插值

HTML插值可以動態渲染DOM節點，常用于處理開發者無可預知和難以控制的DOM結構，如渲染用戶隨意書寫的文檔結構等，這在一些論壇和博客平臺上可以看到，下面來看一段相關代碼

<body> <style>.align-center {text-align: center;} </style> <div id="app" style="width: 800px;margin: 0 auto;"><div>{{ blog }}</div><hr><div v-html="blog"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',data () {return {blog: `<h2 class="align-center">一對"兄弟"</h2><div class="align-center"><img src="ra.png"></div><p>你看他們多像一對兄弟啊，雖然是一只呆呆兔和一只傻傻貓蹲在了一起，但誰又能說他們不是兄弟呢？</p >`}}})</script> </body>

文本插值中的代碼被解釋為節點的文本內容，而HTML插值中的代碼則被渲染為視圖節點。實際上，HTML插值是對文本插值的補充和拓展，Vue可以解析被綁定的內容為DOM節點，從而實現動態渲染視圖的效果。不過Vue本身就支持模板，開發者在使用HTML插值時應秉承以下原則：
●盡量多地使用Vue自身的模板機制，減少對HTML插值的使用；
●只對可信內容使用HTML插值；
●絕不相信用戶輸入的數據。

.2 屬性綁定

除了文本之外，DOM節點還有其他一些重要的屬性，那么Vue是如何綁定這些屬性的呢？

指令v-bind

DOM節點的屬性基本都可以用指令v-bind進行綁定，代碼如下：

類名和樣式綁定

由于類名class和樣式style在節點屬性中是兩個比較奇怪的存在（雖然他們可接收的類型都是字符串，但類名實際上是由數組拼接而成，而樣式則是由對象鍵值對拼接而成的），所以Vue在綁定類名和樣式時也采用不一樣的機制。 我們可以通過字符串、數組和對象三種方式為節點動態綁定類名屬性，代碼如下：

三種方式綁定類名的效果是一致的，但由于classObj2中的鍵值全部被判定為假，所以類名并未被綁定到對應節點上。
綁定樣式的方式與類名相似，不過樣式是以鍵值對的形式，所以不能像類名一樣使用數組進行綁定，示例代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> </head> <body> <div id="app"><p style="color: brown;font-size: 22px;font-style: italic;">2021</p ><p :style="styleStr">2021</p ><p :style="styleObj1">2021</p ><p :style="styleObj2">2021</p > </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',data () {return {styleStr: 'color: gray;font-size: 18px;font-style: italic;', // 拼接字符串styleObj1: { // 對象，綁定樣式'color': -1 ? 'gray' : 'black','font-size': '18px','font-style': 'italic'},styleObj2: { // 對象，未綁定樣式'color': 0 ? 'gray' : '','font-size': '' ? '30px' : '','font-style': null ? 'italic' : ''}}}}) </script></body> </html>

類名綁定和樣式綁定，實質上都是由JS來決定采用哪種樣式表渲染視圖。在實際開發中，它的應用場景十分廣泛，比如需要針對不同的數據類型采用不同的渲染策略時（如數值小于0時，字體顏色使用紅色）、視圖狀態可發生有限種類切換時（如下拉菜單展開時，控制按鈕箭頭向上；收縮時，旋轉按鈕180°使箭頭向下）或者輔助CSS媒體查詢進行響應式布局時（如卡片，在PC和Pad端占據20%~33%的寬度，在手機端占據100%的寬度）等。

3 事件綁定

事件系統是前端開發中非常重要的內容，Vue也對其進行了封裝和拓展，使之變得更加簡單易用。

指令v-on

Vue使用v-on指令監聽DOM事件，開發者可以將事件代碼通過v-on指令綁定到DOM節點上，基本使用方法如下：

<div id="app"><button v-on:click="logInfo()">打印消息(default: Hello World)</button><br><button v-on:click="logInfo('Self Message')">打印消息(Self Message)</button><br><button v-on:click="console.log('A Vue App')">打印消息(A Vue App)</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',methods: {logInfo (msg) {console.log(msg || 'Hello World')}}})</script>

Vue也為v-on提供了一種簡寫形式@，代碼如下：

<button @click="logInfo()">打印消息(default: Hello World)</button>

有時候，我們在處理事件時也會用到事件對象本身，那么應該怎樣獲取事件對象呢？代碼如下：

<div id="app"><input type="text" @keyup="handleKeyUp"><br><input type="text" @keyup="handleKeyUp($event)"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><script type="text/javascript">let vm = new Vue({el: '#app',methods: {handleKeyUp (event) {console.log(event.key, event)}}})</script>

實際上，寫法的不同只是為了避免混淆和沖突，事件綁定的主要作用在于降低學習和開發的成本
： ●解決了不同瀏覽器之間的兼容問題；
●提供了語法糖——事件綁定修飾符。

常見修飾符

event.preventDefault（）（阻止節點默認行為）和event.stopPropagation（）（阻止事件冒泡）是處理DOM事件時很常見的方法，Vue將其封裝成簡短易用的事件修飾符，可以后綴于事件名稱之后。

下面演示prevent修飾符在表單提交時的表現，先來看不使用修飾符時的情況，代碼如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <style type="text/css">body{color: brown;font-size: 22px;font-style: italic;margin-left: 600px;margin-top: 60px;} </style> </head> <body> <div id="app"><form @submit="handleSubmit"><h2>不使用修飾符時</h2><button type="submit">提交</button></form> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',data () {return {counter: 0}},methods: {handleSubmit () {console.log(`submit ${++this.counter} times`)}}}) </script>} </body> </html>

這是因為當未指定form表單的action時，表單會被提交到當前的URL，對應的表現就是頁面被重新加載。
使用修飾符：

<form @submit.prevent="handleSubmit"><h2>使用．prevent修飾符時</h2><button type="submit">提交</button></form>

當事件后綴多個修飾符時，要注意修飾符的排列順序，相應的代碼會根據排列順序依次產生。比如，在使用@click.prevent.self時，Vue先執行了event.preventDefault（），因此會阻止元素上的所有點擊事件；而在使用@click.self.prevent時，由于先為事件配置了self選項，所以只會阻止對元素自身的點擊。

對于鍵盤事件，Vue允許將按鍵鍵值作為修飾符來使用，如監聽回車鍵（鍵值13）是否被按下，可以這么寫：
<input type=“text” @keyup.13=“console.log($event)”>
此外，Vue還為一些常用按鍵配置了別名，

使用按鍵別名，我們無須記住按鍵的鍵值即可實現對特定按鍵的監聽事件，如監聽回車鍵還可以這么寫：
<input type=“text” @keyup.enter=“console.log($event)”>

組合修飾符

有時候，我們需要按住多鍵或者鼠標與鍵盤共用以實現某些操作（如在網頁上實現像QQ聊天中按住Ctrl + Enter發送消息的功能、實現按住ctrl后使用鼠標左鍵點選多個文件的功能等），Vue為此提供了組合修飾符的機制，不過其必須配合系統按鍵修飾符方可生效，

實例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"> <style type="text/css">body{color: brown;font-size: 22px;font-style: italic;margin-left: 600px;margin-top: 60px;} </style> </head> <body> <div id="app"><p @click.ctrl="logWithCtrl" @click="logSingle">沒有ctrl別來點我</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript">let vm = new Vue({el: '#app',methods: {logSingle (event) {if (!event.ctrlKey) {console.log('------------- 分割線 -------------')console.log('$event.ctrlKey:', event.ctrlKey)console.log('點我干啥，單身汪！')} else {console.log('不錯，進步很快呀！')}},logWithCtrl (event) {console.log('------------- 分割線 -------------')console.log('$event.ctrlKey:', event.ctrlKey)console.log('按住，是的，按住Ctrl！')}}}) </script></body> </html>

先用鼠標點擊節點，此時事件對象的ctrlKey值為false，控制臺只打印了鼠標點擊事件的信息；然后按住Ctrl鍵再次點擊節點，此時事件對象的ctrlKey值為true，控制臺先打印了鼠標點擊事件的信息，之后打印了組合事件的信息。

總結

以上是生活随笔為你收集整理的VUE基本语法1-插值属性绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【算法】图（一）拓扑排序的实现图的邻接
下一篇： Ajax服务器响应简单实例