模板template
三種寫法
1战授、vue完整版中 寫在index.html中
<div id=xxx>
{{n}}
<button @click = "add">+1</button>
</div>
new Vue({
el:'#xxx',
data:{n:0}页藻，//寫成函數(shù)
metnods:{add(){}}
})
2桨嫁、寫在選項中,div#app會被替換掉
<div id=app>
</div>
new Vue({
template:`
<div>
{{n}}
<button @click = "add">+1</button>
</div>
`
data:{n:0}植兰，//寫成函數(shù)
metnods:{add(){this.n+=1}}
}).$mount('#app')//el的第二種寫法
3、非完整版璃吧，配合xxx.vue
xxx.vue
<template>
<div>
{{n}}
<button @click = "add">+1</button>
</div>
</template>
<script>
export default {
data(){return:{n:0}},
metnods:{add(){this.n+=1}}
}
</script>
<style> </style>
main.js
import xxx from "./xxx.vue"
new Vue({
render : h => h(xxx)
}).$mount('#app')
- template 標簽里面不是HTML而是XML是兩種不同的語言
- 不同在于在XML里面有閉合標簽一說
HTML可加可不加/
<input name = "username"> HTML
<input name = "username"/> HTML(更為松散一些楣导，也可以閉合)
<input name = "username" / > XML
空div
<div></div>HTML
<div / >XML 自閉和標簽
XML更容易寫編譯器 所以尤雨溪選擇這種語言表示HTML
script標簽寫法和之前的new Vue寫法一樣，默認導(dǎo)出一個選項畜挨。
不需要template寫了會覆蓋 data必須為函數(shù)
組件名首字母最好大寫（不會和原生的一些東西產(chǎn)生沖突 <button> <Button> 不是一回事）
我們使用xxx.vue 一般都是非完整版
所以只能傳給new Vue的 render h
Vue模板中的語法
1筒繁、展示內(nèi)容
展示普通文本
{{object.a}} //表達式 把構(gòu)造選項中的data里面的object.a展示出來
{{n+1}} //運算
{{f(n)}} //調(diào)用函數(shù)，默認methods中找
如果值為undefined 或 null就不顯示
沒人用的寫法
<div v-text="bject.a(和上面寫法一樣)"></div>
展示HTML內(nèi)容
v-html指令 支持內(nèi)容中有HTML標簽
data.x = <strong>hi</strong>
<div v-html="x"></div>
顯示就是粗體的hi
我就想展示兩個花括號 {{n}}
v-pre指令 不會對模板進行編譯
<div v-pre="x"> {{n}}</div>
2巴元、綁定屬性
綁定src屬性 標準寫法 v-bind 綁定
x=URL
<img v-bind:src = 'x'/>
簡寫
<img :src = 'x'/>
綁定對象(綁定一個style毡咏，style等于一個對象)
“100px” 可默認寫成 100
<div
:style="{border:'1px solid red',height:“100px”}"
>
3、綁定事件
v-on:事件名
<button v-on:click = "add">+1 <button/>
點擊之后Vue會運行add()
<button v-on:click = "xxx(1)">xxx <button/>
點擊之后Vue會運行xxx(1)
<button v-on:click = "n+=1">n+=1 <button/>
點擊之后Vue會運行n+=1
發(fā)現(xiàn)函數(shù)就加括號掉用函數(shù) add()
否則就直接運行xxx(1)逮刨、n+=1
里面也是不支持if 啥的 可以用問好冒號表達式
縮寫
<button @click = "add">+1 <button/>
4呕缭、條件判斷
if...else
<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else="x<0">x小于0</div>
如果x 大于0就顯示這個div
如果等于0就顯示第二個
其他所有情況顯示i第三個
5、循環(huán)
for(value,key)in對象或數(shù)組
v-for后面必須跟:key = "xxx"否則會有警告
一般后面那個key不能用會重合 的 對象里的 value會重合
a =1
b=1 就重合了
展示user
<ul>
<li v-for = "(u,index)in users" :key = "index">
索引：{{index}} 值：{{u.name}}
</li>
</ul>
把user里的每一項用 u和index代替
u表示數(shù)組每一個值
index表示下標
遍歷對象
<ul>
<li v-for = "(value,name)in users" :key = "name">
屬性名：{{name}} 值：{{value}}
</li>
</ul>
:key = 'index'有bug
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
7睬愤、其他
v-model 在vue 表單中
v-slot在vue 插槽中
v-cloak v-once 看文檔
總結(jié)
- 使用XML
- 使用{{插入表達式}}
- 使用 v-html v-on v-bind 等指令操作DOM
比如
聲明式編程 <div v-html="x"></div>
會變成
命令式編程div.innerHtml = 'x' - 使用 v-if v-for 等指令實現(xiàn)條件判斷和循環(huán)
指令Directive
- <div v-show="n%2===0">n是偶數(shù)</div>
就是我指令這個div 在什么時候展示出來（通過css隱藏的 與if 不同） - v-for 命令li什么時候循環(huán)
- v-if 命令div什么時候出現(xiàn)在dom樹里面
Vue中 以 v-開頭的東西就是指令
語法
v-指令名：參數(shù) = 值
值中沒有特殊字符可以不加引號
有些指令沒有參數(shù)和值 如v-pre
有些指令沒有值
如v-on:click.prevent 可以沒有值
prevent阻止默認事件
可以有值
v-on:click.prevent = x
阻止默認點擊事件 點擊之后運行x
其中這個prevent叫做修飾符
修飾符
修飾符是用來修飾指令的
哪些指令支持修飾符
@click.stop = "add" 表示阻止事件 傳播/冒泡
@click.prevent= "add" 表示阻止默認動作
@click.stop .prevent= "add" 同時阻止
v-on 支持的有 .{keycode|keyAlias}
<input @input = 'y'>
input 支持input事件 輸入事件
就是用戶輸入的東西 不管鼠標復(fù)制 還是鍵盤輸入的 就執(zhí)行y
怎么得到用戶輸入的內(nèi)容呢 事件
e.target.value
y(e){
console.log(e.target.value)
}
keypress鍵盤按下事件片仿。
<input @keypress.13 = 'z'>
z(e){
if(e.keyCode === 13){
console.log('用戶打了回車')
}
}
你可以直接
<input @keypress.13 = 'z'> 鍵盤按下13就執(zhí)行y,不需要你用if判斷了
z(e){
console.log('用戶打了回車')
}
但是每個鍵位的數(shù)字很難記
就可以使用Alias 別名（縮寫）
回車的Alias 就是 enter
具體查看：
按鍵修飾符
v-on還支持 .stop .prevert .caputer .self .once .passive .native 具體看文檔
快捷鍵相關(guān)： .ctrl .alt .shift .meta .exact 只在按下這些快捷鍵的時候才會觸發(fā)鼠標或鍵盤事件的監(jiān)聽
鼠標相關(guān)：.left .right .middle
v-bind 支持的有
.prop .camel .sync
v-model支持的有(vue表單中)
.lazy .number .trim
主要記住
.stop .prevert .sync
.sync修飾符
.sync舉例
.sync修飾符場景描述
爸爸給兒子錢，兒子要花錢怎么辦尤辱，示例
答∶兒子打電話（觸發(fā)事件）向爸爸要錢
Vue規(guī)則∶組件不能修改props外部數(shù)據(jù)
Vue規(guī)則∶$emit可以觸發(fā)事件砂豌，并傳參
Vue規(guī)則∶$event可以獲取$emit的參數(shù)
∶money.sync="total"等價于
:money="total"v-on:update:money="total=Sevent"
由于這種場景（我把數(shù)據(jù)給你厢岂，但是你要改的話你得通知我改）很常見所以尤雨溪發(fā)明了.sync，示例
<Child :money="total"/> 個Child傳外部數(shù)據(jù)
在child中 不能使用money-100 因為money是外部的數(shù)據(jù)（父組件還會更新回來的 你改了沒用）
<button @click="$emit('update:money', money-100)">
得到 update:money 事件 參數(shù)是money-100
父組件 監(jiān)聽這個事件 v-on : update:money = “total =event不是this上的
思路：
爸爸給兒子錢:money="total"
兒子可以看到money 但是它想花錢不能直接money-100
而是觸發(fā)一個事件$emit('update:money'
它爸爸發(fā)現(xiàn)兒子要花錢了阳距，就會把兒子傳來的參數(shù)money-100 更新到錢上
有人在child調(diào)用了on
有人在child調(diào)用了emit
這就是事件的發(fā)布和訂閱
.sync 的意思就是同步 如果想要同步回來 我?guī)湍阃?br>
sync就是語法糖 咪笑，還是要按下面理解
∶money.sync="total"等價于
:money="total"v-on:update:money="total=Sevent"
總的來說 修飾符 最重要的有
@click.stop = "xxx'
@click.prevent = "xxx'
@keypress.enter = "xxx'
∶money.sync="total"
