vue2.0使用(2)
vue2.0后,vue作者不再对vue-resource更新,转而推荐axios。axios类似于ajax与promise的合体。
#在利用axios的post方法带参数请求,显示跨域,后台无法接收数据
*原因在于axios发送的参数格式为“Form Data”,需要利用qs模块对其序列化:
import qs from 'qs'
axios.post('/edit', qs.stringify(params));
#vue如何调试:
*第一种:chrom应用商店里下载vue devtools,安装好后会在浏览器右上角添加vue tools的图标,当调试的时候点击该图标,可以在控制台上显示Vue调试面板
第二种:通过更改webpack配置来进行调试。找到build文件夹下的webpack.dev.conf.js,找到“devtool”属性,将值改为“source-map”
这样就可以在控制台上,对method方法进行加断点调试了。
#如何在vue里面写less
*首先需要安装less-loader:npm install less-loader --save-dev
然后在style标签里加上 lang="less”的属性即可使用less了,如
<style lang="less"></style>
#如何在创建组件后立即执行该组件的一个方法:
*创建vue实例的时候利用绑定mounted或created钩子的方式,然后在组件中定义mounted的方法,如:
new Vue({
template: '<TileList/>',
components: { TileList }
}).$mount('#main');
<script lang="less">
export default {
data(){
},
methods:{
getTiles(){
return true;
}
},
mounted() {
this.getTiles();
}
}
</script>
其中beforeMount、mounted、beforeCreated、created等为vue实例的生命周期钩子,它们会在该实例的不同生命周期中调用相应的方法。
#vue的UI框架element-ui
*如果用vue搭建项目,我推荐用element-ui这个UI框架。这个UI框架是由饿了么前端出品,基于vue2.0的一套组件库,界面风格类似于bootstrap,这个是它的官网地址http://element.eleme.io/#/zh-CN/component/installation,在这里面提供了很多不错的组件实例,基本上需要的组件都可以在上面找到,方便快捷,适合网站快速成型。