Gather ye rosebuds while ye may

快速上手Vue


这篇文章的目的是让你快速上手Vue。
如果你想知道Vue是什么,请看Vue的官方文档
官方文档中的入门已经写得足够好了,这里只是其他几个例子而已。
本篇中用到的例子来自于 Vue.js - Getting Startedcoligo - VueJs: The Basicstutorialzine - 5 Practical Examples For Learning Vue.js和我自己。
顺便提一句,中文的「Vue入门」类型的文章真是少,上面几个写的很可以了。


一个html,一个例子

如果你是照着官方文档,从npm install -g vue-cli一步一步来,相信你的第一个例子会通过npm run dev开始。
这样做的话你的调试会变得异常方便:有webpack,JSlint,同步刷新等等。
但是这篇文章中的所有例子都只需要创建一个新的html,没有srcpackage.js,不用npm,直接拖到浏览器中就可以运行。
毕竟Vue.js是js,快速上手Vue要快速上手。
首先准备一个html文件

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style>body{text-align:center}</style>
</head>
<body>
hello world!
</body>
</html>

对于下面的例子你要做的就是复制-粘贴-拖到浏览器里

new Vue()el开始

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>

<div id="example1">
{{ message }}
</div>

<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<!-- vue.js 的加载视情况而定,可以用NPM,Bower,这里使用了国内的CDN -->
<script type="text/javascript">

new Vue({
el: '#example1',
data: {
message: 'Hello Vue.js!'
}
})

</script>
</body>

v-model双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>

<div id="example2">
<input type="text" v-model="greeting">
<p>{{ greeting }}</p>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>

new Vue({
el: '#example2',
data: {
greeting: 'Hello VueJs!'
}
});

</script>
</body>

请尝试将 div > p 中的{{ greeting }}改为{{ $data }}{{ $data | json }}{{ $data.greeting }}试试看。

v-on响应事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>

<div id="example3">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>

new Vue({
el: '#example3',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
}
}
});

</script>
</body>

请尝试将 button 中的v-on:click改为@click看看效果。

v-for和列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>

<div id="example4">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>

new Vue({
el: '#example4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue.js' },
{ text: 'Build Something Awesome' }
]
}
});

</script>

</body>

请尝试在 li 中添加{{ $index }}看看效果。

计算属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>

<div id="example5">
<input type="number" v-model="x">
<p>result: {{ doubleX }}</p>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
new Vue({
el: '#example5',
data: {
x: 1
},
computed: {
doubleX: function(){
return this.x*2;
}
}
});
</script>

</body>

请尝试将computed关键字改为methods,然后将{{ doubleX }}改为{{ doubleX() }}方法。


差不多就这几个简单点。
以上