去哪儿网的问题集合

112 阅读3分钟

1. 引入iconfont图标---symbol

vue项目引入iconfont【最简单方便的Symbol引用】(从下载到使用的步骤)_Program W的博客-CSDN博客 (除此之外还要在要使用的组件中写上icon的样式)

image.png

2.用了轮播图框架,第二天打开发现图片无法加载出来?————路径错误(相对路径)

image.png 不要用网址的照片,用本地的照片

链接: [自己解决在Vue中动态渲染图片不显示的问题_vue图片显示不出来_张浔的博客-CSDN博客] (blog.csdn.net/m0_58040147…)

更正后 image.png 参考官方文档vue-cli:介绍 | Vue CLI (vuejs.org)

image.png

2.1关于assets图片的引入

image.png

当引入单张图时。 当../不行的时候可以多用几个../就可以往上找到assets目录。

关于样式问题

3.用了ul包裹的img标签想给图片改大小的css样式不生效,用了2(上面)的方法也失败了。

image.png

image.png

:有图片显示说明不是路径的问题。

错误①是 样式嵌套错误,title不能直接包裹item-img,样式不生效。

正确写法:

image.png 错误②是图片放在了li标签外,所以样式不生效

下次图片和文字加起来用还是一个div包裹起来比较好!

3.1

image.png 子盒子一直不能贴着父盒子靠左,解开{行40}即可

3.2

问题描述:控制台有3个li标签,但是页面上只渲染出了最后一条li---样式冲突了

image.png

改正: image.png 原因: 给li加了position:absolute 所以他们重叠

注意,定位会覆盖掉css代码中的:float:left;让其失效。

4.如何引入axios?

1-在main.js中写入

image.png

2-在public中建js文件夹,把需要引入的后端数据本地json放入其中

image.png

3-在City里写方法引入

image.png 虽然要渲染的数据在这个页面,但是axios请求应该在整个首页一加载的时候就引入,所以写在City里(最后一张图就是HomeView ---- 改正:可以写在City中)

原因: 这个组件获取 Ajax 数据之后,可以把数据传给每个子组件 image.png

5.子组件在主页给父组件传值

image.png

如图:城市组件(绿色部分)给主页引入传值,不是引入给整个homeView(代表当前的整个主页),而是引入在header头部组件中!

写这两句即可

image.png

6.父组件给子组件传值

描述:父(City),子(List)组件传值的语法都写对了,但是子组件接收不到值? (实际上是vue 中父组件怎么将异步请求回来的数据传递给子组件---同步异步问题?)

父组件axios调用接口获取数据传给子组件正常情况下是取不到的,因为调用接口属于异步任务,初始的值为空

接口文件: image.png

父组件: image.png

子组件

image.png

问题在{行36}----父组件拿到值后未被赋值

image.png

应为:

image.png

6.1父组件给子组件传值

image.png

3部曲,注意{行6},要记得给子组件先进行绑定,否则子组件接收不到值。

7.报错原因: Avoid using non-primitive value as key, use string/number value instead

image.png

意思是:避免使用非基本值作为键,而是使用字符串/数字值

第二个错误的意思:检测到重复键:'[object object]'。这可能会导致更新错误。

错误代码:

image.png

修改后:

image.png

8.input 与li双向绑定,其他地方都没有写错,为什么li标签不能渲染绑定内容?

v-model报错 image.png

v-model位置写错了:不是写在div中,是写在input里

image.png

9.vue:axios请求本地json路径错误

json文件在public文件夹中的js文件夹时,路径为:(如下)

image.png