vue2.0-組件定義方式
- 全局
<script>
var Home={ //這是2.0組件
template:'#aaa'
}; //Vue.extend()
Vue.component('my-aaa',Home);
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};
</script>
<template id="aaa">
<div>
<h3>我是組件</h3>
<strong>我是加粗標籤</strong>
</div>
</template>
<div id="box">
<my-aaa></my-aaa>
{{msg}}
</div>- 局部
var Home={ //這是2.0組件
template:'#aaa'
}; //Vue.extend()
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
components:{
'aaa':Home
}
});
};Vue.component('my-aaa',{
template:'#aaa'
});
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
}
});
};生命週期
beforeCreate 組件實例剛剛被創建,屬性都沒有
created 實例已經創建完成，屬性已經綁定
beforeMount 模板編譯之前
mounted 模板編譯之後，代替之前ready *
beforeUpdate 組件更新之前
updated 組件更新完畢 *
beforeDestroy 組件銷燬前
destroyed 組件銷燬後 <script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
methods:{
update(){
this.msg='大家好';
},
destroy(){
this.$destroy();
}
},
beforeCreate(){
console.log('組件實例剛剛被創建');
},
created(){
console.log('實例已經創建完成');
},
beforeMount(){
console.log('模板編譯之前');
},
mounted(){
console.log('模板編譯完成');
},
beforeUpdate(){
console.log('組件更新之前');
},
updated(){
console.log('組件更新完畢');
},
beforeDestroy(){
console.log('組件銷燬之前');
},
destroyed(){
console.log('組件銷燬之後');
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新數據" @click="update">
<input type="button" value="銷燬組件" @click="destroy">
{{msg}}
</div>
</body>組件2.0循環
<script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="(val,index) in list" :key="index">
{{val}} {{index}}
</li>
</ul>
</div>
</body>自定義鍵盤
<script>
//Vue.directive('on').keyCodes.ctrl=17;
Vue.config.keyCodes.ctrl=17;
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改變了');
}
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
</body>單一事件中心管理組件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
//準備一個空的實例對象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A組件</span> -> {{a}}
<input type="button" value="把A數據給C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a數據'
}
}
};
var B={
template:`
<div>
<span>我是B組件</span> -> {{a}}
<input type="button" value="把B數據給C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b數據'
}
}
};
var C={
template:`
<div>
<h3>我是C組件</h3>
<span>接收過來的A的數據爲: {{a}}{{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A組件的數據
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B組件的數據
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.οnlοad=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>
vue2.0:
bower info vue
http://vuejs.org/到了2.0以後，有哪些變化?
- 在每個組件模板，不在支持片段代碼
組件中模板:之前: <template> <h3>我是組件</h3><strong>我是加粗標籤</strong> </template> 現在: 必須有根元素，包裹住所有的代碼 <template id="aaa"> <div> <h3>我是組件</h3> <strong>我是加粗標籤</strong> </div> </template> -
關於組件定義
Vue.extend 這種方式，在2.0裏面有，但是有一些改動，這種寫法，即使能用，咱也不用——廢棄Vue.component(組件名稱,{ 在2.0繼續能用
data(){} methods:{} template:});
2.0推出一個組件，簡潔定義方式：
var Home={template:'' -> Vue.extend()};
- 生命週期
之前:init created beforeCompile compiled ready √ -> mounted beforeDestroy destroyedbeforeCreate 組件實例剛剛被創建,屬性都沒有 created 實例已經創建完成，屬性已經綁定 beforeMount 模板編譯之前 mounted 模板編譯之後，代替之前ready * beforeUpdate 組件更新之前 updated 組件更新完畢 * beforeDestroy 組件銷燬前 destroyed 組件銷燬後 -
循環
2.0裏面默認就可以添加重複數據arr.forEach(function(item,index){
});
去掉了隱式一些變量
$index $key之前:
v-for="(index,val) in array"現在:
v-for="(val,index) in array"
- track-by="id"
變成<li v-for="(val,index) in list" :key="index"> -
自定義鍵盤指令
之前：Vue.directive('on').keyCodes.f1=17;現在: Vue.config.keyCodes.ctrl=17
-
過濾器
之前:系統就自帶很多過濾 {{msg | currency}} {{msg | json}} .... limitBy filterBy .....一些簡單功能，自己通過js實現
到了2.0， 內置過濾器，全部刪除了
lodash 工具庫 _.debounce(fn,200)
自定義過濾器——還有
但是,自定義過濾器傳參
之前: {{msg | toDou '12' '5'}}
現在: {{msg | toDou('12','5')}}
組件通信:
vm.$emit()
vm.$on();
父組件和子組件:
子組件想要拿到父組件數據:
通過 props
之前，子組件可以更改父組件信息，可以是同步 sync
現在，不允許直接給父級的數據，做賦值操作
問題，就想更改：
a). 父組件每次傳一個對象給子組件, 對象之間引用 √
b). 只是不報錯, mounted中轉
可以單一事件管理組件通信: vuex
var Event=new Vue();
Event.$emit(事件名稱, 數據)
Event.$on(事件名稱,function(data){
//data
}.bind(this));
debounce 廢棄
-> lodash
_.debounce(fn,時間)