mysql做wp網(wǎng)站什么是網(wǎng)絡(luò)營銷公司
文章目錄
- 1.模板語法
- 1.1 插值語法{{}}可以寫什么
- 1.2 指令語法
- 1.2.1 指令概述
- 1.2.2 v-bind指令
- 1.2.3 v-model指令
1.模板語法
1.1 插值語法{{}}可以寫什么
（1）在data中聲明的
（2）常量
（3）合法的JavaScript表達(dá)式
（4）模板表達(dá)式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date
<body><div id="app"><!-- data中聲明的 --><div>{{msg}}</div><div>{{age}}</div><!-- 常量 --><div>{{1313}}</div><!-- 合法的JavaScript表達(dá)式 --><div>{{1+1}}</div><!-- 模板表達(dá)式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date --><h1>{{Date.now()}}</h1></div><script>// 創(chuàng)建vue實例const myVue = new Vue({data: {age: 28,msg: 'agvc'},el: '#app'})// myVue.$mount('#app')</script>
</body>
1.2 指令語法
1.2.1 指令概述
（1）Vue框架中的所有指令的名字都以”v-“開始。指令的職責(zé)是，當(dāng)表達(dá)式的值改變時，將其產(chǎn)生的連帶影響，響應(yīng)的作用于DOM
（2）Vue框架中的指令都是以HTML標(biāo)簽的屬性形式存在的，指令對于瀏覽器是無法看懂的，需要先讓Vue框架進(jìn)行編譯，編譯之后瀏覽器才可以看懂。
<span 指令寫在這里></span>
（3）指令的語法規(guī)則
<HTML標(biāo)簽 v-指令名:參數(shù)="表達(dá)式"></HTML標(biāo)簽>
①表達(dá)式：在插值語法在{{}}可以寫的，在指令表達(dá)式都可以寫(指令中不用加{{}})
②不是所有的指令都有參數(shù)和表達(dá)式，有的指令不需要參數(shù)也不需要表達(dá)式:如v-once。
v-once:只渲染元素一次，隨后的重新渲染，元素及其所有的子元素將被視為靜態(tài)內(nèi)容并跳過，可以用于優(yōu)化性能。
（4）什么時候使用插值語法，什么時候使用指令？
①凡是標(biāo)簽體當(dāng)中的內(nèi)容想要動態(tài)，需要使用插值語法
②想讓HTML標(biāo)簽的屬性動態(tài)，需要使用指令語法
1.2.2 v-bind指令
（1）v-bind指令是干嘛的？
它可以讓HTML標(biāo)簽的某個屬性的值產(chǎn)生動態(tài)的效果
（2）v-bind指令的語法格式：
<HTML標(biāo)簽 v-bind:參數(shù)="表達(dá)式"></HTML標(biāo)簽>
（3）v-bind指令的編譯原理
①編譯前：<HTML標(biāo)簽 v-bind:參數(shù)="表達(dá)式"></HTML標(biāo)簽>
②編譯后：<HTML標(biāo)簽 參數(shù)="表達(dá)式"></HTML標(biāo)簽>
③注意兩項：
a.在編譯的時候v-bind后面的”參數(shù)名“會被編譯為HTML標(biāo)簽的”屬性名“
b.表達(dá)式會關(guān)聯(lián)data，當(dāng)data發(fā)生改變之后，表達(dá)式的執(zhí)行結(jié)果就會發(fā)生變化。連帶的就會產(chǎn)生動態(tài)效果
（3）由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 : ）
1.2.3 v-model指令
v-bind和v-model的區(qū)別和聯(lián)系
（1）v-bind和v-model這兩個指令都可以完成數(shù)據(jù)綁定
（2）v-bind是單向數(shù)據(jù)綁定：data ==>視圖；v-model是雙向數(shù)據(jù)綁定：data <==> 視圖
（3）v-bind可以使用在任何HTML標(biāo)簽當(dāng)中；v-model只能使用在表單元素上，例如：input標(biāo)簽、select標(biāo)簽。v-model有這個限制是因為只有表單類的元素才能給用戶提供交互輸入的界面
（4）v-bind和v-model都有簡寫方式：
①v-bind:參數(shù)="表達(dá)式" 簡寫為 :參數(shù)="表達(dá)式"
②v-model:value="表達(dá)式" 簡寫為 v-model="表達(dá)式"