入门 Vue.js会碰到的常见问题

入门 Vue.js会碰到的常见问题

经过了上一篇《使用Vue-cli构建Vue项目后》，已经可以搭建出了一个空白的Vue项目了。我们现在就可以阅读Vue官方的手册，照着他写一些简单的例子。

搭建好Vue项目后我做的第一件事情就是先把Vue官网的起步例子都手写一遍下来跑一篇，然后记录下了一些新手会遇到的一些常见问题千万不要复制代码，要自己手写。

空格问题，导致编译出错。

Vue.js 对代码要求非常严格，必须按照格式写。我照着官网写的第一个Hello World就编译报错了。

对象赋值空格

# 正确示范
new Vue({
    el: '#app'
})

# 错误示范
new Vue({
    el : '#app'
})

所有以对象属性赋值的操作，都必须以属性名:（空格）值的形式书写，属性名与冒号之间不能有空格，冒号与值之间必须有空格。

# 正确示范
{ text: 'abc' }
# 错误示范，以下三种均是错误的
{ text : 'abc' }
{text: 'abc'}
{ text: 'abc'}

运算符空格

使用=或者+等运算符的时候两边必须有空格

# 正确示范
var a = '123'
#错误示范
var a= '123'
var a ='123'

函数空格

()两边都必须加空格，没有参数的时候括号内部不能有空格

# 正确示范
function fun () { ... }
# 错误示范
function fun(){ ... }
function fun ( ) { ... }

有多个参数的时候,分隔符右侧必须有空格，左边不能有空格

# 正确示范
function fun (a, b) { ... }
# 错误示范
function fun (a , b) { ... }
function fun (a ,b) { ... }

其他空格

if和for语句的空格处理办法和上面函数是一样的，这里就不多说，尝试一遍就清楚了

分号结束符

以前写JS的时候，喜欢在每一行的结束加上;作为结束，但是这里就不用了。如果写了反而会报错。

# 正确示范
var a = '123'
# 错误示范
var a = '123';

暂时碰到的问题就是这些，后面如果有新的问题，则在这里追加