vue2.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:
};
3. 生命周期
之前:
init
created
beforeCompile
compiled
ready √ -> mounted
beforeDestroy
destroyed
现在:
beforeCreate 组件实例刚刚被创建,属性都没有
created 实例已经创建完成,属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后,代替之前ready *
beforeUpdate 组件更新之前
updated 组件更新完毕 *
beforeDestroy 组件销毁前
destroyed 组件销毁后
4. 循环
2.0里面默认就可以添加重复数据
去掉了隐式一些变量
$index $key
之前:
v-for="(index,val) in array"
现在:
v-for="(val,index) in array"
v-for="(val,key,index) in json"
5. track-by="id"
变成
<li v-for="(val,index) in arr" :key="index">
6. 自定义键盘指令
之前:Vue.directive('on').keyCodes.ctrl=17;
现在: Vue.config.keyCodes.ctrl=17
7. 过滤器
之前:
系统就自带很多过滤
{{msg | currency}}
{{msg | json}}
....
limitBy
filterBy
.....
一些简单功能,自己通过js实现
到了2.0, 内置过滤器,全部删除了
之前需要json过滤器转的,现在不需要了,默认已经转了
lodash 工具库 _.debounce(fn,200)
自定义过滤器——还有
但是,自定义过滤器传参
之前: {{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.0的变化的更多相关文章
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
- vue2.0路由变化1
路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...
- 【重点突破】—— Vue1.0到Vue2.0的变化
前言: 本文参考作者:_So_ 和 我是某慧 的博文,重点梳理Vue1.0升级到Vue2.0后在开发中要注意的不同,以做学习. 组件模板不再支持片段代码,必须有一个顶级元素包裹,例如: ...
- vue2.0有哪些变化
vue2.0之后有哪些变化: 1.每个组件模板template,不再支持片段代码 之前: <template> <h3>vue-router+vue-loader</h3 ...
- VUE2.0不可忽视的很多变化
今天使用webpack-sample初始一个vue-cli项目,在app.vue文件中添加了个钩子函数ready,可是ready内的事件一直不执行,检查了webpack文件和package.json也 ...
- vue2.0变化
之前有很多的vue知识总结都是围绕1.0版本实现的,下面主要总结一下2.0相对于1.0的一些变化. 组件定义 在vue1.0中,我们有使用vue.extend()来创建组件构造器继而创建组件实例,如下 ...
- Vue2.0中v-for迭代语法变化(key、index)【转】
转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...
- Vue2.0以后,有哪些变化
最近移动端项目版本升级,Vue由之前的1.0升级到2.3,那么,Vue2.0之后,有哪些细节的变化呢,现在总结如下: 1.在每个组件模板,不再支持片段代码 组件中模板: 之前: <templat ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
随机推荐
- 也谈Flash mmorpg地图问题【转】
网上看一篇关于目前几个流行flash mmorpg地图实现的分析,这里也想说说自己的一些看法. 常见的三种方式:1.整图2.Tile元素拼装3.栅格化切片 整图 整图加载很好理解直接加载一张背景图.这 ...
- 梦工厂实验室 取石子之fans 博弈
问题 D: 取石子之fans 时间限制: 1 Sec 内存限制: 64 MB提交: 57 解决: 26[提交][状态][讨论版] 题目描述 Yougth和Hrdv玩一个游戏,拿出n个石子摆成一圈, ...
- 201621123016 《Java程序设计》第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题集题目) 1.1 实验总结.并回答:列举至 ...
- 201621123016《Java程序设计》第三周学习总结
1. 本周学习总结 1.初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- Android真机调测Profiler
U3D中的Profile也是可以直接在链接安卓设备运行游戏下查看的,导出真机链接U3D的Profile看数据,这样能更好的测试具体原因. 大概看了下官方的做法,看了几张帖子顺带把做法记录下来. 参考: ...
- 小奇的仓库(树形DP)
「题目背景」 小奇采的矿实在太多了,它准备在喵星系建个矿石仓库.令它无语的是,喵星系的货运飞船引擎还停留在上元时代! 「问题描述」 喵星系有n个星球,星球以及星球间的航线形成一棵树. 从星球a到星球b ...
- C#连接Sqlite实现单表操作
今天我们来了解下VS使用的众多数据库中比较轻量的数据库SQLITE,好处当然就在于“轻~”!!!.自己理解
- iOS 利用模态视图实现带黑色蒙版的底部弹窗
本demo仅适用于iOS8及以上系统. 本文将使用autolayout+storyboard来实现弹窗 第一步.storyboard创建界面 1.打开storyboard 拖一个UIViewcontr ...
- typescript学习笔记(三)---接口
关于第二章的学习笔记是变量声明. 接口:TypeScript的核心原则之一是对值所具有的结构进行类型检查. 它有时被称做“鸭式辨型法”或“结构性子类型化”. 在TypeScript里,接口的作用就是为 ...