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 :nth-child前有无空格的区别分析
Jul 11 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
ES6中的Promise代码详解
Oct 09 Javascript
JavaScript调用模式与this关键字绑定的关系
Apr 21 Javascript
vue-router传参用法详解
Jan 19 Javascript
ES6 Promise对象的含义和基本用法分析
Jun 14 Javascript
node.js express框架简介与实现
Jul 23 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php检测文件编码的方法示例
2014/04/25 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
手机端转换rem适应
2017/04/01 Javascript
jQuery操作css样式
2017/05/15 jQuery
jquery拖动改变div大小
2017/07/04 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
django 模版关闭转义方式
2020/05/14 Python
python操作toml文件的示例代码
2020/11/27 Python
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
团员自我评价范文
2015/03/10 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
详解MySQL主从复制及读写分离
2021/05/07 MySQL
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Python+Tkinter制作专属图形化界面
2022/04/01 Python