vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的，下面主要总结一下2.0相对于1.0的一些变化。
组件定义
在vue1.0中，我们有使用vue.extend()来创建组件构造器继而创建组件实例，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
var Aaa=Vue.extend({
template:'<h3>我是全局组件</h3>'
});
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
});
</script>
但是在vue2.0中，推出了一种更简洁的组件定义方法。
<template id="aaa">
<p>我是组件</p>
</template>
<div id="box">
<aaa></aaa>
{{msg}}
</div>
<script>
var Home={
template:'#aaa'
};
window.onload=function(){
new Vue({
el:'#box',
data:{
msg:'welcome vue2.0'
},
components:{
'aaa':Home
}
});
};
</script>
代码片段
在vue1.0中，我们可以将多个代码片段同时放在组件模板中，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:`<p>我是组件元素</p>
<p>我也是组件元素</p>
<p>我还是组件元素</p>
`
});
var vm=new Vue({
el:'#box',
});
</script>
但是当我们将vue.js改为2.0的时候，就会报错。
因为在vue2.0中，组件里面只能存在一个根元素，所以当有多个元素存在时，需要使用一个根元素进行包裹，如下所示。
<div id="box">
<aaa></aaa>
</div>
<script>
Vue.component('aaa',{
template:`<div>
<p>我是组件元素</p>
<p>我也是组件元素</p>
<p>我还是组件元素</p>
</div>
`
});
var vm=new Vue({
el:'#box',
});
</script>
生命周期
在vue1.0中的生命周期函数主要有下图构成：
在vue2.0中，生命周期函数较之前有了比较大的改变：
我们可以通过一个具体的实例来理解这些函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="更新数据" @click="update">
<input type="button" value="销毁组件" @click="destroy">
{{msg}}
</div>
<script>
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>
</body>
</html>
首先没有任何操作时，实例创建和模板编译。
当我们点击更新数据后
最后点击销毁组件
循环
我们先看一个基于vue1.0的循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue1.0.js"></script>
</head>
<body>
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in list" >
{{val}}
</li>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
list:['width','height','border']
},
methods:{
add(){
this.list.push('background');
}
}
});
</script>
</body>
</html>
当我们第一次点击时在数组中添加了一项，但是再次点击时，就会报错，因为在vue1.0的循环中，默认是不允许重复数据的，除非在循环中添加track-by，如下：
<div id="box">
<input type="button" value="添加" @click="add">
<ul>
<li v-for="val in list" track-by="$index">
{{val}}
</li>
</ul>
</div>
但是在vue2.0中，默认就可以添加重复数据。当我们把上面例子中的vue.js换成2.0的，就不再会报错了。
自定义键盘事件
首先是在vue1.0中，我们是通过directive来自定义键盘事件的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="vue1.0.js"></script>
</head>
<body>
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
<script>
Vue.directive('on').keyCodes.ctrl=17;
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
</script>
</body>
</html>
但是在vue2.0中，我们自定义键盘事件的写法发生了变化。
<div id="box">
<input type="text" @keyup.ctrl="change">
</div>
<script>
Vue.config.keyCodes.ctrl=17;
new Vue({
el:'#box',
data:{
},
methods:{
change(){
alert('改变了');
}
}
});
</script>
过滤器
在之前总结过滤器的时候有提到过，在vue1.0中，存在很多系统再带的过滤器，但是现在在vue2.0中，删除了所有的内置过滤器，用户需要按需自定义过滤器。
vue2.0变化的更多相关文章
- vue2.0变化(转载)
原文链接:https://www.cnblogs.com/itbainianmei/p/6062249.html 1.每个组件模板template,不再支持片段代码 之前: <template& ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- VUE2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...
- Vue2.0中v-for迭代语法变化（key、index）【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0以后，有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
- Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- Hadoop错误：java.io.IOException: Incompatible clusterIDs
问题: 配置Hadoop集群时,一个节点的DataNode无法启动 排查: 查看hadoop-root-datanode-bigdata114.log文件,错误信息如下: java.io.IOExce ...
- django BBS project login登录功能实现
1.models from django.db import models # Create your models here. from django.contrib.auth.models imp ...
- （4）django的新手三件套(返回页面、返回字符、重定向)
from django.shortcuts import render,HttpResponse,redirect 新手三件套,前期开发都会用到 render #向浏览器返回页面 HttpResp ...
- hdu4614 Vases and Flowers 线段树
Alice is so popular that she can receive many flowers everyday. She has N vases numbered from 0 to N ...
- HashMap<Integer, Bean> 根据Bean的属性进行排序
转载地址 已知一个HashMap<Integer,User>集合, User有name(String)和age(int)属性.请写一个方法实现对HashMap的排序功能,该方法接收Hash ...
- Go Example--超时处理
package main import ( "fmt" "time" ) func main() { c1 := make(chan string, 1) go ...
- dc-vastinspector
https://developers.google.com/interactive-media-ads/docs/sdks/html5/vastinspector hosts: https://gis ...
- 新安装的win7/win10系统，所有驱动都没安装，插入U盘也无法识别解决方法
我是使用老毛挑安装的系统,结果安装好之后,才发现所有驱动都没有安装,例如usb,网卡驱动等 解决方法就是先把驱动下载到系统安装盘里面,然后再次进入安装系统界面,相当于重新安装系统,但实际上我们不需要. ...
- C++中的ravalue学习笔记
一.学习笔记 1. A a = 42; 会先以42为参数构造一个A类对象,然后调用拷贝构造函数来构造a,目前编译器优化掉了拷贝构造函数的调用,测试拷贝构造函数是没有被调用的,但是其权限不能为priva ...
- MySQL--字符集基础
========================================================================= 字符集和编码规则 字符集:特定类型或用途的字符集合, ...