指令

什么是html屬性：就是用來擴展html標簽的功能，屬性是寫在html的開發(fā)標簽中：屬性=“屬性值”，

指令就是用來擴展在vue中標簽的功能

{{}} ：模板語法，文本插值

不可解析html標簽

{{ 可以寫變量，常量，表達式}} ：undefined和null寫了不會渲染到頁面

就是把表達式（通過計算返回結果的公式）放到頁面中進行展示

v-cloak :解決刷新頁面時出現(xiàn){{ }}，一般寫在根組件上，id="app"上，必須手動添加css代碼

    - 使得 {{}} 刷新不讓用戶看見- 直到編譯完成前，`<div>` 將不可見- 必須手工添加css代碼- 適用于多個元素<div id="app" v-cloak>{{msg}}</div><script>new Vue({el: '#app',data: {msg: '歡迎Vue!'}})</script><style> [v-cloak]display:none;}</style>   

v-text：文本指令

• 不可解析html標簽

• <元素 v-text='變量，常量，表達式'></元素>

• vue3警告，會覆蓋掉標簽中的內容

v-html：解析HTML標簽或特殊符號

• 可以解析html標簽

• <元素 v-html='變量，常量，表達式'></元素>

• vue2會覆蓋掉標簽中的內容

• vue3警告，會覆蓋

template標簽：<!-- 它是一個標簽，但是不會顯示到頁面 -->

<template v-if="age>18"> 成年人的世界，你懂得~ </template>

v-once：元素內容首次加載時動態(tài)顯示

• <元素 v-once>{{...}}</元素>

v-pre：不想編譯內容：{{}}

• <元素 v-pre>xxx{{xxx}}xx</元素>

v-bind ：綁定數(shù)據(jù)和元素屬性

• v-bind: 屬性名=""????

• 簡寫帶冒號：屬性名=""

    <div id="app"><!-- 基本綁定樣式 --><p class="active">白日依山盡</p><p :class="'active'">白日依山盡</p><p :class="x">白日依山盡</p><p :class="flag?x:''">白日依山盡</p><!-- 對象的方式 --><p :class="{active:false,border:true}">黃河入海流</p><!-- 數(shù)組的方式 --><p :class="['active','border']">欲窮千里目</p><!-- style綁定 --><p :style="{backgroundColor:'red',fontSize:'28px'}">更上一層樓</p><p :style="{backgroundColor:z}">更上一層樓</p></div>

v-show 標簽顯示和隱藏

v-show原理：css方式通過控制display: none/block來控制標簽的顯示和隱藏：適用于頻繁切換

v-if、v-else-if、v-else 標簽的創(chuàng)建和刪除

v-if的原理：通過創(chuàng)建和銷毀dom節(jié)點來控制元素顯示和隱藏。 true 添加 false 移除：耗性能

：使用的使用js中創(chuàng)建(document.createElement())和刪除(ele.remove() )

<元素1 v-if="條件1">
<元素2 v-else-if="條件2">
...
<元素n v-else>緊挨著寫，不能插入其他元素

v-if和v-show區(qū)別

v-show 作用：css方式通過控制display: none/block來控制標簽的顯示和隱藏：適用于頻繁切換

v-if的原理：通過元素的創(chuàng)建和銷毀來控制元素顯示和隱藏。 true 添加 false 移除：耗性能

性能：

1. v-if切換一次就耗費一次性能

2. v-show，只是初始顯示時耗費一次性能

安全性(權限控制會體現(xiàn))：v-if要高于v-show

支持寫在template標簽上

1. v-if支持

2. v-show不支持 ? ?

v-for <!-- 口訣：想讓誰出現(xiàn)多次，就把v-for寫在誰身上 -->

• for in 遍歷數(shù)組獲得的是（值，下標），遍歷對象獲得的是（鍵值，健名，下標）

• 語法 v-for="(遍歷的值,遍歷的下標) in 你要便利的數(shù)據(jù)"

  • // 語法一：遍歷數(shù)字： // v-for = "item in 數(shù)字" :key='唯一的, 有id用id，沒有id使用index'

  • // 語法二：遍歷數(shù)組 // v-for = "(item,index) in data中的數(shù)組" :key='唯一的, 有id用id，沒有id使用index'

  • // 語法三：遍歷對象 // v-for = "(value,key,index)in data中的對象" :key='唯一的, 有id用id，沒有id使用index'。value是鍵值，key是鍵名，index索引

  • 帶key, 提高for循環(huán)的效率

v-if和v-for的優(yōu)先級

vue2中：v-for的優(yōu)先級高于v-if

vue3中：v-if的優(yōu)先級更高v-for

注意：v-if和v-for盡量不要寫在一個標簽上

v-on：綁定事件監(jiān)聽器

/* 綁定事件的語法：v-on:事件名= "少量的js代碼(要求代碼是賦值語法)"v-on:事件名= "函數(shù)名"v-on:事件名= "函數(shù)名(參數(shù))"簡寫：@事件名 =  "少量的js代碼(要求代碼是賦值語法)"@事件名 =  "函數(shù)名"@事件名 =  "函數(shù)名(參數(shù))"事件對象如何獲取：如何阻止事件的默認行為 e.preventDefault()1. 調用時不傳參數(shù)時，默認就在第一個形參位置就是事件對象2. 調用時傳遞參數(shù)時，需要手動的 把事件對象$event 放在最后一個參數(shù)位置事件修飾符：@事件名.prevent = '事件處理函數(shù)'@事件名.stop = '事件處理函數(shù)'@事件名.prevent.stop = '事件處理函數(shù)'特殊的事件如keyup 事件按鍵修改符：@keyup.enter = '事件處理函數(shù)'   抬起時并按下了回車鍵，就會指向事件處理函數(shù).enter.delete (捕獲“Delete”和“Backspace”兩個按鍵).space (空格鍵).up   （上箭頭）.down  （下箭頭）.left   （左箭頭）.right   （右箭頭）配合功能鍵：.ctrl 鍵.alt 鍵.shift 鍵.meta 鍵需求： 按下enter鍵的同時按下ctrl鍵@keyup.ctrl.enter = ''
*/

v-model 在表單元素中進行雙向綁定：唯一 一個雙向綁定

文本類型的 <input> 和 <textarea> 元素會綁定 value默認值

文本類型的 <input> 和 <textarea> 元素會綁定 value默認值

<input type="text" v-model.number="text">

默認情況下 只要給輸入框綁定了v-model 那么修改內容的時候 邊修改內容會跟這變

但是有些時候 我們想修改完成內容再變 當change事件的時候才會修改內容

<input type="checkbox"  v-model="checked" />{{checked}}   //true或者false根據(jù)復選狀態(tài)

data變量的類型分兩大類（input中）
?? data變量的值的類型是數(shù)組，? v-model關聯(lián)的值是? 以數(shù)組形式 包含所有選中的value的值
?? data變量的值的類型是非數(shù)組， v-model關聯(lián)的值是 布爾類型的值 （true，false） （使用頻率高）

<select v-model='data中變量'>v-model關聯(lián)的是選中的選項

在普通表單元素上用v-model 實現(xiàn)對表單元素的雙向綁定

在自定義組件上用v-model 實現(xiàn)對子組件內容的雙向綁定