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

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

写Vue实战项目时遇到的问题_第1张图片

写Vue实战项目时遇到的问题_第2张图片

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

写Vue实战项目时遇到的问题_第3张图片

 

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

写Vue实战项目时遇到的问题_第4张图片

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

写Vue实战项目时遇到的问题_第5张图片

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

 

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

这里使用三元表达式

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

 

 

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

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

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

写Vue实战项目时遇到的问题_第6张图片

 

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

原因:

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

解决方案:

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

二)使用箭头函数

 

6、使用vue-router的时候

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

我的项目是这么配置:写Vue实战项目时遇到的问题_第7张图片

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

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

写Vue实战项目时遇到的问题_第8张图片

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

你可能感兴趣的:(写Vue实战项目时遇到的问题)