vue学习笔记之vue1.0和vue2.0的区别介绍


Posted in Javascript onMay 17, 2017

今天我们来说一说vue1.0和vue2.0的主要变化有哪些

一.在每个组件模板,不在支持片段代码

VUE1.0是: 

<template>
  <h3>我是组件</h3><strong>我是加粗标签</strong>
</template>

VUE2.0:必须有根元素,包裹住所有的代码

<template id="aaa">
  <div>
    <h3>我是组件</h3>
      <strong>我是加粗标签</strong>
   </div>
</template>

二.关于组件定义

VUE1.0定义组件的方式有:

Vue.extend            这种方式,在2.0里面有,但是有一些改动

Vue.component(组件名称,{  在2.0继续能用
  data(){}
  methods:{}
  template:
});

VUE2.0定义组件的方式则更为简单

var Home={
    template:''    ->  相当于Vue.extend()
};

三.生命周期的变化

vue1.0的生命周期为

init           ->初始化
created         ->创建
beforeCompile      ->编译之前
compiled         ->编译完成
ready    √      -> mounted
beforeDestroy      ->销毁之前
destroyed        ->已经销毁

vue2.0的生命周期为(标*的为经常用的)

beforeCreate  组件实例刚刚被创建,属性都没有
created     实例已经创建完成,属性已经绑定
beforeMount   模板编译之前
mounted     模板编译之后,代替之前ready *
beforeUpdate  组件更新之前
updated     组件更新完毕  *
beforeDestroy  组件销毁前
destroyed    组件销毁后

以上所述是小编给大家介绍的vue学习笔记之vue1.0和vue2.0的区别介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
Jul 31 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
javascript限制用户只能输汉字中文的方法
Nov 20 Javascript
jQuery实现表格行上移下移和置顶的方法
May 22 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
layui实现数据表格点击搜索功能
Mar 26 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
Angular.JS中的this指向详解
May 17 #Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 #Javascript
JavaScript简单拖拽效果(1)
May 17 #Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 #Javascript
JavaScript限定范围拖拽及自定义滚动条应用(3)
May 17 #Javascript
Vue.js鼠标悬浮更换图片功能
May 17 #Javascript
12个非常有用的JavaScript技巧
May 17 #Javascript
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JavaScript中的排序算法代码
2011/02/22 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
理解Python中函数的参数
2015/04/27 Python
python实现读取excel写入mysql的小工具详解
2017/11/20 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python可迭代对象操作示例
2019/05/07 Python
Python3列表内置方法大全及示例代码小结
2019/05/10 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python实现门限回归方式
2020/02/29 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
财务主管的岗位职责
2013/12/30 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫