Vue常用內(nèi)置指令有哪些
這篇文章主要介紹了Vue常用內(nèi)置指令有哪些的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue常用內(nèi)置指令有哪些文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到馬尾網(wǎng)站設(shè)計(jì)與馬尾網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類(lèi)型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)頁(yè)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋馬尾地區(qū)。
指令分類(lèi)
指令（Directives），是vue為開(kāi)發(fā)者提供的 模板語(yǔ)法，用于輔助開(kāi)發(fā)者渲染頁(yè)面的基本結(jié)構(gòu)。
所用到的數(shù)據(jù)定義在實(shí)例的 data中，事件定義在實(shí)例的 methods中
內(nèi)容渲染指令：輔助開(kāi)發(fā)者渲染DOM元素的文本內(nèi)容
屬性綁定指令：輔助開(kāi)發(fā)者為元素的屬性動(dòng)態(tài)綁定屬性值
事件綁定指令：輔助開(kāi)發(fā)者為元素綁定事件
雙向綁定指令：輔助開(kāi)發(fā)者在不操作DOM的前提下，快速獲取表單數(shù)據(jù)（數(shù)據(jù)源的變化會(huì)同步到頁(yè)面上，頁(yè)面上的變化也會(huì)同步到數(shù)據(jù)源中）
條件渲染指令：輔助開(kāi)發(fā)者按需控制DOM的顯示與隱藏
列表渲染指令：輔助開(kāi)發(fā)者基于一個(gè)數(shù)組來(lái)循環(huán)渲染一個(gè)列表結(jié)構(gòu)
一、內(nèi)容渲染指令
v-text
只能渲染純文本內(nèi)容，會(huì)覆蓋標(biāo)簽內(nèi)部原本的內(nèi)容
性別
{{ }} 插值表達(dá)式
只能渲染純文本內(nèi)容，不會(huì)覆蓋標(biāo)簽內(nèi)部原本的內(nèi)容
性別：{{ gender }}
v-html
能將帶標(biāo)簽的字符串渲染成html內(nèi)容，會(huì)覆蓋標(biāo)簽內(nèi)部原本的內(nèi)容
該內(nèi)容會(huì)被覆蓋
二、屬性綁定指令
v-bind：或：
為元素的屬性 動(dòng)態(tài)綁定屬性值
注意：插值表達(dá)式和 v-bind還支持javascript表達(dá)式的運(yùn)算
{{ 1 + 2 }} //一元運(yùn)算
{{ ok ? 'YES' : 'NO'}} //三元運(yùn)算
{{ message.split('').reverse().join('') }} //字符串的反轉(zhuǎn)
三、事件綁定指令
v-on：或@
為元素綁定事件
+1
+1
-----------------------------------------------------------
傳參
+N
------------------------------------------------------------
事件修飾符
只要是事件，就能使用的修飾符，以下列舉5個(gè)常用的
| 事件修飾符 | 說(shuō)明 | | .prevent | 阻止默認(rèn)行為（例：阻止a鏈接的跳轉(zhuǎn)、阻止表單的提交） |
| .stop | 阻止事件冒泡 |
| .capture | 以捕獲模式觸發(fā)當(dāng)前的事件處理函數(shù) |
| .once | 綁定的事件只觸發(fā)一次 |
| .self | 只有在event.target是當(dāng)前元素自身時(shí)觸發(fā)事件處理函數(shù) |
跳轉(zhuǎn)到百度
按鍵修飾符
只能在觸發(fā)鍵盤(pán)事件時(shí)，使用的修飾符，以下列舉2個(gè)常用的
| 按鍵修飾符 | 說(shuō)明 | | .esc | 按鍵盤(pán)esc鍵時(shí) |
| .enter | 按鍵盤(pán)enter鍵時(shí) |
四、雙向綁定指令
v-model
快速獲取表單數(shù)據(jù)（只應(yīng)用于表單元素，如：input、textarea、select）
請(qǐng)選擇城市
北京
上海
廣州
專(zhuān)屬修飾符
只能給v-model使用的修飾符
| 專(zhuān)屬修飾符 | 說(shuō)明 | | .number | 自動(dòng)將用戶輸入的值轉(zhuǎn)為數(shù)值類(lèi)型 |
| .trim | 自動(dòng)過(guò)濾用戶輸入的首尾空白字符 |
| .lazy | 在失去焦點(diǎn)時(shí)才自動(dòng)更新數(shù)據(jù)（一般情況下都是實(shí)時(shí)更新的） |
+ = {{ n1+n2 }}
五、條件渲染指令
v-show
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動(dòng)態(tài)添加/移除display：none樣式，一般用于需頻繁切換
這是被 v-show 控制的元素
v-if
控制DOM的顯示與隱藏（值為true顯示，值為false隱藏），其原理為 動(dòng)態(tài)創(chuàng)建/移除元素，一般用于默認(rèn)不展示且展示較少
這是被 v-if 控制的元素
v-else-if
配合 v-if指令一起使用，否則將不會(huì)被識(shí)別
優(yōu)秀
良好
重慶分公司
重慶分公司
