Vue敲代码遇SyntaxError？别怕，这些常见错误你get到了吗？

如果你在用Vue敲代码时遇到那个“SyntaxError: Unexpected token”特别烦人，其实正常得很，可能就是你模板上那些有点看不懂的表达式、括号放错位置或者是空格、回车乱七八糟。别慌，先仔细看下报错提示，找到问题所在，然后把它修复好就行了。接下来，我给你讲讲几种常见的语法错误及解决方法。

非法的JavaScript表达式

当学做Vue App的时候，你是不是也曾被Javascript给绕晕了？比如说，你想在模板里算个数字，结果拼错了符号，然后你就看到编译器开始犯二，找不到方向，最后一头雾水地给你报错。

  
{{1+1}}

如果想避免这些问题，那咱们就只能把所有的模板都塞满规矩的 JavaScript 代码。比如，这样一道简单的加法题“1+1”，你只需按照规矩来输入，别乱来，那么你的代码就能正常跑起来！

  
{{age=18}}

非法的括号使用

记住，用Vue做模板时别忘加左括号和右括号，不然编错了编译器会不懂，然后告诉你“语法错误：意外符号”。比如模板里多了括号或者又没用到，编译器就晕乎乎的，结果就出错！

  
{{age==18}}

注意模板代码中的小细节，比如是不是多了或少了些括号。这可是防止出错的好法子！

空格或换行符问题

  
{{ foo = ( bar + baz ) }}

别小看那些空格啊换行符啥的，乱来的话代码就错。如果模板里面都是没用的空格或多余的换行符，甚至还有话没说完，编译器可得疯掉

  
{{foo = bar + baz}}

搞定这事儿，得注意看模板里面空格跟回车别搞错。删掉那些没用的小点点，语法错误就容易处理！

别急着错，看下提示哪儿不对劲儿。剔除多余的话，换个说辞，顺带调整句子顺序。反复试试，慢慢来，用熟了就顺溜了，错误也就少了。

Vue开发中出现的“语法错误：意外符号”可是挺让人烦躁的。不过了解了这些常见问题，找到对应方法，咱们的编程技能和工作效率肯定能大大提高！

  

    {{foo}}