vue2.X 与 vue1.X 的区别
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 的区别的更多相关文章
- vue2.x和vue1.0
1.首先挂载方式上 在vue2.0中,如果使用body或者html作为挂载点,则会报以下警告: Do not mount Vue to <html> or <body> - m ...
- vue2和vue3生命周期的区别
概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...
- vue2.0 vs vue1.0
1.每个组件模板不支持代码片段组件中模板之前<template> <h3>as</h3></template>现在 必须要有根元素 包裹住所有代码< ...
- vue2.0 $router和$route的区别
在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数. 在路由跳转的时候除了用router-link标签以外需要 ...
- vue-cli的版本查看及vue2.x和vue3.0的区别
链接:https://www.cnblogs.com/wyongz/p/11505048.html 链接2:https://blog.csdn.net/weixin_37745913/article/ ...
- vue2.x 总结
1.独立构建vs运行时构建 在按照vue1.0的配置配置好webpack后,会出现Failed to mount component: template or render function not ...
- vue2.0 之 生命周期
一.vue1.x与vue2.x生命周期的变化区别及含义表(图表摘自网络) 二.vue2.x生命周期图和各阶段具体含义 beforecreated:el 和 data 并未初始化 created: ...
- vue2.0配置路由
配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...
- vue2.0 vs vue
vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> < ...
随机推荐
- idea奇葩问题汇总
1.用idea在tomcat里运行普通的springMVC项目,用nacos做为配置中心,通过@NacosValue来读取配置中心的值,配置了autoRefreshed = true但是不起作用,读取 ...
- Redis数据类型:Sorted Sets操作指令
Redis数据类型:Sorted Sets操作指令 Sorted Sets常用操作指令 Sorted Sets,本质是一个有序的Sets,其实在原来的Sets集合中对每一个元素新增了一个属性Score ...
- SpringBoot jar程序配置成服务运行
windows 版本 http://www.cppblog.com/aurain/archive/2014/01/23/205534.aspx linux 版本 https://blog.csdn.n ...
- hdu-4185.loiol_skimming(简单二分匹配模型)
/************************************************************************* > File Name: hdu-4185. ...
- 【题解】Cow Relays
题目大意 求在一张有\(m\)条边无向连通图中,点\(s\)到点\(t\)的经过\(k\)条边的最短路(\(1 \leq m \leq 100\),\(1 \leq k \leq 10^6\)). ...
- 2019 Multi-University Training Contest 4 - 1010 - Minimal Power of Prime
http://acm.hdu.edu.cn/showproblem.php?pid=6623 题意,给50000个1e18级别的数N,求它质因数分解里面的最小的指数(不算0) 比赛的时候给划了一个1e ...
- Python 3实现网页爬虫
1 什么是网页爬虫 网络爬虫( 网页蜘蛛,网络机器人,网页追逐者,自动索引,模拟程序)是一种按照一定的规则自动地抓取互联网信息的程序或者脚本,从互联网上抓取对于我们有价值的信息.Tips:自动提取网页 ...
- c++知识点总结3
http://akaedu.github.io/book/ week1 引用:相当于变量的别名.下面r和n就相当于同一回事 ; int &r=n; 引用做函数参数: void swap(int ...
- wxpython菜单栏、子菜单栏、弹出菜单栏、状态栏小程序学习源代码分享
#coding=utf-8 import wx class MyFrame(wx.Frame): def __init__(self): wx.Frame.__init__(self,None,-1, ...
- Django 的 logging日志文件配置
在Django的settings配置文件里配置以下信息: import os BASE_LOG_DIR = os.path.join(BASE_DIR , "log") # log ...