Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
安装
初次学习时候可以使用CDN引入最新版
1
| <script src="https://unpkg.com/vue@next"></script>
|
但是对于项目来说，这样引入可能导致Vue更新后原来的功能出现问题
Hello Vue
Vue页面的整体是这样的结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ hello }}</p>
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AppData = {
data(){
return{
hello: "Hello Vue"
}
},
};
Vue.createApp(AppData).mount("#app");
</script>
</html>
|
首先引入Vue，向Vue的createApp方法中传入一个JS对象，程序中的数据properties在data方法中，（注意这里的data是函数，用return返回JSON，在data中我们定义了一个键值对hello: "Hello Vue"
其次使用createApp方法创建Vue程序，使用mount绑定HTML中的元素
在HTML中使用{{ hello }}来指定变量，渲染时程序会将hello替换成其值Hello Vue
响应式渲染
程序中显示的数据都是响应式的，这意味这改变这些数据，在页面中也会实时的渲染改变，比如下面这个例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<div id="app">
Counter: {{counter}}
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AppData = {
data(){
return{
counter: 0
}
},
mounted(){
setInterval(()=>{
this.counter++;
},500)
}
};
Vue.createApp(AppData).mount("#app");
</script>
|
渲染页面可以发现counter会一直增加
绑定元素属性
可以使用v-bind指令来绑定HTML元素的属性，绑定之后就会和properties保持一致，如下所示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <body>
<div id="app">
<p v-bind:title="message">鼠标悬停查看title</p>
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AppData = {
data(){
return{
message: "现在的时间是" + new Date().toLocaleTimeString()
}
}
};
Vue.createApp(AppData).mount("#app");
</script>
|
绑定
绑定事件
使用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="app">
<p v-on:click="reverseMessage">{{ message }}</p>
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AppData = {
data(){
return{
message: "反转消息！"
}
},
methods:{
reverseMessage(){
this.message=this.message
.split('')
.reverse()
.join('');
}
}
};
Vue.createApp(AppData).mount("#app");
</script>
|
方法要放在methods中，在Vue调用时要传入methods中定义的函数
绑定表单
使用v-model指令可以实现表单和数据的双向绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id="app">
<p>表单信息：{{ message }}</p>
<input v-model="message" />
</div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
const AppData = {
data(){
return{
message: "Hello Vue"
}
}
};
Vue.createApp(AppData).mount("#app");
</script>
|
条件和循环
使用v-if指令可以判断条件后在选择渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="conditional-rendering">
<span v-if="seen">现在你看到我了</span>
</div>
<script>
const ConditionalRendering = {
data() {
return {
seen: true
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering')
</script>
|
使用v-for来循环列表，用表达式”element in list”表示列表中的每个元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
const ListRendering = {
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering')
</script>
|