写Vue实战项目时遇到的问题

1、使用v-for循环的时候报错

这是因为我们安装了ESLint插件，对vue进行了eslint检查，只需将这个规则检查屏蔽掉即可，具体操作如下： 
文件–》首选项–》设置–》在搜索框中输入：vetur.validation.template–》找到vetur.validation.template：true–》将vetur.validation.template：true在右栏框中进行重置为false就ok了

 

2、使用v-for去绑定图片的src

html这么写没有问题，最重要的是你获取数据的时候图片的src路径数据要加上require（‘src’）不然获取不了图片路径

用require解决的原因很简单，webpack官网大图告诉我们，资源经过loader处理，变成处理好的文件。如果不用require的话，图片资源是不会加入的，所以肯定是404了

 

3、根据获取的值去采用对应的类名

这里使用三元表达式

官方文档https://cn.vuejs.org/v2/guide/class-and-style.html有两种写法 我是用第二种实现三元表达式

 

<div v-bind:class="{ active: isActive }"></div>

<div v-bind:class="[activeClass, errorClass]">

 

4、Vue2.0项目中使用axios 一开始json文件放在根目录下，怎么访问都是报错404

后来百度了一下，讲json放到了static目录下就可以访问了

这可能关于到脚手架的配置文件中定义了只会加载static文件夹中的文件  //引用其他大佬说的话，具体因为什么尚不知

 

5、使用axios获取数据之后，不能为组件的的数据赋值

原因：

在请求执行成功后执行回调函数中的内容，回调函数处于其它函数的内部this不会与任何对象绑定，为undefined。

解决方案：

一）将指向vue对象的this赋值给外部方法定义的属性，然后在内部方法中使用该属性

二）使用箭头函数

 

6、使用vue-router的时候

按道理，配置好main.js文件应该就可以

我的项目是这么配置：

可是输入/detail路径，怎么跳都回到HelloWorld组件

后来mode:'history', 就可以了

具体原因，要去看路由的实现