Vue的模版語(yǔ)法
我們把HTMl模版叫做template蠕趁。
template的3種寫(xiě)法
1' Vue完整版,寫(xiě)在HTML里
html
<div id=xxx>
{{n}}
<button @click="add"> + 1 </button>
</div>
new Vue({ //把html變成DOM節(jié)點(diǎn)
el:'#xxx',
data:{n:0}, //data可以改成函數(shù)
methods:{
add(){}
}
})
2' Vue完整版,寫(xiě)在選項(xiàng)里
<div id='app'>
</div>
new Vue({
template:`
<div>
{{n}}
<button @click="add"> + 1 </button>
</div>
`,
data:{n:0}, //data可以改成函數(shù)
methods:{ add(){ this.n +=1 } }
}).$mount('#app')
注意細(xì)節(jié):
(1)div#app會(huì)被替代
new Vue({})運(yùn)行后垃它，template里面的<div>會(huì)替換掉頁(yè)面的<div id='app'>,渲染完后就沒(méi)有id='app'的<div>了。
(2) el:'#xxx'可以替換成new Vue({}).$mount('#app')
3' Vue非完整版,配合x(chóng)xx.vue文件
第1步.寫(xiě)xxx.vue文件
<template>
<div> //這里一般不需要id,id一般是用來(lái)掛載的肉盹，這里不需要
{{n}}
<button @click="add">
+1
</button>
</div>
</template>
注意:<template>里面不是HTML而是 XML
<script>
export default { //默認(rèn)導(dǎo)出一個(gè)選項(xiàng)(構(gòu)造選項(xiàng))
data(){ return {n:0} },//data必須為函數(shù)昔驱，這個(gè)函數(shù)返回的對(duì)象就是我們要用的data
methods:{add(){ this.n += 1 }}
}
</script>
<style>
這里寫(xiě) CSS
</style>
第2步.在另外一個(gè)地方寫(xiě)如下代碼
import Xxx from './xxx.vue'
//首字母大寫(xiě)防沖突，Xxx是一個(gè)options對(duì)象
new Vue({
render: h => h(Xxx) //Xxx傳給Vue的render函數(shù)
}).$mount('#app')
Xxx就是導(dǎo)出的對(duì)象 export default { 對(duì)象 }
HTML與XML的區(qū)別:
XML書(shū)寫(xiě)更嚴(yán)格:所有空標(biāo)簽都可以直接閉合上忍，比如<div />骤肛，必須寫(xiě)/。
因此XMl語(yǔ)法更容易寫(xiě)編譯器窍蓝。
模版里有哪些語(yǔ)法腋颠？
一.展示內(nèi)容
1.表達(dá)式
{{ object.a }} 表達(dá)式。data里面的object.a
{{ n+1 }} 可以寫(xiě)任何運(yùn)算它抱。但不支持if...else
{{ fn(n) }} 可以調(diào)用函數(shù)秕豫。默認(rèn)在methods里找叫fn的函數(shù)，并傳了參數(shù)n
當(dāng)值是`undefined 或 null`時(shí),它就什么都不展示,它不會(huì)顯示undefined和
null观蓄，這是Vue的特殊處理混移。
另一種寫(xiě)法為<div v-text="表達(dá)式"></div> 很少有人用
2.HTMl內(nèi)容
指令v-html=""，支持內(nèi)容里有html標(biāo)簽侮穿。
假設(shè)data.x值為<strong>hi</strong>
<div v-html="x"></div>即可顯示粗體的hi
3.我就想在頁(yè)面中展示{{n}}怎么辦歌径？
<div v-pre> {{ n }} </div> //v-pre不會(huì)對(duì)模版進(jìn)行編譯
二.綁定屬性
1.綁定字符串
綁定src:<img :src="x" />
補(bǔ)充:<img v-bind:src="x" />其中v-bind:可以簡(jiǎn)寫(xiě)為:
2.綁定對(duì)象
<div
:style="{border:'1px solid red',height:100}">
</div>
//注意在這里可以把'100px'寫(xiě)成100
//補(bǔ)充:JS中100就是100px div.style.height=100 //'100px'
//這種寫(xiě)法會(huì)在div上寫(xiě)一個(gè)內(nèi)聯(lián)樣式
三.綁定事件 v-on
v-on就是在什么時(shí)候觸發(fā)事件。
v-on:事件名
[圖片上傳失敗...(image-a9684b-1649271111233)]
縮寫(xiě)<button @click=""add> +1 </button>
四.條件判斷 v-if
<div v-if="x>0">
x大于0
</div>
<div v-else-if="x===0">
x為0
</div>
<div v-else>
x小于0
</div>
v-if是什么時(shí)候出現(xiàn)在DOM樹(shù)里亲茅。
五.循環(huán) v-for
for(value,key)in 對(duì)象或數(shù)組
注意:每一個(gè)v-for必須有:key="" 綁定一個(gè)變量回铛，不寫(xiě)就會(huì)有警告！
數(shù)組的例子
<ul>
<li v-for="(u,index) in users" :key="index">
索引:{{index}} 值:{{u.name}}
</li>
</ul>
對(duì)象的例子
<ul>
<li v-for="(value, name) in obj" :key="name">
屬性名:{{name}},屬性值:{{value}}
</li>
</ul>
六.顯示克锣、隱藏 v-show
<div v-show="n%2===0"> n是偶數(shù) </div>
//表達(dá)式如果是真的就顯示<div>茵肃，負(fù)責(zé)就不顯示<div>。if...else的簡(jiǎn)化版
//如果是假的<div>就不會(huì)出現(xiàn)在頁(yè)面
v-show是什么時(shí)候展示出來(lái)袭祟，是通過(guò)css隱藏的验残。
七.v-once
只渲染元素和組件一次。隨后的重新渲染巾乳，元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)您没。這可以用于優(yōu)化更新性能鸟召。
<!-- 單個(gè)元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
總結(jié)
Vue模版主要特點(diǎn)有
1.使用XML語(yǔ)法(不是HTML)
2.使用{{}}插入表達(dá)式
3.使用v-html、v-on氨鹏、v-bind等指令操作DOM
4.使用v-if欧募、v-for等指令實(shí)現(xiàn)條件判斷和循環(huán)
指令與修飾符
一.指令Directive
1.什么是指令
以v-開(kāi)頭的東西就是指令。
2.語(yǔ)法
[圖片上傳失敗...(image-ec6998-1649271111233)]
<a @click.prevent href="">百度</a>
二.修飾符
用來(lái)修飾一個(gè)指令的就叫修飾符仆抵，比如.prevent跟继。
有些指令支持修飾符，但有些不支持镣丑，看文檔还栓。
[圖片上傳失敗...(image-5fcfa2-1649271111233)]
1.添加修飾符
v-on支持的修飾符最多，比如.keycode
需求:如果用戶(hù)打回車(chē)就單獨(dú)給它個(gè)邏輯传轰。
new Vue({
template: `
<div>
<input @keypress.13="y"/>
<!--<input @keypress.enter="y"/>-->
</div>
`,
methods: {
y(e) {
console.log(e);
console.log("用戶(hù)打了回車(chē)鍵");
}
}
}).$mount("#app");
<input @keypress.13="y"/>或者<input @keypress.13=y />
2.縮寫(xiě)alias
鍵盤(pán)編碼難記可以用縮寫(xiě)alias，查看支持的按鍵碼
<input @keypress.enter="y"/> //給13取個(gè)別名enter
[圖片上傳失敗...(image-70e4f3-1649271111233)]
上面這幾個(gè)都不用記編碼谷婆，可以直接用別名慨蛙。
事件修飾符.self(很少用)
用戶(hù)點(diǎn)的元素正好是你監(jiān)聽(tīng)的那個(gè)元素才會(huì)觸發(fā)，如果是元素里面的元素不會(huì)觸發(fā)纪挎。
知識(shí)點(diǎn)
1.事件
input輸入事件
只要輸入東西到input里都會(huì)觸發(fā)事件<input @input="y"/>
keypress鍵盤(pán)按下事件
只要按下鍵盤(pán)就會(huì)觸發(fā)事件y <input @keypress="y"/>
2..prevent阻止默認(rèn)動(dòng)作
<a @click.prevent='x' >百度</a>
3..stop阻止事件傳播/冒泡
@click.stop='add'
.sync 修飾符(重要)
main.js
// 此處是非完整版vue
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div class="app">
App.vue 我現(xiàn)在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/>
//<Child :money.sync="total" />
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
Child.vue
//子組件
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
<span>花錢(qián)</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child { border: 3px solid green; }
</style>
解析:
1.main.js渲染了App,App是個(gè)組件期贫。
2.App.vue
紅色邊框是App組件。
<Child />是子組件從文件Child.vue來(lái)的异袄，import Child from "./Child.vue"; 使用時(shí)要聲明下components: { Child: Child }告訴它總金額就1萬(wàn)total: 10000再多沒(méi)有通砍。
3.Child.vue
<Child />需要接收這筆錢(qián)，props: ["money"]外部數(shù)據(jù)money烤蜕，所以App.vue<Child :money="total" />把總金額告訴Child.vue封孙。
當(dāng)點(diǎn)擊button時(shí)就是要花錢(qián)，花的是他爸的錢(qián)(操作外部數(shù)據(jù))所以不能<button @click="money -=100">自己操作數(shù)據(jù)讽营。
MVC章節(jié)講過(guò)訂閱發(fā)布系統(tǒng)eventBus虎忌，Vue內(nèi)置了eventBus,所以我們可以使用當(dāng)前實(shí)例this,this就是當(dāng)前實(shí)例，當(dāng)前實(shí)例繼承了eventBus橱鹏，所以它可以觸發(fā)一個(gè)事件膜蠢。所以@click="this.$emit"，因?yàn)樵赩ue template里this可以刪掉所以<button @click="$emit('useMoney',money-100)">
他爸就要監(jiān)聽(tīng)他兒子要不要錢(qián)莉兰，如果發(fā)現(xiàn)兒子觸發(fā)了我要錢(qián)挑围，那就把他花的錢(qián)賦值給我的data的total，那我怎么知道兒子給我的錢(qián)是多少呢糖荒？尤雨溪把這個(gè)值存到變量上杉辙，你只要使用這個(gè)就可以了，這個(gè)變量就是$event寂嘉。原理:把它的那個(gè)值先存到我的組件$event上奏瞬，用時(shí)自己取枫绅。所以App.vue<Child :money='total' v-on:useMoney = "total = $event"/>
尤雨溪規(guī)定要把事件名改為'update:money'
有人在<Child/>上調(diào)用了on,有人在<Child/>上調(diào)用了$emit,這就是事件的發(fā)布和訂閱。
這種方法很常見(jiàn)硼端，v-on:update:money = "total = $event"監(jiān)聽(tīng)事件(update:money)獲取$event并淋，所以被封裝成了修飾符.sync。
寫(xiě)法
<Child :money.sync='total'/>
//等于<Child :money='total' v-on:useMoney = "total = $event"/>
.sync這種寫(xiě)法就是一個(gè)語(yǔ)法糖或者API糖珍昨。
總結(jié)
@click.stop="xxx"
@click.prevent="xxx"
@keypress.enter="xxx"
:money.sync="total"
