Vue.js 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

在学习Vue之前需要了解HTML、CSS和JavaScript。

Vue的特点：

采用组件化模式，提高代码复用率、且让代码更好维护。
采用声明式编码，让编码人员无需直接操作DOM，提高开发效率。

使用传统JS操作DOM属于命令式编码。
使用虚拟DOM和优秀的Diff算法，尽量复用DOM节点。

Vue官网为：https://cn.vuejs.org/。

安装 Vue

安装Vue的方式有很多，可以在Vue2文档中查阅。

其中最简单的方式就是通过<script>标签引入。通过<script>标签，可以直接使用Vue CDN引入：

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

通常引入的Vue有两种版本：

开发版本：包含完整的警告和调试模式。如上方引入的即为vue@2.7.14的开发版本。
生产版本：删除了警告。通常Vue开发版本的文件名为vue.min.js。

例如：
```
1<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
```

在使用Vue时，通常会在浏览器中安装Vue的开发者工具插件：https://github.com/vuejs/devtools#vue-devtools。

Hello

下方演示了Vue的基本使用方式：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>Hello Vue</title>
 7  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 8</head>
 9<body>
10  <div id="root"> <!-- Vue 容器 -->
11    <h1>Hello, {{name}}<!-- 插值表达式 -->!</h1>
12  </div>
13
14  <script type="text/javascript">
15    /*
16      阻止 vue 在启动时生成生产提示
17      Vue 2.x 中可能不会生效，直接修改 Vue 源码
18     */
19    Vue.config.productionTip = false
20
21    // 创建 Vue 实例
22    new Vue({
23      el: '#root',  // 将实例与容器进行绑定
24      data: { // data 中用于存储数据，存储的数据供 el 所指定的容器使用
25        name: 'Vue.js'
26      }
27    })
28  </script>
29</body>
30</html>

Hello实例中的一些关键点：

Vue 容器：
- 容器中的代码依然符合 HTML 规范，只不过混入了一些特殊的 Vue 语法。
- 容器中的代码被称为 Vue模板。
- 插值语法：在HTML标签体中，使用两个花括号{{ }}将JS表达式引起来。与语句不同的是，表达式指可以生成值的语句，这个语句可以放在任何需要值的地方。
  
  也就是说插值表达式一定需要有值（或返回值）。
  
  插值表达式中的变量、方法都是在对应 Vue实例的 data 中定义的。当data发生了改变，页面中对应的数据也会发生改变。
  
  插值是，Vue模板语法中的一种。
Vue 实例：Vue 实例用于解析 Vue 容器，Vue 实例会根据配置对象的信息去解析对应的模板。创建Vue 实例时需要传入一个配置对象。
- el属性：将实例与容器进行绑定，el 的值通常为 CSS 选择器字符串。
  
  el属性中传入的值也可以是具体的Element对象，例如：
```
1new Vue({
2    el: document.getElementById('root') // el 还可以这么绑定
3})
```
- data：data 中用于存储数据（对象或方法），存储的数据供 el 所指定的容器使用。data 可以是对象或函数。
Vue实例和Vue容器是一对一关系。当一个实例的el配置有多个与之对应的容器时，Vue不会报错，但页面显示会有问题；当一个容器被多个实例指定时，Vue会报错。

真实开发中只有一个Vue实例，并且会配合着组件一起使用。

创建 Vue 实例的另一种方式

在创建Vue实例时，可以不用立即指定el来绑定容器。

可以通过vm.$mount()来绑定容器：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 7</head>
 8<body>
 9  <div id="app">
10    <h1>Hello {{name}}!</h1>
11  </div>
12
13  <script type="text/javascript">
14    const vm = new Vue({
15      data: {
16        name: 'Linner',
17      },
18    });
19    // 使用 $mount() 绑定容器
20    vm.$mount('#app')
21  </script>
22</body>
23</html>

vm.$mount()是Vue原型对象上的一个方法。

数据对象的函数式写法

Vue实例中的data不仅可以作为对象去定义，还能作为函数去定义：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
 7</head>
 8<body>
 9  <div id="app">
10    <h1>Hello {{name}}!</h1>
11  </div>
12
13  <script type="text/javascript">
14    new Vue({
15      el: "#app",
16      // 函数式 data，将返回值作为数据对象
17      data () {
18        /**
19         * data() 的 this 是当前的Vue实例对象
20         * 定义data()时不要使用箭头函数
21         * 如果将data()定义为箭头函数，那么this就不再是当前Vue的实例对象了
22         */
23        return {
24          name: 'Linner'
25        }
26      },
27    });
28  </script>
29</body>
30</html>

MVVM 模型

Vue是在MVVM模型的基础上进行设计，MVVM模型包含以下3个部分：

M（Model）：模型，对应Vue实例data中的数据。
V（View）：模板，即Vue容器。
VM（View Model）：视图模型，对应Vue实例对象。

Vue 和 MVVM 模型

DOM Listeners：DOM监听器，监听View中数据的改变，并根据Data Bindings指定的关系，将View中被修改的数据在Model中做相应的改变。
Data Bindings：数据绑定，将View与Model中对应的数据进行绑定，表示视图与模型间的一种对应关系。

在代码中，Vue和MVVM模型的对应关系如下所示：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>Hello Vue</title>
 7  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
 8</head>
 9<body>
10  <div id="app"> <!-- View -->
11    <h1>Hello, {{name}}!</h1>
12  </div>
13
14  <script type="text/javascript">
15    // 在代码中，可以使用vm代表Vue实例，vm表示View Model
16    const vm = new Vue({ // View Model
17      el: '#app',
18      data: { // Model
19        name: 'Vue.js'
20      }
21    })
22
23    console.log(vm);
24  </script>
25</body>
26</html>

Vue 入门

目录

安装 Vue

Hello

创建 Vue 实例的另一种方式

数据对象的函数式写法

MVVM 模型

版权

评论