vue1.0和vue2.0的区别(一)

时间:2021-11-12 22:42:17

今天我们来说一说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 组件销毁后

vue1.0和vue2.0的区别(一)的更多相关文章

  1. vue1&period;0和vue2&period;0的区别&lpar;二&rpar;

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  2. vue1&period;0与vue2&period;0对于v-for的使用的区别

    vue1.0与vue2.0对于v-for的使用的区别: 1,vue1.0中有$index,而vue2.0将$index移除. 2,vue1.0中(index,item) in list 而vue2.变 ...

  3. vue1&period;0 与 Vue2&period;0的一些区别 及用法

    1.Vue2.0的模板标记外必须使用元素包起来: eg:Vue1.0的写法 <!DOCTYPE html> <html> <head> <meta chars ...

  4. vue1&period;0+vue2&period;0实现选项卡

    通常我们写tab选项卡的时候,一般都是用jq等去操作dom,给同级元素移除active类,然后,给被点击元素添加active类,用vue实现也是同样的原理,都是操作active类. 我们都知道用vue ...

  5. 【重点突破】—— Vue1&period;0到Vue2&period;0的变化

    前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习.        组件模板不再支持片段代码,必须有一个*元素包裹,例如: ...

  6. Vue1&period;x 到Vue2&period;0的一个变化

    小弟初来乍到,写的不好的地方还望指正.谢谢各位! 废话不多说  进入正题: Vue1.x到2.0的一个变化 1. 在每个组件模板,不在支持片段代码  组件中模板: 之前:     <templa ...

  7. 用webpack2&period;0构建vue2&period;0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  8. 用webpack2&period;0构建vue2&period;0单文件组件超级详细精简实例

    npm init -y 初始化项目  //-y 为自动生成package.json,如果需要自行配置,去掉-y即可 安装各种依赖项 npm install --save vue 安装vue2.0 np ...

  9. vue使用中遇到的,以及vue1&period;0到vue2&period;0新手踩的坑

    最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...

随机推荐

  1. 安卓虚拟机adb shell sqlite3数据库

    adb shell 连接: //http://www.cnblogs.com/xiaobo-Linux/ Android把数据都存放在data/data目录下. 我们使用cd命令转到data/data ...

  2. TextView 常用摘要

    1.代码中设置drawableTop TextView textView = new TextView(getActivity()); Drawable drawable = getResources ...

  3. Java多线程19:定时器Timer

    前言 定时/计划功能在Java应用的各个领域都使用得非常多,比方说Web层面,可能一个项目要定时采集话单.定时更新某些缓存.定时清理一批不活跃用户等等.定时计划任务功能在Java中主要使用的就是Tim ...

  4. Spring&lowbar;手动获取Bean

    1.SpringContextHolder.java package com.lkb.util; import org.springframework.context.ApplicationConte ...

  5. 2017-3-18 SQL server 数据库 45道题

    use data02161212 create table student (Sno nvarchar(3) primary key, Sname nvarchar(8) not null, Ssex ...

  6. Acitiviti笔记(一)

    一.核心组件 ProcessEngine:流程引擎的抽象,对于开发者来说,它是我们使用Activiti的facade,通过它可以获得我们需要的一切服务.类似于一个容器工厂,来保存创建的ProcessE ...

  7. 谈谈mysql的悲观和乐观锁

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念.之前有写过一篇文章关于并发的处理思路和解决方案,这里我单独将对这两种常见的锁机制在数据库数据上的实现进行比较系统的介绍一 ...

  8. SGU 271 Book Pile

    There is a pile of N books on the table. Two types of operations are performed over this pile: - a b ...

  9. Linux上防火墙开放对应的端口

    在Linux上防火墙开放对应的端口的命令如下: 方式一: [root@localhost sbin]# /sbin/iptables -I INPUT -p tcp --dport 80 -j ACC ...

  10. java中介者模式

    中介者模式也是用来降低类类之间的耦合的,因为如果类类之间有依赖关系的话,不利于功能的拓展和维护,因为只要修改一个对象,其它关联的对象都得进行修改.如果使用中介者模式,只需关心和Mediator类的关系 ...