在vue使用的过程中会碰上各种各样的报错,我现在来整理一下,方便查询。
一、vue中创建组件碰上的报错
在components文件夹下创建同级组件Hello.vue,在主组件App.vue中调用,我先在script标签中引入地址import Hello from "./components/Hello";然后在methods下components: {
Hello
}
然后就会出现下图的报错,我百思不得其解我没用sass啊,可是我忘了,我使用的是快捷键,在Hello.vue页面自动生成作用于局部的标签<style lang="scss">
</style>
我打开页面一行一行的排查,看见多了这个标签,删除之后就恢复正常了或者把lang="scss"删除就OK了。
二、动态创建img
众所周知(用下达康书记的经典语句)在vue中放置图片的有两个文件夹一个static静态资源还有一个是在src下的assets,这两个有什么区别呢,assets是相对,里边的文件是压缩之后的;static是绝对没有压缩之前的文件,下边就是实现动态img的小案例;
在vue文件中我写一个<img src="./../assets/1 (2).jpg" alt>标签浏览器可以显示图片,我理所应当的就认为动态创建的时候也可以我就循环图片了<img alt='图片无效' v-for="(ite,index) in img" :src="ite" :key=index width="200px" height="120px" >,然后在data里边我写下如下代码:使用的是assets下的图片
img: [
"./../assets/1 (2).jpg",
"./../assets/1 (2).jpg",
"./../assets/1 (2).jpg",
"./../assets/1 (4).jpg",
"./../assets/1 (5).jpg"
],
不负所望的它图片不显示,检查的时候,显示有img就是没有宽高,就像下图:
当我换成在static下的图片就可以了
img: [
"../../static/1 (6).jpg",
"../../static/1 (2).jpg",
"../../static/1 (7).jpg",
"../../static/1 (4).jpg",
"../../static/1 (5).jpg"
],
这样写的话,动态图片完美显示!!!