模板語法
插值語法
Mustache插值采用{{ }}，用于決議標簽體內容，將Vue實體中的資料插入DOM中
<h1>Hello {{name}}</h1>
指令語法
指令用于決議標簽，是vue為開發者提供的一套模板語法，輔助開發者渲染頁面的基本結構，
（指令是vue開發中最基礎、最常用、最簡單的知識點）（支持系結簡單的資料值之外，還支持js運算式運算）
內容渲染指令
1、v-text=" " 會覆寫元素內默認的值、無法寫HTML標簽陳述句
2、{{ }} 插值運算式（Mustache） 不會覆寫元素中默認的內容
3、v-html 可以渲染包含HTML標簽的字串
v-html有安全性問題，在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊；永遠不要再用戶提交的內容上使用v-html，
屬性系結指令
v-bind: 為元素的屬性動態系結屬性值
屬性：placeholder、src等
簡寫：:
<a v-bind:href="https://www.cnblogs.com/gfhcg/archive/2023/03/17/url">點擊跳轉</a>
<a :href="https://www.cnblogs.com/gfhcg/archive/2023/03/17/url">點擊跳轉</a>
事件系結指令
v-on: 為DOM元素系結事件監聽
v-on:click=” “、v-on:input、v-on:keyup
事件處理函式，需要在methods節點中進行宣告
簡寫：@、如果事件處理函式的代碼足夠簡單，只有一行代碼，則可以簡寫到行內
事件物件event
<body>
<div id="app">{{username}}</div>
<button @click="addcount($event,88)">
點擊我
</button>
<script src="https://www.cnblogs.com/gfhcg/archive/2023/03/17/vue.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
username:'zs',
count:0
},
methods:{
addcount(e,88){
const nowBgColor =e.target.style.backgroundColor
console.log(nowB gColor)
this.count+=1
}
}
})
</script>
</body>
系結事件并傳參，使用（） 小括號，但會占用event的位置
$event是vue提供的特殊變數用于占位，用來表示原生事件引數物件event，使用e接受
事件修飾符
vue提供事件修飾符，來輔助程式員更方便的對事件的觸發進行控制
-
.stop阻止事件冒泡（）里到外 -
.prevent阻止默認行為（）比如阻止跳轉 -
.capture以捕獲模式觸發當前事件處理函式（外到里） -
.self只有在event.target是當前元素自身時觸發事件處理函式 -
.once系結的事件只觸發一次 -
.passive事件的默認行為立即執行，無需等待事件回呼執行完畢
按鍵修飾符
監聽鍵盤事件時，我們經常需要判斷詳細的按鍵，此時可為鍵盤相關的事件添加按鍵修飾符
- .enter、.delete、.esc、.space、.tab(特殊：只適用于keydown)、.up、.down、.left、.right
- 系統修飾符（用法特殊）：ctrl、alt、shift、mta 配合keyup使用：按下按鍵的同時需要再按下其他鍵，隨后事件才被觸發；keydown正常觸發事件
- 也可以使用keyCode去指定具體的按鍵（不推薦）
- Vue.config.keyCodes.自定義鍵名=鍵碼 可以去定制按鍵別名
雙向系結指令
v-model 在不操作DOM的情況下，快速獲取表單資料（只能配合表單元素一起使用）
<input type="text" v-model:value="https://www.cnblogs.com/gfhcg/archive/2023/03/17/username"/>
<input type="text" v-model="username"/>
v-model 指令的修飾符
方便用戶對輸入的內容進行處理
.number自動將用戶輸入值轉化為數值.trim自動過濾用戶輸入的首尾空白字符.lazy在change時更新而非input時更新（不實時更新，文本框失去焦點更新）
條件渲染指令
按需控制DOM的顯示和隱藏
v-if =" " 動態創建或移除DOM元素，有更高的切換開銷（重繪和回流）
v-else-if =" "、v-else =" "
v-show=" " 動態為元素添加或移除display樣式，有更高的初始渲染開銷，
串列渲染指令
v-for=" " 輔助開發者基于一個陣列來回圈渲染相似的UI結構
特殊語法：item in items
<body>
<div id="root">
<!-- 遍歷陣列 -->
<ul>
<li v-for="item in persons" :key="item.id">
{{item.id}}-{{item.name}}-{{item.age}}
</li>
</ul>
<!-- 遍歷物件 -->
<ul>
<li v-for="(value,key) of cars" :key="key">
{{key}}-{{value}}
</li>
</ul>
<!-- 遍歷字串 -->
<ul>
<li v-for="(char,index) of str" :key="index">
{{index}}-{{char}}
</li>
</ul>
<!-- 遍歷指定次數 -->
<ul>
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm=new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'張三',age:18},
{id:'002',name:'李四',age:17},
{id:'003',name:'王五',age:42},
],
cars:{
name:'Audi',
price:"70W",
color:"black"
},
str:"hello"
}
})
</script>
</body>
for in和for of
for in一般遍歷物件，不建議遍歷陣列，遍歷陣列請使用for of或forEach，
v-for中的索引
（item，index） in items
注：v-for中的item項和index索引都是形參，任意命名
key作用和原理
當串列的資料變化（添加、洗掉）時，vue會盡可能復用已存在的DOM元素，從而提升渲染的性能，但這種性能優化策略會導致有狀態的串列無法被正確更新，key的使用將減少不必要的DOM操作，提高更新效率，
解釋：
Vue根據初始資料生成初始虛擬DOM（Vnodes），將虛擬DOM轉為真實DOM，用戶添加新的資料，產生新虛擬DOM（Vnodes），此時將兩份虛擬DOM根據key進行對比（diff 演算法），如果對比一樣的直接復用，將之前的真實DOM直接渲染；不一樣的無法復用，將其生成真實DOM，
- 如果使用index作為key，diff對比時會完全錯位，所有節點都無法復用，效率降低，
- 如果不指定key時，vue自動使用遍歷時的索引值index作為key，
為了給vue一個提示，以便它能跟蹤每個節點的身份，需要為每項提供一個唯一的key屬性
注：
-
key只能是字串或數字型別
-
key的值必須具有唯一性
-
建議把資料項id屬性的值作為key的值，將index的值作為key的值沒有任何意義（https://blog.csdn.net/z591102/article/details/106682298/）
-
建議使用v-for時一定要指定key的值（提升性能，防止串列狀態紊亂）
-
但不存在對資料的操作，僅是渲染串列用于展示，使用index作為key沒有問題
其他內置指令
v-cloak沒有值，配合CSS，解決網速慢、服務器回應慢時未經決議的模板渲染到頁面上，Vue實體創建并接管容器后，會刪掉該屬性，
[v-cloak]:{
display:none;
}
v-once沒有值，記錄初始值，在初次動態渲染后，就視為靜態內容，以后資料的改變不會引起v-once所在結構的更新，可以用于性能優化，
v-pre沒有值，跳過其所在節點的編譯程序，可以用它跳過：沒有使用指令語法、插值語法的節點，會加快編譯，
自定義指令
本質：將原生操作DOM進行二次封裝，
<body>
<div id="root">
<!-- v-big放大10倍 -->
<h2>當前的n值是：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<button @click="n++">點位n++</button>
<hr>
<!-- v-fbind在v-bind基礎上，自動獲得焦點 -->
<input type="text" v-fbind:value="https://www.cnblogs.com/gfhcg/archive/2023/03/17/n">
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm=new Vue({
el:'#root',
data:{
n:0,
},
directives:{
//函式式
//何時會被呼叫：1、指令和元素成功系結；2、指令所在的模板被重新決議時
big(element,binding){
element.innerText=binding.value*10
},
//錯誤寫法：
fbind(element,binding){
element.value=https://www.cnblogs.com/gfhcg/archive/2023/03/17/binding.value
element.focus()//.focus()呼叫時機不對，此時input還未被插入頁面
},
//物件式
fbind:{
//指令與元素成功系結時呼叫
bind(element,binding){
element.value=binding.value
},
//指令所在元素被插入頁面時呼叫
inserted(element,binding){
element.focus()
},
//指令所在模板被重新決議時呼叫
update (element,binding) {
element.value=binding.value
},
}
},
})
</script>