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 + ...
随机推荐
- tomcat:利用tomcat部署war包格式的项目
配置jdk环境变量, 配置TOMCAT_HOME 变量, 将war包放入webapps中. 运行tomcar-bin文件夹中的startup.bat. tomcat会自动解压war包. 进入项目:
- test-ipv6
http://test-ipv6.com/ ! 你的公网 IPv4 地址是 89.42.31.211! 你的公网 IPv6 地址是 2001:ac8:21:8::376e:989b! 你已接入 IPv ...
- Elasticsearch基本用法(1)--原生操作
2.2.创建索引 2.2.1.语法 创建索引的请求格式: 请求方式:PUT 请求路径:/索引库名 请求参数:json格式: { "settings": { "number ...
- python django day 3 页面，自动 跳转，参数传递
zqxt_views/urls.pypath('', calc_views.index, name='home'), calc/views.pydef index(request): return r ...
- js 三目运算
语法: 一个条件,二选一: 条件?当条件满足时返回的值:当条件不满足时返回的值 多个条件,多选一: 条件1?条件1满足时的值: 条件2?条件2满足时的值: 条件n ?条件n 满足时的值: 默认值: 以 ...
- controller层，service层，dao层（main函数，子函数，子的子函数）
controller层相当于main函数————————————————————————————————————————————————————@RequestMapping("/query ...
- 文件I/0缓冲
设置stdio流缓冲模式 #include<stdio.h> int setvbuf(FILE *stream,char *buf,int mode,size_t size) int se ...
- MySQL Binlog常用参数
====================================================================== MySQL Binlog常用参数 log_bin 设置此参 ...
- 查看加密的vba代码
查看加密的vba代码,可以使用这个工具,excel文件里面的宏代码一览无余. https://files.cnblogs.com/files/laoxia/PVP.zip
- python re正则模块
re 正则表达式操作 本模块提供了类似于Perl的正则表达式匹配操作.要匹配的模式和字符串可以是Unicode字符串以及8位字符串. 正则表达式使用反斜杠字符('\')来表示特殊的形式或者来允许使用 ...