Vue 概述

本文将大致介绍 Vue，一套用于构建用户界面的渐进式 JavaScript 框架。

一、什么是 Vue ？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式：

  • 一方面，Vue 可以作为应用的一部分嵌入，并配合其它框架使用，而无需全部使用 Vue
  • 另一方面，可以选择性地使用 Vue 的一个或一些组件，而无需完整地使用整个 Vue

​

二、Vue 的特点

  • 解耦视图和数据
  • 组件可复用
  • 前端路由技术
  • 状态管理
  • 虚拟 DOM

​

三、Vue Devtools

可以在浏览器上安装 Vue Devtools。

它允许你在一个更友好的界面中审查和调试 Vue 应用。

​

四、下载和引入

1. 下载

安装 — Vue.js

2. 引入

通过本地文件引入：

1
<script src="路径"></script>

通过公共 CDN 引入：

1
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

开发时尽量使用未压缩的版本，它包含了完整的警告信息。

​

五、Vue 示例

1. Hello Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
    {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        	message: 'Hello Vue!'
    	}
	})
</script>

2. 列表展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
	<h1>{{message}}</h1>
	<ul>
		<li v-for="item in movies">{{item}}</li>
	</ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: "下面是电影列表",
            movies: ["电影1", "电影2", "电影3", "电影4"],
        }
    })
</script>

这个列表展示是响应式的，对数组的更改将会实时反映到页面中。

1
app.movies.push("电影5")

3. 计数器

实现方法 1：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
	<h2>当前计数：{{counter}}</h2>
	<input type="button" value="减" v-on:click="counter--">
	<input type="button" value="加" v-on:click="counter++">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0,
        }
    })
</script>

实现方法 2：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
	<h2>当前计数：{{counter}}</h2>
	<input type="button" value="减" v-on:click="sub">
	<input type="button" value="加" v-on:click="add">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0,
        },
        methods: {
            add: function() {
                this.counter++;
            },
            sub: function() {
                this.counter--;
            }
        }
    })
</script>

v-on:动作 可以简写为 @动作

​

参考