vue2.0填坑有感(持续更新ing)
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()计算出来的值,比如
。可以把定义在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)的更多相关文章
- H5填坑笔记--持续更新
最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在i ...
- Vue 填坑系列(持续更新...)
1.遇到页面显示不更新,数据已更新情况 vue-cli中: this.$nextTick(function () { this.x=x; }) 以js引入vue的网页中: this.$set( ...
- angularcli填坑系列(持续更新...)
1.在xx.ts中引入css样式无效 @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls ...
- vue 项目中的坑 在项目中遇到 持续更新ing
1.vue2.0 不支持 v-html 后绑定的内容使用过滤,可是有时候过滤必须使用-----------解决:通过methods中定义方法 然后 v-html='myMethods(string)' ...
- Linux命令(持续更新ing)
*.命令语法: a.在进行参数设定时,通常为“-”号,若为完整参数名称,则输入“--”符号; b.指令太长的时候,可以使用“\”符号使指令连续到下一行; c.各种符号的意义: '' ...
- AutoJS4.1.0实战教程 ---火热持续更新中
这个时代假货太多,虚假广告更是充斥着整个互联网.尤其是那个传奇的我都无语了.好几个明xing代言,问题是太假了……我好奇的是那么虚假怎么就没人管呢,XX部干嘛呢……另外互联网刷视频赚钱就是个炒作.几百 ...
- vue2.0那些坑之使用elementUI后v-on:click事件不生效问题
最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图: 我想阻止冒泡事件,发现无效.这里将@click换成了@cli ...
- FireFox所支持的全部标签(持续更新ing)
近期研究上各个浏览器的差别,得到一些资料,FireFox眼下所支持的全部标签类型,持续更新,供大家參考和学习,不喜勿喷哦 http://mxr.mozilla.org/seamonkey/source ...
- iOS横竖屏切换的一些坑(持续更新)
最近在做视频类的App,遇到视频滚动播放的坑,紧接着就是横竖屏问题.之前太过天真不想做横竖屏配置.只是想旋转视频View,但是分享什么的包括AlertView还是竖屏样式,项目着急上线(1周提交一次也 ...
随机推荐
- PS 图像调整算法——亮度调整
这个算法是参考自 阿发伯 的博客,在此对 阿发伯 表示感谢, http://blog.csdn.net/maozefa 亮度调整 非线性亮度调整: 对于R,G,B三个通道,每个通道增加相同的增量. 线 ...
- 【Qt编程】基于Qt的词典开发系列<四>--无边框窗口的缩放与拖动
在现在,绝大多数软件都向着简洁,时尚发展.就拿有道的单词本和我做的单词本来说,绝大多数用户肯定喜欢我所做的单词本(就单单界面,关于颜色搭配和布局问题,大家就不要在意了). 有道的单词本: 我所做的单词 ...
- PS 色调——老照片效果
这就是通过调色使照片显得发黄. R_new=0.393*R+0.769*G+0.189*B; G_new=0.349*R+0.686*G+0.168*B; B_new=0.272*R+0.534*G+ ...
- java--加强之 jdk1.5简单新特性,枚举,注解
转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9944041 Jdk1.51新特性(静态导入,可变参数,加强for循环,自动拆装箱) 08.ja ...
- StickyListHeaders的使用
我们知道在ios中字母的导航有悬停的效果,在android中,git上有大神实现了这种悬停的功能,我们只要将普通的Listview改为StickyListHeadersListView然后设置adap ...
- 开源组件photoView学习
功能特性 支持放缩超出边界,多点触控和双击事件 滚动和滑动 和ViewPager等能完美兼容 矩阵变化等有回调,方便前台其他展示的改变 单击,长按都有回调提醒 源码剖析 那么怎么来学习他的源码呢,我们 ...
- 总结一下 Spring的IOC、DI
国庆节刚过,应一些朋友的提问,总结一下Spring中IOC也即DI的通俗理解. 网友wm5920解释: IOC控制反转:说的是创建对象实例的控制权从代码控制剥离到IOC容器控制,实际就是你在xml文件 ...
- mybatis中#{}与${}的区别
今天学习了下mybatis的查询,了解到了#{}与${}的区别, 配置文件如下: <?xml version="1.0" encoding="UTF-8" ...
- Django(三)runserver 命令源码分析
应用环境 windows7 pycharm2018 profession python3.6 django2.0 我们在pycharm 启动django项目时,常常有这么一个命令操作: python ...
- Scala编程入门---数组操作之Array.ArrayBuffer以及遍历数组
在Scala中,Array代表的含义与Java类似,也是长度不可改变的数组.此外,由于Scala与java都是运行在JVM中,双方可以互相调用,因此Scala数组底层实际上是java数组.列如字符串数 ...