快速上手Vue
这篇文章的目的是让你快速上手Vue。
如果你想知道Vue是什么，请看Vue的官方文档。
官方文档中的入门已经写得足够好了，这里只是其他几个例子而已。
本篇中用到的例子来自于 Vue.js - Getting Started，coligo - VueJs: The Basics，tutorialzine - 5 Practical Examples For Learning Vue.js和我自己。
顺便提一句，中文的「Vue入门」类型的文章真是少，上面几个写的很可以了。
一个html，一个例子
如果你是照着官方文档，从npm install -g vue-cli一步一步来，相信你的第一个例子会通过npm run dev开始。
这样做的话你的调试会变得异常方便：有webpack，JSlint，同步刷新等等。
但是这篇文章中的所有例子都只需要创建一个新的html，没有src，package.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>
<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() }}方法。
差不多就这几个简单点。
以上