一、Vue.js 简介
1.1 认识 Vue.js
-
Vue (读音 /vjuː/，类似于 view)
-
Vue 是一套用于构建用户界面的渐进式框架，什么是渐进式的呢？
- 渐进式意味着你可以将 Vue 作为你应用的一部分嵌入其中，带来更丰富的交互体验体验。
- 或者如果你希望将更多的业务逻辑使用使用 Vue 实现，那么可以通过 Vue 的核心库以及其生态系统，比如 Core + Vue-roter + Vuex，也可以满足你各种各样的需求。
-
Vue 有很多特点和 Web 开发中常见的高级功能
- 解耦试图和数据
- 可复用的组件
- 前端路由奇数
- 状态管理
- 虚拟 DOM
1.2 Vue.js 安装
- CDN 引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 下载后引入
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js
- NPM 安装
1.3 Vue.js 初体验
案例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{{ message }}</div>
<div>{{ message }} </div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
</script>
</body>
</html>
通过浏览器可以看到 id 为 app 的 div 显示出了我们在 JS 中定义的 message 对应的值，而另一个 div 并没有显示。
阅读 JS 代码，会发现创建了一个 Vue 对象。并且创建 Vue 对象的时候，传入了一些 options: {}
- {} 中包含了
el属性：该属性决定了哪一个元素(element)交由 Vue 框架管理。所以 id 为 app 的元素碰到{{ message }}的语法则会让 Vue 框架去解析，最后可以解析出Hello World。而第二个 div 并没有交由 Vue 框架管理，所以并不能被 Vue 解析，只能显示原样。 - {} 中包含了
data属性：该属性中通常会存储一些数据。- 这些数据可以是我们直接定义出来的，如上。
- 也可以是来自网络，从服务器加载的。
浏览器执行代码的流程：
- 执行到 11-13 行代码显示出对应的 HTML。
- 执行到 17 行代码时创建 Vue 实例，并且对原 HTML 进行解析和修改。
接着我们在控制台修改 Vue 实例对象 message 的值，可以看到浏览器的数据也发生了对应的变换。
这种页面随着数据的变化而变化，便称为响应式。
案例二
现在，我们需要展示一个更加复杂的数据：列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="fruit in fruits">
{{ fruit }}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana']
}
})
</script>
</body>
</html>
同样的，我们继续打开控制台修改Vue 实例对象的数据，可以看到依然是响应式的。
案例三
现在我们来实现一个计数器
- 点击
+计数器 +1 - 点击
-计数器 - 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{ count }}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add() {
this.count++;
},
sub() {
this.count--;
}
}
})
</script>
</body>
</html>
以上便是三个 Vue 的小案例，通过初步体验，相比于通过 JS 操作 DOM，Vue 的代码在实现相同功能时，代码量更加简介。
你可能会疑惑，v-for、v-on:click、method 是什么东西，后续将一一揭露。
1.4 Vue.js 的 MVVM
- 什么是 MVVM 呢？
MVVM（Model–view–viewmodel）是一种软件架构模式。
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。
- Vue 的 MVVM
-
View 层
- 视图层
- 在我们前端开发中，通常就是 DOM 层
- 主要作用是给用户展示各种信息
-
Model 层
- 数据层
- 数据我能是我们固定的四数据，更多的是来自服务器，从网络请求下来的数据
- 在上述案例中，便是 Vue 实例中 data 对应的对象
-
ViewModel 层
- 视图模型层
- 试图模型层是 View 和 Model 沟通的桥梁
- 一方面它实现了 Data Binding，也就是数据绑定，将 Model 的改变实时反映到 View 中。
- 另一方面它实现了 DOM Listener，也就是 DOM 监听，当 DOM 发生一些时间（点击、滚动、touch）时，可以被监听到，并在需要的情况下改变对应的 Data。
1.5 Vue 实例的 options
-
在创建 Vue 实例的时候，我们传入了一个 options 对象。
-
这个 options 可以包含哪些属性？options 详细解析
-
目前需掌握的选项：
- el
类型：string | Element
作用：决定 之后 Vue 实例会管理哪一个 DOM。
- data
类型：Object | Function
作用：Vue 实例对应的数据对象。
- methods
类型：{ [key: string]: Function }
作用：定义属于该 Vue 实例的一些方法，可以在其他地方调用，也可以在指令中使用。
1.6 Vue 的生命周期
Vue 实例对象在创建的过程中，并不是一蹴而就，而是经过多个阶段，我们可以在这些阶段自定义一些我们需要做的事。
1453
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
