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 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
JS画5角星方法介绍
Sep 17 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 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的输入输出流
2007/02/14 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
探讨各种PHP字符串函数的总结分析
2013/06/05 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
小程序实现多列选择器
2019/02/15 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
python解析html提取数据,并生成word文档实例解析
2018/01/22 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
python获取栅格点和面值的实现
2020/03/10 Python
小结Python的反射机制
2020/09/28 Python
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
一篇.NET面试题
2014/09/29 面试题
个人业务学习心得体会
2016/01/25 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
vue ref如何获取子组件属性值
2022/03/31 Vue.js