Vue常见语法规则报错问题

今天在写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