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 + ...
随机推荐
- lesson4-图像分类-小象cv
CNN网络进化:AlexNet->VGG->GoogleNet->ResNet,深度8->19->22->152GoogleNet:Lsplit->trans ...
- 【HDOJ1069】【动态规划】
http://acm.hdu.edu.cn/showproblem.php?pid=1069 Monkey and Banana Time Limit: 2000/1000 MS (Java/Othe ...
- Spring Boot 揭秘
SpringBoot基础 微服务 解决大一统的服务化架构的问题 代码冲突问题 交付复杂,影响面大 测试困难 微服务的好处 可扩展性 隔离性 灵活性,多语言多技术生态 微服务的挑战 保持微服务的互通性 ...
- mysql的utf8与utf8mb4 异同；utf8mb4_unicode_ci 与 utf8mb4_general_ci 如何选择
如图,一般使用如下配置 utf8mb4是4个字节.utf8是3个字节.utf8mb4兼容性更好,占用空间更大. 主要从排序准确性和性能两方面看: 准确性utf8mb4_unicode_ci 是基于标准 ...
- MySQL Memory--内存分配相关参数
Seesion级的内存分配: max_threads(当前活跃连接数)* ( read_buffer_size(顺序读缓冲,提高顺序读效率) + read_rnd_buffer_size(随机读缓冲, ...
- openstack--8--控制节点部署Dashboard
Horizon介绍 Dashboard服务,这里具体的产品就是Horizon1.它提供一个Web界面操作Openstack的系统2.使用Django框架基于Openstack API开发3.支持将Se ...
- Spring Cloud 与 Dubbo、Spring Cloud 与 Docker、Spring Cloud 与 Kubernetes 比较
出处:http://dockone.io/article/4142
- tensorflow学习笔记
常量的四则运算 import tensorflow as tf data1 = tf.constant(2) data2 = tf.constant(10) dataAdd=tf.add(data1, ...
- 微信小程序学习之for循环
一.使用自定义创建的json数据 1. 创建微信小程序项目后 在wxml文件中增加for循环 <block wx:for="{{posts_key}}" wx:for-ite ...
- [转]Ubuntu python-config
转自:http://manpages.ubuntu.com/manpages/precise/man1/python-config.1.html recise (1) python-config.1. ...