VUE基本语法1-插值 属性绑定
.1 插值綁定
插值綁定是Vue中最常見、最基本的語法，綁定的內(nèi)容主要有文本插值和HTML插值兩種
文本插值
文本插值的方式十分簡單，只要用雙大括號（Mustache語法）將要綁定的變量、值、表達(dá)式括住就可以實(shí)現(xiàn)，Vue將會(huì)獲取計(jì)算后的值，并以文本的形式將其展示出來。 下面一段代碼演示了文本插值的基本用法：
<style>.profile {display: inline-block;width: 300px;}</style><div id="app" style="margin-left: 300px;"><h2>文本插值</h2><p><label class="pro file">變量：</label> {{ num }}</p><p><label class="pro file">表達(dá)式：</label> {{ 5 + 10 }}</p><p><label class="pro file">三目運(yùn)算符：</label> {{ true ? 15 : 10 }}</p><p><label class="pro file">函數(shù)：</label> {{ getNum() }}</p><p><label class="pro file">匿名函數(shù)：</label> {{ (() => 5 + 10)() }}</p><p><label class="pro file">對象：</label> {{ {num: 15} }}</p><p><label class="pro file">函數(shù)對象：</label> {{ getNum }}</p><p><label class="pro file">html代碼（表達(dá)式）:</label> {{ '<span>15</span>'}}</p><p><label class="pro file">html代碼（變量）:</label> {{ html }}</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 {num: 15,html: '<span>15</span>'}},methods: {getNum () {return this.num}}})</script>“html代碼（表達(dá)式）”和“html代碼（變量）”的差異：雖然兩者綁定的內(nèi)容是一樣的，但是對于前者來說，Vue優(yōu)先解釋了DOM節(jié)點(diǎn)span，并隔離了“{{”和“}}”，所以插值語法并沒有生效，“{{”和“}}”還被當(dāng)作了p節(jié)點(diǎn)的文本內(nèi)容。 可以看到，無論是變量、表達(dá)式、執(zhí)行函數(shù)還是DOM代碼，**Vue都只將結(jié)果當(dāng)作文本處理。**另外，如果插值綁定的內(nèi)容是變量或與變量有關(guān)，當(dāng)變量的值改變時(shí)，視圖也會(huì)同步更新。
HTML插值
HTML插值可以動(dòng)態(tài)渲染DOM節(jié)點(diǎn)，常用于處理開發(fā)者無可預(yù)知和難以控制的DOM結(jié)構(gòu)，如渲染用戶隨意書寫的文檔結(jié)構(gòu)等，這在一些論壇和博客平臺(tái)上可以看到，下面來看一段相關(guān)代碼
<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>文本插值中的代碼被解釋為節(jié)點(diǎn)的文本內(nèi)容，而HTML插值中的代碼則被渲染為視圖節(jié)點(diǎn)。實(shí)際上，HTML插值是對文本插值的補(bǔ)充和拓展，Vue可以解析被綁定的內(nèi)容為DOM節(jié)點(diǎn)，從而實(shí)現(xiàn)動(dòng)態(tài)渲染視圖的效果。不過Vue本身就支持模板，開發(fā)者在使用HTML插值時(shí)應(yīng)秉承以下原則：
●盡量多地使用Vue自身的模板機(jī)制，減少對HTML插值的使用；
●只對可信內(nèi)容使用HTML插值；
●絕不相信用戶輸入的數(shù)據(jù)。
.2 屬性綁定
除了文本之外，DOM節(jié)點(diǎn)還有其他一些重要的屬性，那么Vue是如何綁定這些屬性的呢？
指令v-bind
DOM節(jié)點(diǎn)的屬性基本都可以用指令v-bind進(jìn)行綁定，代碼如下：
<style>.italic { font-style: italic; }</style><div id="app" style="margin-left: 300px;"><p v-bind:class="className" v-bind:title="title">危險(xiǎn)勿觸</p ><button v-bind:disabled="10 + 10 === 20">點(diǎn)擊有獎(jiǎng)</button><input v-bind:type="'text'" v-bind::placeholder="true ? '請輸入' : '請錄入'"></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 {className: 'italic',title: '危險(xiǎn)勿觸'}}})</script>類名和樣式綁定
由于類名class和樣式style在節(jié)點(diǎn)屬性中是兩個(gè)比較奇怪的存在（雖然他們可接收的類型都是字符串，但類名實(shí)際上是由數(shù)組拼接而成，而樣式則是由對象鍵值對拼接而成的），所以Vue在綁定類名和樣式時(shí)也采用不一樣的機(jī)制。 我們可以通過字符串、數(shù)組和對象三種方式為節(jié)點(diǎn)動(dòng)態(tài)綁定類名屬性，代碼如下：
<style>.color-gray { color: gray; }.size-18 { font-size: 18px; }.style-italic { font-style: italic; }</style><div id="app"><p class="color-gray size-18 style-italic">過好每一天，</p ><p :class="classStr">《Vue2.0》，</p ><p :class="classArr">《Vue2.0》，</p ><p :class="classObj1">《Vue2.0 》，</p ><p :class="classObj2">《Vue2.0》，</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 {classStr: 'color-gray size-18 style-italic', // 拼接字符串classArr: ['color-gray', 'size-18', 'style-italic'], // 數(shù)組classObj1: { // 對象，綁定類名'color-gray': true,'size-18': true,'style-italic': true},classObj2: { // 對象，未綁定類名'color-gray': 0,'size-18': '','style-italic': false}}}})</script>
三種方式綁定類名的效果是一致的，但由于classObj2中的鍵值全部被判定為假，所以類名并未被綁定到對應(yīng)節(jié)點(diǎn)上。
綁定樣式的方式與類名相似，不過樣式是以鍵值對的形式，所以不能像類名一樣使用數(shù)組進(jìn)行綁定，示例代碼如下：
類名綁定和樣式綁定，實(shí)質(zhì)上都是由JS來決定采用哪種樣式表渲染視圖。在實(shí)際開發(fā)中，它的應(yīng)用場景十分廣泛，比如需要針對不同的數(shù)據(jù)類型采用不同的渲染策略時(shí)（如數(shù)值小于0時(shí)，字體顏色使用紅色）、視圖狀態(tài)可發(fā)生有限種類切換時(shí)（如下拉菜單展開時(shí)，控制按鈕箭頭向上；收縮時(shí)，旋轉(zhuǎn)按鈕180°使箭頭向下）或者輔助CSS媒體查詢進(jìn)行響應(yīng)式布局時(shí)（如卡片，在PC和Pad端占據(jù)20%~33%的寬度，在手機(jī)端占據(jù)100%的寬度）等。
3 事件綁定
事件系統(tǒng)是前端開發(fā)中非常重要的內(nèi)容，Vue也對其進(jìn)行了封裝和拓展，使之變得更加簡單易用。
指令v-on
Vue使用v-on指令監(jiān)聽DOM事件，開發(fā)者可以將事件代碼通過v-on指令綁定到DOM節(jié)點(diǎn)上，基本使用方法如下：
<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>有時(shí)候，我們在處理事件時(shí)也會(huì)用到事件對象本身，那么應(yīng)該怎樣獲取事件對象呢？代碼如下：
<div id="app"><!-- 1. 在事件函數(shù)不必傳參時(shí)，可以這樣寫，注意：不能帶() --><input type="text" @keyup="handleKeyUp"><br><!-- 2. 手動(dòng)傳入$event對象 --><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>實(shí)際上，寫法的不同只是為了避免混淆和沖突，事件綁定的主要作用在于降低學(xué)習(xí)和開發(fā)的成本
： ●解決了不同瀏覽器之間的兼容問題；
●提供了語法糖——事件綁定修飾符。
常見修飾符
event.preventDefault（）（阻止節(jié)點(diǎn)默認(rèn)行為）和event.stopPropagation（）（阻止事件冒泡）是處理DOM事件時(shí)很常見的方法，Vue將其封裝成簡短易用的事件修飾符，可以后綴于事件名稱之后。
下面演示prevent修飾符在表單提交時(shí)的表現(xiàn)，先來看不使用修飾符時(shí)的情況，代碼如下：
這是因?yàn)楫?dāng)未指定form表單的action時(shí)，表單會(huì)被提交到當(dāng)前的URL，對應(yīng)的表現(xiàn)就是頁面被重新加載。
使用修飾符：
當(dāng)事件后綴多個(gè)修飾符時(shí)，要注意修飾符的排列順序，相應(yīng)的代碼會(huì)根據(jù)排列順序依次產(chǎn)生。比如，在使用@click.prevent.self時(shí)，Vue先執(zhí)行了event.preventDefault（），因此會(huì)阻止元素上的所有點(diǎn)擊事件；而在使用@click.self.prevent時(shí)，由于先為事件配置了self選項(xiàng)，所以只會(huì)阻止對元素自身的點(diǎn)擊。
對于鍵盤事件，Vue允許將按鍵鍵值作為修飾符來使用，如監(jiān)聽回車鍵（鍵值13）是否被按下，可以這么寫：
<input type=“text” @keyup.13=“console.log($event)”>
此外，Vue還為一些常用按鍵配置了別名，
使用按鍵別名，我們無須記住按鍵的鍵值即可實(shí)現(xiàn)對特定按鍵的監(jiān)聽事件，如監(jiān)聽回車鍵還可以這么寫：
<input type=“text” @keyup.enter=“console.log($event)”>
組合修飾符
有時(shí)候，我們需要按住多鍵或者鼠標(biāo)與鍵盤共用以實(shí)現(xiàn)某些操作（如在網(wǎng)頁上實(shí)現(xiàn)像QQ聊天中按住Ctrl + Enter發(fā)送消息的功能、實(shí)現(xiàn)按住ctrl后使用鼠標(biāo)左鍵點(diǎn)選多個(gè)文件的功能等），Vue為此提供了組合修飾符的機(jī)制，不過其必須配合系統(tǒng)按鍵修飾符方可生效，
實(shí)例：
<!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別來點(diǎn)我</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('點(diǎn)我干啥，單身汪！')} else {console.log('不錯(cuò)，進(jìn)步很快呀！')}},logWithCtrl (event) {console.log('------------- 分割線 -------------')console.log('$event.ctrlKey:', event.ctrlKey)console.log('按住，是的，按住Ctrl！')}}}) </script></body> </html>
先用鼠標(biāo)點(diǎn)擊節(jié)點(diǎn)，此時(shí)事件對象的ctrlKey值為false，控制臺(tái)只打印了鼠標(biāo)點(diǎn)擊事件的信息；然后按住Ctrl鍵再次點(diǎn)擊節(jié)點(diǎn)，此時(shí)事件對象的ctrlKey值為true，控制臺(tái)先打印了鼠標(biāo)點(diǎn)擊事件的信息，之后打印了組合事件的信息。
總結(jié)
以上是生活随笔為你收集整理的VUE基本语法1-插值 属性绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【算法】图（一）拓扑排序的实现 图的邻接
- 下一篇： Ajax服务器响应简单实例