vue2.0:
bower info vue

http://vuejs.org/

到了2.0以后,有哪些变化?

1. 在每个组件模板,不在支持片段代码
组件中模板:
之前:

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

现在: 必须有根元素,包裹住所有的代码

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

2. 关于组件定义
Vue.extend 这种方式,在2.0里面有,但是有一些改动,这种写法,即使能用,咱也不用——废弃

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

2.0推出一个组件,简洁定义方式:

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

3. 生命周期
之前:

init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed

现在:

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

3. 循环
2.0里面默认就可以添加重复数据

arr.forEach(function(item,index){

});

去掉了隐式一些变量
$index $key

之前:
v-for="(index,val) in array"
现在:

v-for="(val,index) in array"

4. track-by="id"
变成

<li v-for="(val,index) in list" :key="index">

5. 自定义键盘指令
之前:

Vue.directive('on').keyCodes.f1=17;
现在:

Vue.config.keyCodes.ctrl=17

6. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能,自己通过js实现

到了2.0, 内置过滤器,全部删除了

lodash 工具库 _.debounce(fn,200)

自定义过滤器——还有
但是,自定义过滤器传参

Vue.filter( 'discount' , function(value) {
return value * .5 ;
});

之前:

  {{msg | toDou '12' '5'}}
现在:

   {{msg | toDou('12','5')}}
------------------------------------------------------
组件通信:
vm.$emit()
vm.$on();

父组件和子组件:

子组件想要拿到父组件数据:
通过 props

之前,子组件可以更改父组件信息,可以是同步 sync
现在,不允许直接给父级的数据,做赋值操作

问题,就想更改:
a). 父组件每次传一个对象给子组件, 对象之间引用 √
b). 只是不报错, mounted中转
------------------------------------------------------
可以单一事件管理组件通信: vuex

var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
//data
}.bind(this));

------------------------------------------------------
debounce 废弃
-> lodash
_.debounce(fn,时间)
------------------------------------------------------

vue2.X 与 vue1.X 的区别的更多相关文章

  1. vue2.x和vue1.0

    1.首先挂载方式上 在vue2.0中,如果使用body或者html作为挂载点,则会报以下警告: Do not mount Vue to <html> or <body> - m ...

  2. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  3. vue2.0 vs vue1.0

    1.每个组件模板不支持代码片段组件中模板之前<template> <h3>as</h3></template>现在 必须要有根元素 包裹住所有代码< ...

  4. vue2.0 $router和$route的区别

    在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...

  5. vue-cli的版本查看及vue2.x和vue3.0的区别

    链接:https://www.cnblogs.com/wyongz/p/11505048.html 链接2:https://blog.csdn.net/weixin_37745913/article/ ...

  6. vue2.x 总结

    1.独立构建vs运行时构建 在按照vue1.0的配置配置好webpack后,会出现Failed to mount component: template or render function not ...

  7. vue2.0 之 生命周期

     一.vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络)   二.vue2.x生命周期图和各阶段具体含义 beforecreated:el 和 data 并未初始化 created: ...

  8. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  9. vue2.0 vs vue

    vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...

随机推荐

  1. python控制流-导入模块

    一.模块 1.含义 Python 程序可以调用一组基本的函数,这称为“内建函数”,包括你见到过的 print().input()和 len()函数.Python 也包括一组模块,称为“标准库”.每个模 ...

  2. Mybatis-学习笔记(1)SqlSessionFactory、SqlSession、Mybatis配置文件configuration的属性标签

    1.mybatis引入项目,只需要引入mybatis-x.x.x.jar包即可. (当然数据库驱动的引入必不可少) 2.SqlSessionFactory 由SqlSessionFactoryBuil ...

  3. 使用userAgent区分浏览器版本

    使用userAgent区分浏览器版本:https://blog.csdn.net/n447194252/article/details/76255489 JS根据userAgent值来判断浏览器的类型 ...

  4. [BZOJ 2989]数列(CDQ 分治+曼哈顿距离与切比雪夫距离的转化)

    [BZOJ 2989]数列(CDQ 分治) 题面 给定一个长度为n的正整数数列a[i]. 定义2个位置的graze值为两者位置差与数值差的和,即graze(x,y)=|x-y|+|a[x]-a[y]| ...

  5. Codeforces 396C (DFS序+线段树)

    题面 传送门 题目大意: 给定一棵树,每个点都有权值,边的长度均为1,有两种操作 操作1:将节点u的值增加x,并且对于u的子树中的任意一个点v,将它的值增加x-dist(u,v)*k, dist(u, ...

  6. ubantu 安装mongodb数据库

    STEP 1:  在终端输入GPK码 $  sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334B ...

  7. 树莓派VNC Viewer 远程桌面配置教程

    作为一个刚入门的小白,你还在为如何配置树莓派的远程桌面控制苦恼? 是否希望能够每次在树莓派上无须接上显示器.键盘.鼠标以及走到放置你的树莓派的地方就可以运行指令! 在这篇树莓派文章中,你将学到如何在树 ...

  8. 解决Vscode编辑器不能打开多标签页问题

    问题描述:编辑代码时,初用vscode,不能打开多个文件:每打开一个文件,都会替换前面一个文件标签,很不方便切换编码: 想要的效果: 解决方式: 方法一: 找到setting.json文件,最外层花括 ...

  9. 如何同步发送put或者delete请求

    1.必须把前端发送方式改为post . 2.在web.xml中配置一个filter:HiddenHttpMethodFilter过滤器 3.必须携带一个键值对,key=_method,  value= ...

  10. hadoop HA + HBase HA搭建:

    hadoop HA搭建参考:https://www.cnblogs.com/NGames/p/11083640.html (本节:用不到YARN 所以可以不用考虑部署YARN部分) Hadoop 使用 ...