1. 模板 template 的三種寫法
- 使用Vue完整版闸餐，寫在HTML里
// index.html
<div id="xxx">
{{n}}
<button @click="add"><button/>
</div>
// main.js
new Vue({
el:"#xxx",
data:{n:0}, // data也可以寫成函數(shù)
methods:{
add(){
...
}
}
})
- 使用Vue完整版饱亮，寫在選項(xiàng)里
// index.html
<div id="app">
</div>
// main.js
new Vue({
data:{n:0}, // data也可以寫成函數(shù)
tmeplate:`
<div id="xxx">
{{n}}
<button @click="add"><button/>
</div>
`,
methods:{
add(){
...
}
}
}).$mount('#app') // 等于 el:'#app'
- 這樣寫，HTML里面的 div#app 元素會(huì)被 template 外層的 div 替換舍沙。
- 使用 Vue 非完整版近上，配合 xxx.vue 文件
<template> <!-- 這里不是HTML，而是 XML -->
<div>
{{n}}
<button @click='add'>+1</button>
</div>
</template>
<!-- XML中 有閉合標(biāo)簽 / 比如 <input /> <div /> 空div可以這樣寫 -->
<script>
export default {
data(){ return n:0 } // data必須為函數(shù)
method: {add(){ this.n += 1 }}
}
</script>
<style> 這里寫CSS樣式 </style>
// 在另一個(gè)地方寫如下代碼
import Xxx from './xxx.vue'
// Xxx
是一個(gè) options 對(duì)象
new Vue({
render: h => h{Xxx}
}),$mount('#app')
2. 模板 template 中的常用指令
2.1 展示內(nèi)容
- 表達(dá)式
- {{ object.a }} 表達(dá)式
- {{ n+1 }} 可以寫任何運(yùn)算（不能寫if else）
- {{ fn(n) }} 可以調(diào)用函數(shù)
- 如果值為 undefined 或 null 就不顯示
- 另一種寫法
<div v-text="表達(dá)式"></div>
- HTML內(nèi)容
- 假設(shè) data.x 值為 <strong>hi</strong>
<div v-html="x"></div> <!-- 即可顯示粗體的hi -->
- 展示內(nèi)容{{ n }}
<div v-pre>{{ n }}</div>
- v-pre 不會(huì)對(duì)模板進(jìn)行編譯
2.2 綁定屬性
1.綁定 src
<img v-bind:src='x' />
- v-bind: 簡(jiǎn)寫為
<img :src="x" /> - 綁定對(duì)象
<div :style="{borde: '1px solid red', height: 100}"></div>
注意：這里可以把‘100px’寫成100拂铡，默認(rèn)為px壹无，如果是'100em'就不可以省略em。
2.3 綁定事件
1.v-on:事件名
<button v-on:click="add">+1</button> <!-- 點(diǎn)擊之后和媳，Vue 會(huì)運(yùn)行 add() -->
<button v-on:click="xxx(1)">xxx</button> <!-- 點(diǎn)擊之后格遭，Vue 會(huì)運(yùn)行 xxx(1) -->
<button v-on:click="n+=1">xxx</button> <!-- 點(diǎn)擊之后，Veu 會(huì)運(yùn)行n+=1 -->
發(fā)現(xiàn)函數(shù)就加括號(hào)調(diào)用留瞳，否則就直接運(yùn)行代碼拒迅。為了在模板 template 中保持簡(jiǎn)便容易理解的代碼，還是避免使用函數(shù)中再調(diào)用函數(shù)這樣的偏復(fù)雜操作她倘。
2.縮寫
<button @click="add">+1</button> <!-- 一般都會(huì)使用縮寫 -->
2.4 條件判斷
if...else
<div v-if="x >0"> <!-- 符合條件就顯示div -->
x大于0
</div>
<div v-else-if="x ===0">
x為0
</div>
<div v-else>
x小于0
</div>
2.5 循環(huán)
- for (value, key) in 對(duì)象或數(shù)組
<ul>
<li v-for=" (u,index) in users" :key="index">
索引:{{index}}值:{{u.name}}
</li>
</ul>
<ul>
<li v-for=" (value, name) in obj" :key="name" >
屬性名:{{name}}璧微，屬性值:{{name}}
</li>
</ul>
2.6 顯示與隱藏
- v-show
<div v-show="n%2===0"> n是偶數(shù) </div>
<!-- 近似等于 -->
<div :style="{display:n%2===0?'block:'none'}">n是偶數(shù)</div>
但是看得見的元素display不止有block，如 table 的 display 為table硬梁，li 的 display 為 list-item前硫。
3. 指令通用用法
3.1 什么是指令
以 v- 開頭的東西就是指令。（只有v-bind和v-on會(huì)省略）
3.2 語法
- v-指令名： 參數(shù)=值荧止，如 v-on:click=add
- 如果參數(shù)值沒有特殊字符屹电，則可以不加引號(hào)
- 有些指令沒有參數(shù)和值，如 v-pre
- 有些指令沒有值跃巡，如 v-on:click.prevent (阻止默認(rèn)事件)
總結(jié)
1.Vue模板主要特點(diǎn)有 - 使用 XML 語法（不是HTML）
- 使用 {{}} 插入表達(dá)式
- 使用 v-html v-on v-bind 等指令操作DOM
- 使用 v-if v-for 等指令視線條件判斷和循環(huán)
2.還沒寫出來的指令 - v-model 關(guān)于Vue表單
- v-slot 關(guān)于Vue插槽
- v-cloak
這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯危号。和 CSS 規(guī)則如[v-cloak] { display: none }一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢素邪。 - v-once
只渲染元素和組件一次外莲。隨后的重新渲染，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過兔朦。
3.3 事件修飾符
有些指令支持修飾符
- @click.stop = 'add' 表示阻止事件傳播偷线，冒泡
- @click.prevent = 'add' 表示阻止默認(rèn)動(dòng)作
- @click.prevent.stop = 'add' 表示以上兩種意思
常用的修飾符有很多
- v-on 支持的有 .{ keycode | keyAlias } 即 鍵碼 或 按鍵別名
- 另外還有 .stop .prevent .capture .self .once .passive .native
- 快捷鍵相關(guān) .ctrl .alt .shift .meta .exact
- 鼠標(biāo)相關(guān) .left .right .middle
- v-bind 支持的 .prop .camel .sync
- v-model 支持的 .lazy .number .trim
3.4 .sync飾符
Vue的幾個(gè)規(guī)則
- 組件不能修改 props 外部數(shù)據(jù)
- $emit 可以觸發(fā)事件，并傳參
- event 可以獲取$emit的參數(shù)
在有些情況下沽甥，我們可能需要對(duì)一個(gè) prop 進(jìn)行“雙向綁定”声邦。但是真正的雙向綁定會(huì)帶來維護(hù)上的問題，因?yàn)樽咏M件可以變更父組件摆舟，且在父組件和子組件都沒有明顯的變更來源會(huì)顯得混亂翔忽。因此 Vue 推薦以update:myPropName的模式觸發(fā)事件（發(fā)布訂閱模式）取而代之英融。
看一個(gè)場(chǎng)景，子組件要使用父組件傳遞的參數(shù)加以修改歇式。
這里是子組件驶悟，點(diǎn)擊執(zhí)行自定義事件 'update:money.' 執(zhí)行內(nèi)容 為 'money - 100'
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money - 100)">
<span>花錢</span>>
</button>
</div>
</template>
<script>
export default {
props:['money']
}
</script>
這里是父組件 ,傳給子組件 :money='total' props 數(shù)據(jù).父元素綁定'update:money'事件，子組件執(zhí)行時(shí)便觸發(fā)事件材失，執(zhí)行 total = $event痕鳍。$event表示子組件調(diào)用的參數(shù)。
當(dāng)子組件修改父組件數(shù)據(jù)時(shí)龙巨，必須這樣寫笼呆，不可以直接修改。
<template>
<div id="app">
App.vue 我現(xiàn)在有 {{total}}
<hr/>
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
data(){
return {
total:10000
}
},
methods:{
add(){
this.n++;
}
},
components:{
Child:Child
}
}
</script>
用 .sync 修飾符時(shí)
<Child :money.sync="total"/>
<!-- 等價(jià)于 -->
<Child :money="total" v-on:update:money="total = $event"/>
- 子組件的自定義事件必須按照
update:參數(shù)名 格式不能修改旨别。
又去看了另一個(gè)博客中的開關(guān)彈窗的例子诗赌。深入理解vue 修飾符sync【 vue sync修飾符示例】 - 簡(jiǎn)書 (jianshu.com)
<template>
<div class="details">
<myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
<button @click="changeValue">toggle</button>
</div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
template: `<div v-if="show">
<p>默認(rèn)初始值是{{show}}，所以是顯示的</p>
<button @click.stop="closeDiv">關(guān)閉</button>
</div>`,
props:['show'],
methods: {
closeDiv() {
this.$emit('update:show', false); //觸發(fā) input 事件秸弛，并傳入新值
}
}
})
export default{
data(){
return{
valueChild:true,
}
},
methods:{
changeValue(){
this.valueChild = !this.valueChild
}
}
}
</script>
這是博客中的示例代碼铭若。
步驟
-
.sync修飾符監(jiān)聽子組件的 prop --show標(biāo)志位。 - 子組件的模板在頁面中添加了一個(gè)由
show控制是否顯示的一個(gè)段落和一個(gè)按鈕的div递览，show初始值為true叼屠，代表顯示這個(gè)div。 - 當(dāng)點(diǎn)擊關(guān)閉按鈕調(diào)用 closeDiv() 觸發(fā)事件绞铃，使
show變?yōu)閒alse镜雨，而 updata:show 將數(shù)據(jù)更新，使得 div 不顯示儿捧。 - 再去點(diǎn)擊父組件 toggle 按鈕將標(biāo)志位取反為true荚坞，讓這塊div重新顯示。
<myComponent :show.sync='valueChild' />
<!-- 等價(jià)于 -->
<myComponent :show='valueChild' v-on:'update:show'="valueChild=$event"/>
