---

🐌個(gè)人主頁： 🐌 葉落閑庭
💨我的專欄：💨
c語言
數(shù)據(jù)結(jié)構(gòu)
javaEE
操作系統(tǒng)
Redis

石可破也，而不可奪堅(jiān)；丹可磨也，而不可奪赤。

---

一、 Vue快速入門

• 1.新建HTML頁面，引入Vue.js文件

<script src="js/vue.js"></script>

• 2.在JS代碼區(qū)域，創(chuàng)建Vue核心對(duì)象，進(jìn)行數(shù)據(jù)綁定

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",data() {return {username:""}}});
</script>

• 3.編寫視圖

<div id="app"><input v-model="username"><!-- 插值表達(dá)式 -->{{username}}</div> 

二、Vue常用指令

• 指令：HTML標(biāo)簽上帶有Vs前綴的特殊屬性，不同指令具有不同含義。例如：V-if,V-for…
• 常用指令：

指令	作用
v-bind	為HTML標(biāo)簽綁定屬性值，如設(shè)置href,css樣式等
v-model	在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定
v-on	為HTML標(biāo)簽綁定事件
v-if	條件性的渲染某元素，判定為true時(shí)渲染，否則不渲染
v-else	條件性的渲染某元素，判定為true時(shí)渲染，否則不渲染
v-else-if	條件性的渲染某元素，判定為true時(shí)渲染，否則不渲染
v-show	根據(jù)條件展示某元素，區(qū)別在于切換的是display屬性的值
v-for	列表渲染，遍歷容器的元素或者對(duì)象的屬性

2.1 v-bind&v-model

<div id="app"><a v-bind:href="url">點(diǎn)擊</a><input v-model="url"></div>    

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",data() {return {username:"",url:"http:www.baidu.com"}}});
</script>

2.2 v-on

<div id="app"><input type="button" value="按鈕" v-on:click="show()"><br><input type="button" value="按鈕" @click="show()"></div> 

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",methods:{show() {alert("我被點(diǎn)了");}}});
</script>

2.3 v-if

<div id="app"><div v-if="count==1">div1</div><div v-else-if="count==2">div2</div><div v-else>div3</div><input v-model="count">
</div>    

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",data(){return {username:"",count:3}}});
</script>

2.4 v-show

<div id="app"><input v-model="count"><div v-show="count==4">div4 v-show</div>
</div>    

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",data(){return {username:"",count:3}}});
</script>

2.5 v-for

• v-for內(nèi)addr是自定義參數(shù)，addrs表示Vue返回的數(shù)組addrs[“北京”,“上?！?“廣州”]

<div id="app"><div v-for="addr in addrs">{{addr}}<br>
</div>  

<script>//1.創(chuàng)建vue對(duì)象new Vue({el:"#app",data(){return {username:"",count:3,addrs:["北京","上海","廣州"]}}});
</script>

加索引：

<div id="app"><div v-for="(addr,i) in addrs">{{i + 1}} -- {{addr}}<br>
</div>   

三、Vue的生命周期

• Vue的生命周期分為八個(gè)階段，每觸發(fā)一個(gè)生命周期事件，會(huì)自動(dòng)執(zhí)行一個(gè)生命周期的方法

狀態(tài)	階段周期
beforeCreate	創(chuàng)建前
created	創(chuàng)建后
beforeMount	載入前
mounted	掛載完成
beforeUpdate	更新前
updated	更新后
beforeDestory	銷毀前
desoryed	銷毀后

• mounted:掛載完成，Vue初始化成功，HTML頁面渲染成功。
• • 發(fā)送異步請(qǐng)求，加載數(shù)據(jù)