Vue指令入門之聊六大常用內建指令-Vue.js-PHP中文網

這篇文章帶大家了解一下Vue指令，介紹一下Vue六大常用內建指令，希望對大家有幫助！

Vue指令入門之聊六大常用內建指令

指令分類

#（Directives），是vue為開發者提供的範本語法，用於輔助開發者渲染頁面的基本結構。（學習影片分享：vuejs影片教學

）

所用到的資料定義在實例的data中，事件定義在實例的
中
內容渲染指令：輔助開發者渲染DOM元素的文字內容
屬性綁定指令：輔助開發者為元素的屬性動態綁定屬性值
事件綁定指令：輔助開發者為元素綁定事件
雙向綁定指令：輔助開發者在不操作DOM的前提下，快速取得表單資料（資料來源的變更會同步到頁面上，頁面上的變更也會同步到資料來源）

條件渲染指令

：輔助開發者按需控制DOM的顯示與隱藏

列表渲染指令

：輔助開發者基於一個陣列來循環渲染一個列表結構#一、內容渲染指令

v-text

#只能渲染純文字內容，會覆寫

標籤內部原本的內容

性别

登入後複製

{{ }} 插值表達式

只能渲染純文字內容，不會覆寫

標籤內部原本的內容

性别：{{ gender }}

登入後複製

v-html

能將標籤的字串渲染成html內容，

會覆寫標籤內部原本的內容

该内容会被覆盖

登入後複製

二、屬性綁定指令

v-bind ：或：

為元素的屬性動態

綁定屬性值

登入後複製

注意：插值表達式

和

v-bind也支援javascript表達式的運算

{{ 1 + 2 }} //一元运算 {{ ok ? 'YES' : 'NO'}} //三元运算 {{ message.split('').reverse().join('') }} //字符串的反转

登入後複製

#三、事件綁定指令

v-on：或@

為元素綁定事件

<button v-on:click="add">+1</button> <!--两种写法都可以--> <button @click="add">+1</button> <!--两种写法都可以--> ----------------------------------------------------------- <script> //创建vue的实例对象 const vm = new Vue({ methods:{ add(){ this.count ++; //相当于vm.count ++; } } }) </script>
登入後複製

event

，它是一個對象，裡面的target屬性指向的是當前綁定事件的DOM元素傳一個參：event則會被覆蓋，為了能用自己傳的參又能保留event，則可以手動再傳一個實參

$event

，形參隨意

 ------------------------------------------------------------

登入後複製

##事件修飾符只要是事件，就能使用的修飾符，以下列舉5個常用的 #事件修飾符 ##說明 #.prevent 阻止預設行為（例：阻止a連結的跳轉、封鎖表單的提交） .stop 阻止事件冒泡 .capture 以擷取模式觸發目前的事件處理函數 .once 綁定的事件只觸發一次 .self

只有在event.target是當前元素本身時觸發事件處理函數

 跳转到百度

登入後複製

按鍵修飾符按鍵修飾符說明 ##.esc .enter

只能在觸發鍵盤事件時，使用的修飾符，以下列舉2個常用的

按下鍵盤esc鍵時

按鍵盤enter鍵時

登入後複製

四、雙向綁定指令

v-model

快速取得表單資料（只套用於表單元素，如：input、textarea、select）

登入後複製

專屬修飾符只能給v-model使用的修飾符 #專屬修飾符說明 #.number .trim .lazy



會自動將使用者輸入的值轉為數值類型
自動過濾使用者輸入的首尾空白字元

在失去焦點時才自動更新資料（一般情況下都是即時更新的）############

  +  = {{ n1+n2 }}

登入後複製

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为动态添加/移除display：none样式，一般用于需频繁切换

这是被 v-show 控制的元素

登入後複製

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为动态创建/移除元素，一般用于默认不展示且展示较少

这是被 v-if 控制的元素

登入後複製

v-else-if

配合v-if指令一起使用，否则将不会被识别

优秀
 良好
 一般
 差

登入後複製

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构v-for="item in items"

item是被循环的每一项，名字随意
items是待循环的数组，名字随意

  索引  ID  姓名  性别  
       {{ index }}  {{ item.id }}  {{ item.name }}  {{ item.gender }}  
 
 
 ------------------------------------------------------------