做網(wǎng)站必須有云虛擬主機上海app定制開發(fā)公司
文章目錄
- 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表達式
（4）模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date
<body><div id="app"><!-- data中聲明的 --><div>{{msg}}</div><div>{{age}}</div><!-- 常量 --><div>{{1313}}</div><!-- 合法的JavaScript表達式 --><div>{{1+1}}</div><!-- 模板表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 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-“開始。指令的職責是，當表達式的值改變時，將其產(chǎn)生的連帶影響，響應的作用于DOM
（2）Vue框架中的指令都是以HTML標簽的屬性形式存在的，指令對于瀏覽器是無法看懂的，需要先讓Vue框架進行編譯，編譯之后瀏覽器才可以看懂。
<span 指令寫在這里></span>
（3）指令的語法規(guī)則
<HTML標簽 v-指令名:參數(shù)="表達式"></HTML標簽>
①表達式：在插值語法在{{}}可以寫的，在指令表達式都可以寫(指令中不用加{{}})
②不是所有的指令都有參數(shù)和表達式，有的指令不需要參數(shù)也不需要表達式:如v-once。
v-once:只渲染元素一次，隨后的重新渲染，元素及其所有的子元素將被視為靜態(tài)內(nèi)容并跳過，可以用于優(yōu)化性能。
（4）什么時候使用插值語法，什么時候使用指令？
①凡是標簽體當中的內(nèi)容想要動態(tài)，需要使用插值語法
②想讓HTML標簽的屬性動態(tài)，需要使用指令語法
1.2.2 v-bind指令
（1）v-bind指令是干嘛的？
它可以讓HTML標簽的某個屬性的值產(chǎn)生動態(tài)的效果
（2）v-bind指令的語法格式：
<HTML標簽 v-bind:參數(shù)="表達式"></HTML標簽>
（3）v-bind指令的編譯原理
①編譯前：<HTML標簽 v-bind:參數(shù)="表達式"></HTML標簽>
②編譯后：<HTML標簽 參數(shù)="表達式"></HTML標簽>
③注意兩項：
a.在編譯的時候v-bind后面的”參數(shù)名“會被編譯為HTML標簽的”屬性名“
b.表達式會關聯(lián)data，當data發(fā)生改變之后，表達式的執(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標簽當中；v-model只能使用在表單元素上，例如：input標簽、select標簽。v-model有這個限制是因為只有表單類的元素才能給用戶提供交互輸入的界面
（4）v-bind和v-model都有簡寫方式：
①v-bind:參數(shù)="表達式" 簡寫為 :參數(shù)="表達式"
②v-model:value="表達式" 簡寫為 v-model="表達式"