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. Windows系统版本判定那些事儿

    v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...

  2. 安卓TV开发(概述) 智能电视之视觉设计和体验分析

         转载说明出处 :http://blog.csdn.net/sk719887916, 作者:skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家居,以及可穿戴设备的大 ...

  3. linux下的系统垃圾清理

    sudo apt-get autoclean --清理旧版本的软件缓存 sudo apt-get clean--清理所有软件缓存 sudo apt-get autoremove--删除系统不再使用的孤 ...

  4. window7如何配置修改环境变量

    http://jingyan.baidu.com/article/b24f6c82cba6dc86bfe5da9f.html

  5. Java中使用有返回值的线程

    在创建多线程程序的时候,我们常实现Runnable接口,Runnable没有返回值,要想获得返回值,Java5提供了一个新的接口Callable,可以获取线程中的返回值,但是获取线程的返回值的时候,需 ...

  6. JAVA线程与线程、进程与进程间通信

    I.线程与线程间通信 一.基本概念以及线程与进程之间的区别联系: 关于进程和线程,首先从定义上理解就有所不同1.进程是什么?是具有一定独立功能的程序.它是系统进行资源分配和调度的一个独立单位,重点在系 ...

  7. JasperReport的安装

    下载网址http://community.jaspersoft.com/community-download

  8. IBM RAD 快捷键

    Ctrl+1         快速修复(最经典的快捷键,就不用多说了) Ctrl+D:        删除当前行 Ctrl+Alt+↓    复制当前行到下一行(复制增加) Ctrl+Alt+↑    ...

  9. R实战 第七篇:网格(grid)

    grid包是R底层的图形系统,可以绘制几乎所有的图形.除了绘制图形之外,grid包还能对图形进行布局.在绘图时,有时候会遇到这样一种情景,客户想把多个代表不同KPI的图形分布到同一个画布(Page)上 ...

  10. Day13 CSS的与应用

    老师博客:http://www.cnblogs.com/yuanchenqi/articles/6856399.html 1,CSS选择器的应用: CSS规则有两个主要部分构成:选择器,以及一条或多条 ...