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原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
Javascript柯里化实现原理及作用解析
Oct 22 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
第六节 访问属性和方法 [6]
2006/10/09 PHP
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
IE6、IE7中获取Button元素的值的bug说明
2011/08/28 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
小程序实现分类页
2019/07/12 Javascript
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python回调函数用法实例分析
2015/05/09 Python
python+opencv实现动态物体追踪
2018/01/09 Python
python实现Flappy Bird源码
2018/12/24 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
详解【python】str与json类型转换
2019/04/29 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
企业申诉管理制度
2014/01/30 职场文书
中国好声音华少广告词
2014/03/17 职场文书
安全生产承诺书
2014/03/26 职场文书
文明村创建实施方案
2014/03/27 职场文书
护士节策划方案
2014/05/19 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
电影地道战观后感
2015/06/04 职场文书
php字符串倒叙
2021/04/01 PHP
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS