1.请求数据

用本地json数据进行mock的时候,一般放在created 过程就Ok了,这样可以尽早获取数据;如果有依赖dom必须存在的清空,就放到mounted里面,具体用法如下所示:

// created()方法:
created() {
this.$http.get('api/goods').then(res => {
this.goods = res.body.data;
// console.log(this.goods); }, res => {
alert('数据请求失败');
});
} // mounted方法:
mounted() {
this.$nextTick(function() { //一定要有这一步~
this.View();
})
},
methods: {
View() {
this.$http.get('api/seller').then(res => {
this.seller = res.body.data;
// console.log(this.seller);
}, res => {
alert('数据请求失败');
});
}
}

附上一张vue2.0的官方生命周期图:

2.methods与computed

才开始填坑的时候其实可以这样想两者的关系:

methods是要用@click来调用的函数,

computed是计算属性,比如一个total(),你可以直接用{{}}来使用total()计算出来的值,比如

{{total}}

。可以把定义在computed里面的计算方法当成一个具体的值,因为最后通过计算得到的也的确是一个值(字符串,数字...)。

其他变化:

1.目前的项目几乎每个页面都用到了1.0的ready钩子函数,然而2.0已废弃不用,进而使用mounted替换,同时还新增了beforeMount、beforeUpdate、updated等,私以为越来越向react看齐了有木有。。

beforeUpdate的作用是在页面初始渲染视图之后,一旦监测到data发生变化,在变化的数据重新渲染视图之前会触发beforeUpdate钩子函数,这也是重新渲染之前最后修改数据的机会

updated的作用则是在data发生变化渲染更新视图之后触发。

2.同时废弃的还有events、$dispatch、$broadcast,官方推荐使用vuex或者全局的事件驱动,然而废弃的这些方法在vux UI框架中很多地方都有使用,无疑在项目中用到它的地方在2.0版本都会不起作用,甚至会报错。

3.v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记,然后通过this.$refs获取

例如 获取方法为this.$refs.a 对于自定义组件同样适用

4.$els 是用来获取元素DOM对象,这个也废弃不用,$refs可以起到替代性作用。

5.v-for循环中常用的$index、$key也已不支持使用,trackby被key属性替换。

6.自定义组件中的partial,弃用,这个一直没用到

7.新增 v-once指令

8.新增 propsData

9.新增 render

vue2.0填坑有感(持续更新ing)的更多相关文章

  1. H5填坑笔记--持续更新

    最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...

  2. Vue 填坑系列(持续更新...)

    1.遇到页面显示不更新,数据已更新情况 vue-cli中: this.$nextTick(function () { this.x=x; })     以js引入vue的网页中: this.$set( ...

  3. angularcli填坑系列(持续更新...)

    1.在xx.ts中引入css样式无效 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls ...

  4. vue 项目中的坑 在项目中遇到 持续更新ing

    1.vue2.0 不支持 v-html 后绑定的内容使用过滤,可是有时候过滤必须使用-----------解决:通过methods中定义方法 然后 v-html='myMethods(string)' ...

  5. Linux命令(持续更新ing)

    *.命令语法:  a.在进行参数设定时,通常为“-”号,若为完整参数名称,则输入“--”符号;  b.指令太长的时候,可以使用“\”符号使指令连续到下一行;  c.各种符号的意义:    ''     ...

  6. AutoJS4.1.0实战教程 ---火热持续更新中

    这个时代假货太多,虚假广告更是充斥着整个互联网.尤其是那个传奇的我都无语了.好几个明xing代言,问题是太假了……我好奇的是那么虚假怎么就没人管呢,XX部干嘛呢……另外互联网刷视频赚钱就是个炒作.几百 ...

  7. vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

    最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...

  8. FireFox所支持的全部标签(持续更新ing)

    近期研究上各个浏览器的差别,得到一些资料,FireFox眼下所支持的全部标签类型,持续更新,供大家參考和学习,不喜勿喷哦 http://mxr.mozilla.org/seamonkey/source ...

  9. iOS横竖屏切换的一些坑(持续更新)

    最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是想旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也 ...

随机推荐

  1. Access text files using SQL statements by DB Query Analyzer

    Access text files using SQL statements by DB Query Analyzer Ma Gen feng (Guangdong Unitoll Services ...

  2. java的finalize方法使用

    1. finalize的作用 finalize()是Object的protected方法,子类可以覆盖该方法以实现资源清理工作,GC在回收对象之前调用该方法. finalize()与C++中的析构函数 ...

  3. Spring Cloud入门教程 - Zuul实现API网关和请求过滤

    简介 Zuul是Spring Cloud提供的api网关和过滤组件,它提供如下功能: 认证 过滤 压力测试 Canary测试 动态路由 服务迁移 负载均衡 安全 静态请求处理 动态流量管理 在本教程中 ...

  4. py-oauth2包使用简记

    接前两天线上项目py2升级py3的书,老廖的一个旧库snspy,他已经不维护了,用的api又比较久,不好升级,最后速度找了个OAuth库取代了它,由于时间紧张,直接在pypi上搜索了一下,找到这个支持 ...

  5. ImageMagick

    http://blog.csdn.net/lan861698789/article/details/7738383 1.官网 http://www.imagemagick.org/script/ind ...

  6. Effective Java 第三版——41.使用标记接口定义类型

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  7. Invoke-ASCmd 部署SSAS database

    Install-Module -Name SqlServer -RequiredVersion 21.0.17099 -AllowClobberInvoke-ASCmd -Server 10.162. ...

  8. golang自定义路由控制实现(一)

        由于本人之前一直是Java Coder,在Java web开发中其实大家都很依赖框架,所以当在学习Golang的时候,自己便想着在Go开发中脱离框架,自己动手造框架来练习.通过学习借鉴Java ...

  9. C# 获取当前年份的周期,周期所在日期范围

    最近有一个项目要用到年份周期,用于数据统计图表展示使用,当中用到年份周期,以及年份周期所在的日期范围.当初设想通过已知数据来换算年份周期,经过搜索资料发现通过数据库SQL语句来做,反而更加复杂.现在改 ...

  10. Linnux入门之简介

    一.Linux简介 Minix(教授实验) -> Linux(大三学生Linus)企鹅作为吉祥物 linux主要分为内核版本和发行版本 linux 内核版本 :官网下载:https://www. ...