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. Android群英传笔记——摘要,概述,新的出发点,温故而知新,可以为师矣!

    Android群英传笔记--摘要,概述,新的出发点,温故而知新,可以为师矣! 当工作的越久,就越感到力不从心了,基础和理解才是最重要的,所以买了两本书,医生的<Android群英传>和主席 ...

  2. IP网际协议 - IP首部,IP路由选择,子网掩码

    IP首部 4个字节的32 bit值以下面的次序传输:首先是0-7 bit,其次8-15 bit,然后1 6-23 bit,最后是24~31 bit.这种传输次序称作big endian字节序.由于T ...

  3. gtk+2.0中GtkObject结构中没有klass成员的解决办法

    gtk+2.0中一些较老的程序中会有如下的代码: #define EVENT_METHOD(obj, method) GTK_WIDGET_CLASS(GTK_OBJECT(obj)->klas ...

  4. ZooKeeper的快速搭建

    本文是ZooKeeper的快速搭建,旨在帮助大家以最快的速度完成一个ZK集群的搭建,以便开展其它工作.本方不包含多余说明及任何调优方面的高级配置.如果要进行更深一层次的配置,请移步<ZooKee ...

  5. OpenCV混合高斯模型函数注释说明

    OpenCV混合高斯模型函数注释说明 一.cvaux.h #define CV_BGFG_MOG_MAX_NGAUSSIANS 500 //高斯背景检测算法的默认参数设置 #define CV_BGF ...

  6. 查询oracle数据库的数据库名、实例名、ORACLE_SID

    数据库名.实例名.数据库域名.全局数据库名.服务名 , 这是几个令很多初学者容易混淆的概念.相信很多初学者都与我一样被标题上这些个概念搞得一头雾水.我们现在就来把它们弄个明白. 一.数据库名 什么是数 ...

  7. 恶补web之六:javascript知识(1)

    javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...

  8. 基于event 实现的线程安全的优先队列(python实现)

    event 事件是个很不错的线程同步,以及线程通信的机制,在python的许多源代码中都基于event实现了很多的线程安全,支持并发,线程通信的库 对于优先队列的堆实现,请看<python下实现 ...

  9. CSS基础:层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

  10. IntelliJ IDEA下Cannot resolve symbol XXX的解决方法

    Idea导入maven项目后,运行能通过,但是打开一些类后,会出现Cannot resolve symbol XXX的错误提示. 考虑几种可能: 1.JDK版本,设置JDK和Maven的JDK版本. ...