今天在写vue时遇到了了一些关于vue的语法报错问题,下面整理一些主要报错:
刚开始时可能会遇到的:
- 下面这段报错主要是因为预期缩进4个空格。原因是vue在检测写法规则的时候,只认空格,不认识Tab的缩进。
只要在文件-->设置中找到下面这行代码将其添加在用户设置区将4改为2即可
"editor.tabSize": 4, //将4改为2
Expected indentation of 4 spaces but found 1 tab
- 下面这个是关于vue在写组件标签无法tab补全时将其设置为补全:
//这个修改位置与上面相同,在默认设置中找到下面代码将false改为true
"emmet.triggerExpansionOnTab": true,
- strings must use singlequote 报错
//strings must use singlequote
//解释:字符串必须用singlequote
//原因:字符串必须用单引号
//解决办法:将报错位置的双引号改为单引号即可
- Missing space before function parentheses
如下写法就会报错
原因解决:写函数时需要在括号两边留空格,加上空格即可
//例如
created(){
}
- 使用三元运算问题
报错信息没记,但是在使用三元运算时会出现报错 解决办法就是:
当为true时值不变就可以用“||”代替三元运算。 - 使用vue获取自定义属性值
//通过e.target.getAttribute
<div id="app">
<button data-page="2" @click="getPage($event)"></button>
</div>
const app = new Vue({
el: "#app",
methods: {
getPage(e){
console.log(e.target.getAttribute('data-page'))
}
}
}
- 动态传src值时需要在src前加“:”
//item.img为动态值
<img :src="item.img" alt="" width="100%" v-else>
开启ESLint可以规范自己代码,让自己的代码更规范化,大家可以尝试安装vue项目时开启ESLint