目錄
- 生命周期
- 計(jì)算屬性
- 自定義方法與屬性
- 數(shù)據(jù)監(jiān)聽
- 動(dòng)畫
- 組件
- slot
- 路由
1.生命周期
用Vue框架舷礼，熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行欲逃。這里借助一個(gè)圖片說明一下生命周期的鉤子函數(shù)赎败。
生命周期
<script>
var vm=new Vue({
el:'#box',
data:{
msg:'well'
},
created:function(){
alert('實(shí)例已經(jīng)創(chuàng)建');
},
beforeCompile:function(){
alert('編譯之前');
},
compiled:function(){
alert('編譯之后');
},
ready:function(){
alert('插入到文檔中');
},
beforeDestroy:function(){
alert('銷毀之前');
},
destroyed:function(){
alert('銷毀之后');
}
});
/*點(diǎn)擊頁面銷毀vue對(duì)象*/
document.onclick=function(){
vm.$destroy();
};
</script>
2.計(jì)算屬性
//computed里面可以放置一些業(yè)務(wù)邏輯代碼禀苦，一定記得return
<div id="box">
a => {{a}}
<br>
b => {世杀}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//業(yè)務(wù)邏輯代碼
return this.a+1;
}
}
});
document.onclick=function(){
vm.a=101;
};
</script>
//computed里的屬性默認(rèn)也可以接收對(duì)象待笑，有set和get方法
<div id="box">
a => {{a}}
<br>
b => {絮记}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
});
document.onclick=function(){
vm.b=10;
};
</script>
3.自定義方法和屬性
var vm=new Vue({
aa:11, //自定義屬性,
show:function(){
alert(1);
},
data:{
a:1
}
}).$mount('#box');
vm.$options.show();
console.log(vm.$options.aa);
console.log(vm.$log()); //可以相當(dāng)于查看vm.$data
4.數(shù)據(jù)監(jiān)聽
可以在數(shù)據(jù)發(fā)生變化的時(shí)候監(jiān)測(cè)處理摔踱，類似angular1的臟處理
a、vm.$watch(name,fnCb); //淺度監(jiān)聽針對(duì)基本值類型
b怨愤、vm.$watch(name,fnCb,{deep:true}); //深度監(jiān)視派敷，可以處理json對(duì)象
<div id="box">
{{a}}
<br>
{}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:111,
b:2
}
});
vm.$watch('a',function(){
alert('發(fā)生變化了');
this.b=this.a+100;
});
</script>
//深度監(jiān)聽撰洗，添加deep=true
<div id="box">
{{json | json}}
<br>
{篮愉}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
json:{name:'strive',age:16},
b:2
}
});
vm.$watch('json',function(){
alert('發(fā)生變化了');
},{deep:true});
document.onclick=function(){
vm.json.name='aaa';
};
</script>
5.動(dòng)畫
vue動(dòng)畫有格式參考，例如想加fade動(dòng)畫效果差导，可以有fade-transition/fade-enter/fade-leave等试躏，不過如果想弄點(diǎn)好看點(diǎn)，建議配合animate.css
<style>
.fade-transition{
transition: 1s all ease;
}
.fade-enter{
opacity: 0;
}
.fade-leave{
opacity: 0;
transform: translateX(200px);
}
</style>
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<div id="div1" v-show="bSign" transition="fade"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
}
});
</script>
//引進(jìn)animate.css
<div id="box">
<input type="button" value="按鈕" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定義所有動(dòng)畫名稱
bounce:{
enterClass:'zoomInLeft',
leaveClass:'zoomOutRight'
}
}
});
</script>
6.組件
使用組件的方式有多種设褐，還可以嵌套（父子級(jí)）冗酿。如果想了解組件之間的關(guān)系埠对，可以安裝vue-devtools插件，它可以從chrome商店直接下載安裝裁替。不過要注意的一點(diǎn)就是项玛，需要翻墻才能下載。
//全局組件弱判， extend方式
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>我是標(biāo)題3</h3>'
});
Vue.component('aaa',Aaa); //注冊(cè)組件
</script>
//局部組件襟沮，extend方式
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'ddddd'
}
}
});
var vm=new Vue({
el:'#box',
components:{ //局部組件
'my-aaa':Aaa
}
});
</script>
//局部組件，components方式
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'
}
}
});
</script>
//全局組件昌腰，components方式
<div id="box">
<my-aaa></my-aaa>
</div>
<script>
Vue.component('my-aaa',{
template:'<strong>好</strong>'
});
var vm=new Vue({
el:'#box'
});
</script>
//模板方式开伏，使用script，類似backbone
<div id="box">
<my-aaa></my-aaa>
</div>
<script type="x-template" id="aaa">
<h2 @click="change">標(biāo)題2->{{msg}}</h2>
</script>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
////模板方式遭商，使用template
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<h1>標(biāo)題1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
//動(dòng)態(tài)切換組件固灵，利用is特性
<div id="box">
<input type="button" @click="a='aaa'" value="aaa組件">
<input type="button" @click="a='bbb'" value="bbb組件">
<component :is="a"></component>
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa組件</h2>'
},
'bbb':{
template:'<h2>我是bbb組件</h2>'
}
}
});
</script>
//嵌套組件（父子組件）
//子級(jí)獲取父級(jí)數(shù)據(jù)用props，props可以用數(shù)組方式忽略類型
<template id="aaa">
<bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
components:{
'bbb':{
props:['mmm','myMsg'], //第一種方式劫流，建議
//props:{ //第二種方式巫玻，如果有-，要寫成駝峰式寫法
// 'm':String,
// 'myMsg':Number
//},
template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>'
}
}
}
}
});
</script>
//父級(jí)獲取子級(jí)數(shù)據(jù)用
//子級(jí)主動(dòng)推送數(shù)據(jù)用vm.$emit(事件名,數(shù)據(jù)) 父級(jí)用@的方式寫事件接收 祠汇，推薦
//此外可以用vm.$dispatch(事件名,數(shù)據(jù)) 子級(jí)向父級(jí)發(fā)送數(shù)據(jù) vm.$broadcast(事件名,數(shù)據(jù)) 父級(jí)向子級(jí)廣播數(shù)據(jù)仍秤。 配合event使用。在vue2.0里面已經(jīng)廢除可很。
<template id="aaa">
<span>我是父級(jí) -> {{msg}}</span>
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子組件-</h3>
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父組件的數(shù)據(jù)'
}
},
template:'#aaa',
methods:{
get(msg){
// alert(msg);
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子組件的數(shù)據(jù)'
}
},
template:'#bbb',
methods:{
send(){
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
7.slot
它的作用是作用: 占個(gè)位置诗力，類似ng里面 transclude（指令），可以參考插件vue-infinite-loading
//單個(gè)slot
<div id="box">
<aaa>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot>這是默認(rèn)的情況</slot>
<p>welcome vue</p>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
</script>
//多個(gè)slot我抠，用name區(qū)分
<div id="box">
<aaa>
<ul slot="ul-slot">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ol slot="ol-slot">
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
</aaa>
<hr>
<aaa>
</aaa>
</div>
<template id="aaa">
<h1>xxxx</h1>
<slot name="ol-slot">這是默認(rèn)的情況</slot>
<p>welcome vue</p>
<slot name="ul-slot">這是默認(rèn)的情況2</slot>
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'#aaa'
}
}
});
</script>
8. 路由
對(duì)于單頁應(yīng)用苇本，官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理
//vue跳轉(zhuǎn)鏈接格式 <a v-link="{path:'/home'}">主頁</a>
//展示內(nèi)容:<router-view></router-view>
//1. 準(zhǔn)備一個(gè)根組件
var App=Vue.extend();
//2. Home News組件都準(zhǔn)備
var Home=Vue.extend({
template:'<h3>我是主頁</h3>'
});
var News=Vue.extend({
template:'<h3>我是新聞</h3>'
});
//3. 準(zhǔn)備路由
var router=new VueRouter();
//4. 關(guān)聯(lián)
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//5. 啟動(dòng)路由
router.start(App,'#box');
//6.指定默認(rèn)跳轉(zhuǎn):
router.redirect({
‘/’:'/home'
});
//路由嵌套(多層路由)，用subRoutes
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主頁</a>
</li>
<li>
<a v-link="{path:'/news'}">新聞</a>
</li>
</ul>
<div>
<router-view></router-view>
</div>
</div>
<template id="home">
<h3>我是主頁</h3>
<div>
<a v-link="{path:'/home/login'}">登錄</a>
<a v-link="{path:'/home/reg'}">注冊(cè)</a>
</div>
<div>
<router-view></router-view>
</div>
</template>
<template id="news">
<h3>我是新聞</h3>
</template>
<script>
//1. 準(zhǔn)備一個(gè)根組件
var App=Vue.extend();
//2. Home News組件都準(zhǔn)備
var Home=Vue.extend({
template:'#home'
});
var News=Vue.extend({
template:'#news'
});
//3. 準(zhǔn)備路由
var router=new VueRouter();
//4. 關(guān)聯(lián)
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登錄信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注冊(cè)信息</strong>'
}
}
}
},
'news':{
component:News
}
});
//5. 啟動(dòng)路由
router.start(App,'#box');
//6. 跳轉(zhuǎn)
router.redirect({
'/':'home'
});
</script>
//url的path路徑為 detail/001?a=1&b=1
//參數(shù)傳遞router格式為'/detail/:id'菜拓，注意有冒號(hào)圈澈。接收用$route.params
//path后面？問號(hào)后邊參數(shù)接收$route.query
<template id="detail">
{{$route.params | json}}
<br>
{{$route.path}}
<br>
{{$route.query | json}}
</template>
<script>
//注意下邊subRoutes參數(shù)前面的冒號(hào)
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登錄信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注冊(cè)信息</strong>'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{
component:Detail
}
}
}
});
</script>
