在前面的學習過程中我們已經對vue1有了一定的瞭解，下麵我們來學習一下vue2，看一下vue1與vue2有什麼區別。 區別1： 在vue2中使用v-for指令時它可以添加重覆的內容，就像可以添加相同的留言內容，下麵我們來看一下 在寫代碼的時候首先要引入的是vue2js文件。 html代碼： js代碼 ...
在前面的學習過程中我們已經對vue1有了一定的瞭解，下麵我們來學習一下vue2，看一下vue1與vue2有什麼區別。
區別1：
在vue2中使用v-for指令時它可以添加重覆的內容，就像可以添加相同的留言內容，下麵我們來看一下
在寫代碼的時候首先要引入的是vue2js文件。
html代碼：
<div id="box"> <input type="button" value="添加" @click="add()"> <ul> <li v-for="item in arr">{{item}}</li> </ul> </div>
js代碼：
window.onload=function () {
new Vue({
el:"#box",
data:{
arr:[1,2,3,4,5,6]
},
methods: {
add:function () {
this.arr.unshift("1")
}
}
})
}
但是，還有一點不同的地方就是沒有$index了，在vue1中是有的，但我們可以手動添加$index
<div id="box">
<input type="button" value="添加" @click="add()">
<ul>
<li v-for="(val,index) in arr">{{val}}------->{{index}}</li>
</ul>
</div>
區別2：
我們在vue2中跟vue1中有一個很大的區別就是沒有過濾器！！！我們用著過濾器的時候要要自己定義。
區別3：
再者我們在使用組件之間的通訊時也不同，下麵我們來看一下：
html代碼：
<div id="div">
我是父組件---->{{emitData.msg}}<br>
<child-com :m="emitData"></child-com>
</div>
</body>
</html>
<template id="tpl">
<div>
<span>我是子組件----></span>
{{m.msg}}<br>
<input type="button" value="change" @click="change()"/>
</div>
</template>
js代碼：
window.onload = function(){
new Vue({
el:"#div",
data:{
emitData:{ //寫為json 原理：js中對象的引用
msg:"我是父組件數據"
}
},
components:{
'child-com':{
props:['m'],
template:"#tpl",
methods:{
change(){
this.m.msg='變了';
}
}
}
}
})
}
這不是vue2中的方法但是我們可以使用這種方法來解決問題。
區別4：
有一個最基本的區別就是我們在定義模板的時應該把模板的東西用一個大盒子包起來。
<template id="tpl">
<div><h3>3333333</h3><strong>strong</strong></div>
</template>
區別5：
對於生命周期也是有所不同的，我們vue2中的生命周期是這樣的
window.onload=function () {
new Vue({
el:"#box",
data:{
msg:"lalalal"
},
beforeCreate () {
alert("實例創建之前")
},
created() {
alert("實例創建完成")
},
beforeMount() {
alert("數據編譯之前")
},
mounted() {
alert("數據編譯完成")
},
beforeUpdate:function () {
console.log("數據更新之前")
},
updated:function () {
console.log("數據解析完成")
},
beforeDestroy:function () {
alert("數據銷毀之前")
},
destroyed:function () {
alert("數據銷毀完成")
}
})
}
最後我們來看一下單一事件中管理組件通訊
html:
<div id="div">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
js代碼：
<script>
window.onload = function(){
const event=new Vue;
const A={
template:`
<div>
<span>我是A組件---------></span>{{msg1}}
<input type="button" value="把a組件的數據傳給c" @click="send()">
</div>
`,
data(){
return{
msg1:"我是A組件的數據"
}
},
methods:{
send(){
event.$emit("a-data",this.msg1)
}
}
};
const B={
template:`
<div>
<span>我是B組件---------></span>{{msg2}}
<input type="button" value="把b組件的數據傳給c" @click="send()">
</div>
`,
data(){
return{
msg2:"我是B組件的數據"
}
},
methods:{
send(){
event.$emit("b-data",this.msg2)
}
}
};
const C={
template:`
<div>
<h3>我是C組件</h3>
<span>接收到A的數據--->{{a}}</span><br/>
<span>接收到B的數據--->{{b}}</span>
</div>
`,
data(){
return{
a:"a",
b:"b"
}
},
mounted(){
event.$on("a-data",function (a) {
this.a=a;
}.bind(this));
event.$on("b-data",function (b) {
this.b=b
}.bind(this))
}
};
new Vue({
el:"#div",
data:{
msg:"我是父組件數據"
},
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
})
}
</script>
以上就我所瞭解的vue2。
