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 + ...
随机推荐
- java-Arrays类
1.Arrays类概述: - 针对数组进行操作的工具类. - 提供了排序,查找等功能. 2.成员方法: - 转换成字符串:public static String toString(int[] a) ...
- Cloth
https://www.youtube.com/watch?v=2zd1AI198I8Blender Tutorial For Beginners: Cloth Napkin 建模, 1透明玻璃杯, ...
- C++学习（一）之Visual Studio安装以及首次使用
一.安装Visual Studio 首先下载Visual Studio 链接: http://pan.baidu.com/s/1pLhJt0Z 密码:uqyc 将.ios文件解压得到以下文件: 点击v ...
- fold算法（拉格朗日插值）
如果打表发现某个数列: 差分有限次之后全为0 例如: 2017新疆乌鲁木齐ICPC现场赛D题 ,,,,,,,,,,…… [2018江苏南京ICPC现场赛也有这样的题目] 那么可以使用以下黑科技计算出第 ...
- 【单位矩阵】【杭电OJ1575】
Tr A Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- pageContext中page、request、session、application四种范围变量的用法。
在PageContext中有很多作用域 第一种:PageContext.PAGE_SCOPE适用于当前页面的作用域,其接受数据的代码是pageContext.getAttribute();访问页面也是 ...
- vue全家桶+Koa2开发笔记(3)--mongodb
1. 安装 momgodb brew install mongodb安装成功后执行 which mongod启动:mongod 2. 下载可视化操作数据库的软件 https://robomongo.o ...
- flex布局居中无效果注意是否设置了宽度
<View style={{display:),backgroundColor:),alignItems:'center'}}> <JDTouchable style={styles ...
- Unity Shader 入门精要学习 (冯乐乐 著)
第1篇 基础篇 第1章 欢迎来到Shader的世界 第2章 渲染流水线 第3章 Unity Shader 基础 第4章 学习Shader所需的数学基础 第2篇 初级篇 第5章 开始Unity Shad ...
- Spring的两种动态代理：Jdk和Cglib 的区别和实现
这是有意义的一天!自己研究一路畅通的感觉真爽 原理是参考大神的,代码手敲 一.原理区别: java动态代理是利用反射机制生成一个实现代理接口的匿名类,在调用具体方法前调用InvokeHandler来处 ...