1幽勒、
mounted 當(dāng)頁面加載完自動(dòng)執(zhí)行的函數(shù)
setInterval 定時(shí)器方法
mounted() { //當(dāng)頁面加載完成自動(dòng)執(zhí)行的函數(shù)
setInterval(() => {
this.content += 1 //this.content 就是this.$data.content
},1000),
console.log('mounted')//自動(dòng)執(zhí)行惫东，
},
2伴找、v-
v-on ：綁定事件
v-on:click = ""
v-if：隱藏與顯示
v-if="show"
v-for：遍歷數(shù)組
v-for=""
<li v-for="(item,index) of list">{{item}} {{index}}</li>
v-model：雙向綁定
v-model：輸入框內(nèi)容和value值進(jìn)行雙向綁定
<input v-model="inputValue"></input>
3愿卒、
v-bind ：標(biāo)簽屬性跟值進(jìn)行綁定
多個(gè)綁定挟纱，則需要寫多個(gè)v-bind
<todolist v-for="(item,index) of list" v-bind:content="item" v-bind:indexItem="index" />
拆分vue組件：
先注冊vue實(shí)例 ：const app = Vue.createApp({})
在拆分component組件
app.component( 'todolist',{
// data() {
// return {
// item:"hello dell"
// }
// },
//外部傳參
props:["content","indexItem"],
template:'<li>{{indexItem}} -- {{content}}</li>'
});
props：進(jìn)行組件傳參定義万皿；
一個(gè)組件寫法跟一個(gè)跟vue最初實(shí)例方法是類似的撕氧，包含數(shù)據(jù)data瘤缩，以及渲染的結(jié)構(gòu)，邏輯呵曹。
最后掛載mount root上
app.mount('#root');
4款咖、面向數(shù)據(jù)編程，數(shù)據(jù)模版關(guān)聯(lián)起來奄喂，參考mvvm模式
createApp表示創(chuàng)建一個(gè)應(yīng)用,存儲在app變量中铐殃。
一個(gè)網(wǎng)頁應(yīng)用是由一個(gè)個(gè)組件組成的
//vm表示vue應(yīng)用的根組件
const vm = app.mount('#root');
5、vue生命周期
生命周期函數(shù)：在某一時(shí)刻自動(dòng)執(zhí)行的函數(shù)
//在實(shí)例執(zhí)行之前執(zhí)行的函數(shù)
beforeCreate(){
console.log('beforeCreate')
},
//實(shí)例創(chuàng)建之后執(zhí)行的函數(shù)
created() {
console.log('created')
},
//組件被渲染到頁面之前執(zhí)行的函數(shù) 【在模版被編譯成函數(shù)之后】
beforeMount() {
console.log('beforeMount')
},
//組件被渲染完成之后執(zhí)行的函數(shù)
mounted() {
console.log('mounted')
},
//當(dāng)data中數(shù)據(jù)發(fā)生變化會執(zhí)行
beforeUpdate(){
console.log('beforeUpdate')
},
//當(dāng)data數(shù)據(jù)發(fā)生變化跨新，同時(shí)頁面完成更新時(shí)富腊，才會執(zhí)行
updated() {
console.log('updated')
},
//當(dāng)vue應(yīng)用失效時(shí)，自動(dòng)執(zhí)行的函數(shù)
beforeUnmount() {
console.log('beforeUnmount')
},
//當(dāng)應(yīng)用失效時(shí)域帐，且dom完全銷毀之后赘被，自動(dòng)執(zhí)行的函數(shù)。
unmounted() {
console.log('unmounted')
},
當(dāng)創(chuàng)建實(shí)例中有template肖揣，則把其當(dāng)作模版民假；
如果沒有，就把root結(jié)點(diǎn)下的dom當(dāng)作模版來龙优；
6羊异、
title標(biāo)簽：鼠標(biāo)點(diǎn)上去顯示的title內(nèi)容
template:'<div v-bind:title="message">hello world</div>'
v-html：可以展示一個(gè)html的字段樣式
v-once：數(shù)據(jù)變化也會根據(jù)數(shù)據(jù)變化去重新做渲染
v-on:click = "" 等價(jià)于 @click = ""
v-bind:title = "" 可以簡寫為:title = ""
阻止按鈕行為一：form添加click，click方法中寫：e.preventDefault();
阻止行為方式二： 修飾符語法：@click.prevent="handleItemClick"
7、data數(shù)據(jù) && 方法methods && 計(jì)算屬性computer && watcher監(jiān)聽器
（1）methods 不僅可以在點(diǎn)擊方法中用野舶，也可以在插值表達(dá)式中用易迹；
注意：當(dāng)法：只要頁面重新渲染，才會重新計(jì)算
（2）computer：計(jì)算屬性：當(dāng)計(jì)算屬性依賴的內(nèi)容發(fā)生變化平道，才會重新執(zhí)行計(jì)算睹欲；
computered() {
return total = this.count * this.price
},
（3）watcher：監(jiān)聽某個(gè)值，發(fā)生變化進(jìn)行函數(shù)調(diào)用一屋；異步操作較方便
watch:{
price() {
//price價(jià)格變了窘疮，3秒鐘后打印日志
setTimeout(() =>{
console.log('price change')
},3000
)
}
},
總結(jié)：
（1）coomputer和method都能實(shí)現(xiàn)的一個(gè)功能，建議使用computer陆淀，因?yàn)橛芯彺妗?br>
（2）computer和watcher都能實(shí)現(xiàn)的一個(gè)功能考余，建議使用compuuter，因?yàn)楦啙崱?/p>
8轧苫、樣式綁定
<!-- 1楚堤、通過字符串：直接加樣式，上面scrpit標(biāo)簽加<style></style> 樣式定義含懊，下面模版直接加class="red"就好了身冬。 -->
<!-- 2、可以通過對象：classObject:{red:true,green:false} 岔乔， -->
<!-- 3酥筝、可以通過數(shù)組:classArray:['red','green',{brow:flase}] -->
<!-- 4、子組件如果多個(gè)div雏门，父組件樣式會針對哪個(gè)子組件呢嘿歌，可以通過在子組件中 class="$attrs.class" 來表示子組件用父組件的樣式 -->
<!-- 5、行內(nèi)也能直接加樣式茁影，<div style="color:yellow"></div> -->
<!-- 6宙帝、data中定義字符串或者定義對象來使用樣式，推薦使用對象：
styleObject:{
color:'blue',
background:'red',
}
-->
9募闲、條件渲染：v-if步脓，v-show，v-else浩螺，v-if-else區(qū)別
<!-- 1靴患、v-if控制div的顯示隱藏，是通過控制dom上元素存在與否來控制的 -->
<!-- 2要出、v-show通過style樣式來控制的鸳君，通過display：none來設(shè)置隱藏 -->
<!--
3、v-if患蹂，v-else用法：
<div v-if="conditionOne">if</div>
<div v-else>else</div>
-->
<!--
4或颊、if-else-if用法：
<div v-if="conditionOne">if</div>
<div v-else-if="conditionTwo">elseif</div>
<div v-else>else</div>
-->
10腿时、循環(huán)數(shù)組、循環(huán)對象饭宾、修改數(shù)組、修改對象內(nèi)容
1格了、修改數(shù)組
（1）數(shù)組變更：使用數(shù)組的變更函數(shù)：push看铆，pop等函數(shù)
eg：
<!-- 盡量給個(gè)key，提升性能盛末，盡量復(fù)用 -->
<!-- push函數(shù)：增加元素 -->
<!-- pop函數(shù)：從下標(biāo)大的往小的挨著刪除 -->
<!-- shift函數(shù)：往開頭刪除內(nèi)容 -->
<!-- unshift函數(shù)：從頭開始新增元素 -->
<!-- rverse函數(shù)：取反 -->
<!-- splice函數(shù)：對一部分內(nèi)容做變更 :list.splice(index,len,item) 數(shù)組下標(biāo)弹惦，替換長度，替換的值悄但，棠隐，，刪除的話item為空就好了-->
<!-- sort函數(shù)：進(jìn)行排序 -->
（2）替換數(shù)組
this.list = ["one",'two']
（3）直接更新數(shù)組內(nèi)容
this.list[1] = 'hello'
2檐嚣、修改對象
（1）直接添加對象內(nèi)容
this.listobject.age = 100;
this.listobject.sex = 'male'
（2）循環(huán)對象遍歷顯示助泽，篩選key 不為lastname的元素
<li>循環(huán)對象</li>
<div v-for="(value,key,index) in listobject">
<div v-if="key !== 'lastName'">{{value}} -- {{key}} -- {{index}}</div>
//此處不展示key為lastname的元素
</div>
v-for 和 v-if同時(shí)判斷，v-for優(yōu)先級會更高嚎京；
可以在div中嵌套一個(gè)div去寫v-if嗡贺，也可以用tmplate去替代外層div，
template代表一個(gè)占位符鞍帝，不會進(jìn)行渲染dom诫睬。
10、事件綁定 && 事件修飾符
事件綁定：可以mothods添加方法帕涌，也能!@click="表達(dá)式"
1摄凡、直接method 方法添加cunter+=1
2、button click中直接寫表達(dá)式蚓曼，不去添加方法
3亲澡、button click多個(gè)方法時(shí)，可以這樣添加：@click="addAction(),addAction1()"
事件修飾符：
冒泡：從內(nèi)到外
捕獲：從外到內(nèi)
事件修飾符：
1辟躏、 @click.stop ：表示停止向上冒泡事件 (不加的話谷扣，click事件會響應(yīng)buttn事件，同時(shí)上層div有click事件也會響應(yīng))
2捎琐、 @click.self ：表示是不是當(dāng)前div標(biāo)簽觸發(fā)的事件会涎，如果是自己dom標(biāo)簽才執(zhí)行，子標(biāo)簽觸發(fā)不執(zhí)行的瑞凑；
類似還有：@click.prevent 阻止事件默認(rèn)行為末秃， @click.capture 改變冒泡順序 ，@click.once只執(zhí)行一次籽御， passive
11练慕、其他修飾符
按鍵修飾符：
keydown:按鍵事件的綁定
1惰匙、<input @keydown="addAction" /> 隨著鍵盤輸入內(nèi)容去執(zhí)行方法
2、<input @keydown.enter="addAction" /> 按下enter 去執(zhí)行方法
類似還有：tab铃将，delete项鬼，esc,up,down,left,right,
鼠標(biāo)修飾符：
left，right劲阎，middle
@click.left
精確修飾符：
exact：
例如：@click.ctrl 指的是按住control再點(diǎn)擊會執(zhí)行方法绘盟，
@click.ctrl.exact 指的是只有按住conntrol+點(diǎn)擊，才會去執(zhí)行方法
12悯仙、雙向綁定：input龄毡，textarea，checkbox锡垄，radio
1沦零、 input 表單項(xiàng)跟數(shù)據(jù)進(jìn)行雙向綁定，數(shù)據(jù)變化輸入框也變了货岭，輸入框變化路操，數(shù)據(jù)也變了
2、textarea 跟input一樣,v-model跟數(shù)據(jù)進(jìn)行雙向綁定茴她。vue底層為其進(jìn)行了雙向綁定寻拂。
eg:<textarea v-model="message"/>
3、checkbox 多選框 :<input type="checkbox" v-model="message" />
true-value:設(shè)置true狀態(tài)為某個(gè)字符串
false-value:設(shè)置false狀態(tài)為某個(gè)字符串
eg:true-value="hello"
4丈牢、多個(gè)checkbox的話：可以在data中用數(shù)組去存儲v-model祭钉，以保存多個(gè)checkbox的值。
同時(shí)需要設(shè)置checkbox的value值
<div>
{{message}}
jack <input type="checkbox" v-model="message" value="jack" />
dell <input type="checkbox" v-model="message" value="dell" />
lee <input type="checkbox" v-model="message" value="lee" />
</div>
5己沛、radio：單選框慌核，只能選擇一個(gè)，初始值給個(gè)字符串就行
eg:jack <input type="checkbox" v-model="message" value="jack" />
6申尼、select：下拉選擇框垮卓，opotion是選項(xiàng)內(nèi)容，v-model進(jìn)行值綁定，默認(rèn)值設(shè)置字符串。
multiple:select設(shè)置多選漂彤。
<select v-model="message">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
-----------------------------------------------------------
options:[
{text:"A",value:"AAAA"},
{text:"B",value:"BBBB"},
{text:"C",value:"CCCC"},
]
<div>
<select v-model="message">
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
<li>{{message}}</li>
</div>
多個(gè)選項(xiàng)存放在數(shù)組里，遍歷去拿數(shù)據(jù)灭将。
注：:value 【如果后面是表達(dá)式，需要加冒號后控，否則顯示字符串內(nèi)容】
13庙曙、其他修飾符
7、lazy修飾符：v-model.lazy="message" 取消焦點(diǎn)才去執(zhí)行賦值
<input v-model.lazy="message" />
number修飾符：v-model.number="message" 將數(shù)值轉(zhuǎn)化為number類型再去賦值
<input v-model.number="message" type="number"/>
trim修飾符：v-mdel.trim="message" 賦值前去掉空格,只是去除前后空格浩淘，字符串中間空格是不去除的捌朴；
<input v-model.trim="message" />
