vue.js学习:1.0到2.0的变化(区别)
一、生命周期
1、1.0的生命周期:
周期 | 解释 |
---|---|
init | 组件刚刚被创建,但Data、method等属性还没被计算出来 |
created | 组件创建已经完成,但DOM还没被生成出来 |
beforeCompile | 模板编译之前 |
compiled | 模板编译之后 |
ready | 组件准备(平时用得较多) |
attached | 在 vm.$el 插入到DOM时调用 |
detached | 在 vm.$el 从 DOM 中删除时调用 |
beforeDestory | 组件销毁之前 |
destoryed | 组件销毁之后 |
下图是官方关于1.0生命周期的流程图:
2、2.0的生命周期
周期 | 解释 |
---|---|
beforeCreate | 组件刚刚被创建,但Data、method等属性还没被计算出来 |
created | 组件创建已经完成,但DOM还没被生成出来 |
beforeMount | 模板编译之前 |
mounted | 模板编译之后,组件准备 |
beforeUpdate | 组件更新之前(数据等变动的时候) |
updated | 组件更新之后(数据等变动的时候) |
activated | for keep-alive,组件被激活时调用 |
deactivated | for keep-alive,组件被移除时调用 |
beforeDestory | 组件销毁之前 |
destoryed |
组件销毁之后 |
下图是官方关于2.0生命周期的流程图:
借用一位大神的图来总结他们的变化:
2.0生命生命周期变化感觉变得更加语义化一点(有规律可寻,更好记了),而且增加了beforeUpdate、updated、activated、deactivated,删除了attached、detached。
二:过滤器
2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我们自己编写,以下是一个自定义过滤器示例,
Vue.filter('toDou',function(n,a,b){
return n<10?n+a+b:''+n;
});
如果想展示JSON数据,不需要调用过滤器了,框架会自动帮我们解析出来;
2.0过滤器的传参方式不是以前的方式,是以函数传参的方式,下面示例:
之前调用: {{msg | mimi '12' '5'}} 现在调用: {{msg | mimi('12','5')}}
三:循环
刚学vue1.0的人可能会碰到一个错误信息:
这里提示我们要使用tranck-by=”$index”,这个属性也可以帮我们提高for循环的性能,而在2.0,使用重复数据将不会报错,同时也去掉了一些隐式变量如:index、key,那我们如果要用到这些数据则可以通过ES6的语法来获取
v-for="(val,index) in array"
关于整数循环,1.0的整数循环是从0开始的,2.0的整数循环是从1开始的,下面对比:
//HTML代码
<ul id='box'>
<li v-for='val in 5' v-text='val'></li>
</ul>
运行结果:
四、片段代码
编写template的时候,2.0必须要用一个根元素(如div)将代码片段包裹起来,否则报错
之前: 在1.0使用时完全没问题
<template>
<h3>我是组件</h3><strong>我是加粗标签</strong>
</template>
现在: 必须有根元素,包裹住所有的代码
<template id="aaa">
<div>
<h3>我是组件</h3>
<strong>我是加粗标签</strong>
</div>
</template>
五:插值语法{{}}
2.0废弃了{{}}的语法,在标签内使用{{}}插入数据将失效。
//HTML代码
<h3>{{msg}}</h3> //js代码
var vm = new Vue({
el:'#box',
data:{
msg:'YOYOYOYO'
},
methods:{ }
})
运行结果:
以上只是列举了部分变化,总体来说vue升级到2.0的变化还是没辣么大的(angular版本恐惧症),还有一些新变化等爬完坑再来补充( • ̀ω•́ )✧
原文来源:https://blog.csdn.net/a895865025/article/details/74331626
vue.js学习:1.0到2.0的变化(区别)的更多相关文章
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- vue.js学习之 打包为生产环境后,页面为白色
vue.js学习之 打包为生产环境后,页面为白色 一:配置问题 当我们将项目打包为生产环境后,在dist文件夹下打开index.html,会发现页面为白色. 1:打开config>index.j ...
- Vue.js学习-组件注册与使用
Vue.js学习文档 地址:https://cn.vuejs.org/v2/guide/ 关于自定义组件注册: 建议将<script></script>放在body标签之后 H ...
- Vue.js学习 Item12 – 内部响应式原理探究
深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- vue.js学习之better-scroll封装的轮播图初始化失败
vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- vue.js学习之 如何在手机上查看vue-cli构建的项目
vue.js学习之 如何在手机上查看vue-cli构建的项目 一:找到config文件夹下的index.js文件,打开后,将host的值改为你本地的ip,保存后重启项目 二:输入ip和端口号打开项目 ...
随机推荐
- Path Sum I && II & III
Path Sum I Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that ad ...
- 如何操控DevExpress的 SpreadSheet 控件 并与 XAF 结合应用
DevExpress的XAF 框架通常使用 GridControl 控件来操作数据库表中的数据,但导入导出.非结构化数据的管理可以使用SpreadSheet 控件. SpreadSheet 控件模拟微 ...
- Linux将rm命令设置为回收站【转】
一个方案就是重定向 rm 命令以嫁接为 mv 命令,相当于给 Linux 系统定制了一个回收站. 实现方式如下: ### 重定义rm命令 ### # 定义回收站目录 trash_path='~/.tr ...
- SQL NOLOCK大杂烩
今天碰到NOLOCK 的问题,就查阅了一些资料,做了相关了解:总结了比较经典,朴实的两篇在此. 电梯直达: SQL Server 中WITH (NOLOCK)浅析 文章本想大篇幅摘抄,因为担心链接失效 ...
- centos6.8配置php-fpm(php已在apache中以模块形式运行,nginx中同时以fastcgi运行)
location ~ \.php(.*)$ { root /mnt/www/wenyin; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; ...
- 迁移学习(Transfer Learning)
原文地址:http://blog.csdn.net/miscclp/article/details/6339456 在传统的机器学习的框架下,学习的任务就是在给定充分训练数据的基础上来学习一个分类模型 ...
- centos 6 不能上网
今天安装了一个CentOS 6,默认安装的Centos不不能上网? 解决办法:Centos 默认的链接网路的方式为:NAT方式.如果无法上网,设置Network Connection 的方式为Brid ...
- Android App增量升级
移动互联网主打的就是用户体验和产品的快速迭代,通过用户反馈和用户行为跟踪及时调整产品方向,这样才能持续保持生命力和创造力.说的接地气点就是,你频繁的升级更新,有时只是修复了几个bug或者微调了下界面, ...
- HNUOJ 13341
题目给你一个串, 串是严格的 1 – n 的排列,里面的数是随机的 把这个串里面的数字分别输出//先预处理,对于给出的串能找到里面的最大数,再 DFS 处理 #include<iostream& ...
- spark-streaming集成Kafka处理实时数据
在这篇文章里,我们模拟了一个场景,实时分析订单数据,统计实时收益. 场景模拟 我试图覆盖工程上最为常用的一个场景: 1)首先,向Kafka里实时的写入订单数据,JSON格式,包含订单ID-订单类型-订 ...