vue的使用一般有两种方式:一种是使用脚手架工具vue-cli;二是直接在项目引入vue.js;
最近写移动端项目直接在页面引入的vue.js,遇到一些问题,在此记录:
1、es6的使用问题
现象:使用import语法会报错
原因:普通项目不能识别es6语法
解决方法:1、不使用import语法,我和小伙伴用的extend,把组件的所有内容都包在里面,如下:
const Home = Vue.extend({
template: '这里是组件的内容',
data: function() {
return {}
},
methods: { },
mounted(){ },
created(){
})
然后配置路由:
const routes = [
{path:'/xxx',component:xxx}
];
2、使用babel将es6转换为es5;
备注:使用vue-cli脚手架时,会自动配置babel,无需再进行配置。
2、es6的兼容问题(iOS9系统下测试):
现象:页面加载进来是空白,没有任何内容!!!
原因:iOS9不支持es6语法。
解决方法:箭头函数、let和const声明,改为es5的写法。
注意:将箭头函数改为普通函数之后,this的指向会改变,函数里面所有的this都需要重新定义(我是在函数最开始的时候定义了var _this = this;然后之前箭头函数里所有的this改为_this即可)。