vue生命周期和組件
1.事件
1）函數(shù)內(nèi)部阻止事件冒泡 e.cancelBubble=true;2）標(biāo)簽內(nèi)阻止事件冒泡 @click.stop=“show1()”3）鍵盤事件 keydown 函數(shù)中獲取鍵盤編碼keyCode4）在標(biāo)簽內(nèi)直接綁定按鍵事件 @keyup.13=“show()” @keyup.enter=“show()”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<div @click='fu()'>
父元素
<!--第一種阻止事件冒泡的寫法-->
<!--<button @click.stop='zi()'>子元素</button>-->
<button @click='zi($event)'>子元素</button>
</div>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
methods:{
fu(){
console.log('fu')
},
zi(e){
e.cancelBubble=true;
console.log('zi')
}
}
})
</script>
</html>
一奠伪、生命周期
1.鉤子函數(shù)：指一方面有變動(dòng)，另一方面立馬來(lái)處理這些變動(dòng)的函數(shù)稱為鉤子函數(shù)。
每個(gè)鉤子函數(shù)的this指向哲身，必須指向VUE實(shí)例化對(duì)象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<p>{{info}}</p>
<button @click='update()'>更新</button>
<button @click='tap()'>銷毀</button>
</div>
</body>
<script type="text/javascript">
var vm=new Vue({
el:"#out",
data:{
info:"hello"
},
methods:{
update(){
this.info='hi'
},
tap(){
this.$destroy()//銷毀：數(shù)據(jù)以及事件跟vue實(shí)例做一個(gè)解綁
}
},
beforeCreate(){//用這個(gè)實(shí)現(xiàn)的效果是loading圖的展示
},
created(){//到這里只是創(chuàng)建完了绣檬，并沒(méi)有掛載節(jié)點(diǎn)
console.log(this.info)
},
beforeMount(){//在掛載之前改下數(shù)據(jù)也是可以的
},
mounted(){//掛載完成以后進(jìn)行數(shù)據(jù)的獲取俭缓，axios請(qǐng)求昌屉，關(guān)閉loading
console.log(this.$el)
},
beforeUpdate(){
console.log(1)
},
updated(){//data里的數(shù)據(jù)發(fā)生更改渴语，這兩個(gè)函數(shù)就會(huì)被觸發(fā)
console.log(2)
},
beforeDestroy(){
console.log('xiaohui1')
},
destroyed(){//銷毀必須調(diào)用destroyed的方法才能觸發(fā)
console.log('xiaohui2')
}
})
</script>
</html>
2.生命周期是什么：
vue實(shí)例化對(duì)象或組件對(duì)象從開(kāi)始創(chuàng)建到完全銷毀的一個(gè)過(guò)程被稱為一個(gè)生命周期枯冈。
3.為什么要用它以及神魔時(shí)候去用它毅贮？
因?yàn)閷?shí)例化在創(chuàng)建以及組件在進(jìn)行構(gòu)建的過(guò)程中要發(fā)生一系列的改變，不管是組件數(shù)據(jù)的變更還是組件移除霜幼，都要發(fā)生變更嫩码，這些變更只能借助生命周期提供的函數(shù)進(jìn)行操作，一旦組件或?qū)嵗瘜?duì)象發(fā)生變更的時(shí)候罪既，需要做一些數(shù)據(jù)的處理的情況下铸题，需要管理組件成長(zhǎng)階段里的變更，這時(shí)候必須要用生命周期進(jìn)行管理琢感，因?yàn)樯芷诶锾峁┝算^子函數(shù)丢间，方便對(duì)于組件以及實(shí)例化對(duì)象的變更來(lái)做處理，所以我們要用到生命周期驹针。
4.如何來(lái)用它烘挫？
生命周期大體分為四個(gè)階段：四個(gè)階段分別是什么，每個(gè)階段提供的函數(shù)是什么柬甥，除了這四個(gè)階段意外饮六，因?yàn)楣俜教峁┑氖?1個(gè)，另外三個(gè)鉤子函數(shù)是干神魔的
二苛蒲、組件（重中之重）
1.組件是帶有結(jié)構(gòu)卤橄、樣式以及行為的幾何體
2.兩種寫法：
1）全局寫法：
// 注冊(cè)組件，傳入一個(gè)擴(kuò)展過(guò)的構(gòu)造器Vue.component('my-component', Vue.extend({ /* ... / }))
// 注冊(cè)組件臂外，傳入一個(gè)選項(xiàng)對(duì)象（自動(dòng)調(diào)用 Vue.extend）Vue.component('my-component', { / ... */ })
// 獲取注冊(cè)的組件（始終返回構(gòu)造器）var MyComponent = Vue.component('my-component')
2）私有寫法：
vue實(shí)例化 中 components { ‘組件名’: 組件內(nèi)容 }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>組件</h1>
<v-header></v-header>
<v-con></v-con>
<v-footer></v-footer>
</div>
</body>
<script type="text/javascript">
//全局的組件窟扑，任何實(shí)例化對(duì)象都能用
Vue.component('v-header',Vue.extend({
//在這里這樣用
template:`<div>
<div>hello</div>
<p>{{str}}</p>
<button @click="tap()">事件</button>
</div>`,
data:function(){//組建的數(shù)據(jù)存儲(chǔ)方式
return{
str:'hi'
}
},
methods:{
tap(){
this.str='hello world'
}
}
}))
//簡(jiǎn)寫
var con=Vue.component('v-con',{
template:'<h1>he組件</h1>',
mounted(){
console.log('組件掛載')
}
})
console.log(con)//組件的本質(zhì)是一個(gè)對(duì)象
var vm=new Vue({
el:'#out',
methods:{
},
//私有組件
components:{
'v-footer':{
template:'<h2>私有組件</h2>'
}
}
})
</script>
</html>
三、模板
Vue.js 使用了基于 HTML 的模版語(yǔ)法漏健，允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)嚎货。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循規(guī)范的瀏覽器和 HTML 解析器解析蔫浆。在底層的實(shí)現(xiàn)上殖属， Vue 將模板編譯成虛擬 DOM 渲染函數(shù)。結(jié)合響應(yīng)系統(tǒng)克懊，在應(yīng)用狀態(tài)改變時(shí)忱辅， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上七蜘。
四、用組件封裝一個(gè)點(diǎn)擊登錄的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.toast{
position: fixed;
left: 50%;
top:50%;
background: rgba(0,0,0,.35);
padding: 10px;
border-radius: 5px;
transform: translate(-50%,-50%);
color:#fff;
}
</style>
<body>
<div id="out">
<button @click="tap()">toast提示框</button>
</div>
</body>
<script type="text/javascript">
//目的是點(diǎn)完以后把這個(gè)組件顯示出來(lái)
var Toast=Vue.component('Toast',{
template:`<div class="toast" v-if="isshow">
{{text}}
</div>`,
data(){
return{
text:'登陸成功',
isshow:true,
duration:2000//隔多久隱藏
}
}
})
var toast=function(){
let vueToast=new Toast({//vueToast對(duì)象作用的范圍是新創(chuàng)建的div元素
el:document.createElement("div")
})
//把當(dāng)前作用的dom元素插入到瀏覽器里面
document.body.appendChild(vueToast.$el)
//放到body里面調(diào)用toast函數(shù)這個(gè)組件就可以展示了
setTimeout(function(){
vueToast.isshow=false;
},vueToast.duration)
}
var vm=new Vue({
el:"#out",
methods:{
tap(){
toast()
}
}
})
</script>
</html>
