Vue入门

╰半橙微兮° 2023-10-16 01:24 37阅读 0赞

**目录**

1. Vue简介

1.1 Vue.js是什么？

1.2 库和框架的区别

1.3 MVVM的介绍

2. Vue入门

2.1 安装Vue.js

2.2CDN是什么?

3. Vue入门案例

3.1 Vue入门

3.2 双向数据绑定

4. Vue的生命周期

4.1 生命周期钩子

4.2 生命周期示例

--------------------

### 1. Vue简介 ###

#### 1.1 Vue.js是什么？ ####

Vue是一个现代的JavaScript前端框架，专注于构建用户界面。它使用了MVVM（Model-View-ViewModel）架构模式，通过数据绑定和组件化的方式，使得开发者能够更轻松地构建交互性强、可维护的Web应用程序。

Vue（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

#### 1.2 库和框架的区别 ####

库（Library）和框架（Framework）是两种不同的软件开发工具，它们在应用程序开发中有不同的作用和关注点：

**库（Library）**：

> 1.  **库是一组可重用的函数、类或模块的集合**，用于解决特定领域的问题或执行特定任务。它们通常具有明确定义的接口，供开发者调用。
> 2.  **库通常是可选的**，你可以选择性地使用库中的函数或模块来增强你的应用程序。开发者有更大的自由度，可以在应用程序中根据需要选择引入哪些库。
> 3.  **库不会控制应用程序的整体架构**。开发者有责任决定如何使用库来构建应用程序的各个部分。
> 4.  **示例：Lodash是一个JavaScript库，提供了许多实用的函数，如数组操作、字符串处理等。开发者可以根据需要引入和使用Lodash中的函数。**

**框架（Framework）**：

> 1.  **框架是一种完整的开发环境，提供了一整套工具和规则**，用于开发特定类型的应用程序，通常包括了库。
> 2.  **框架通常对应用程序的整体架构有明确的要求**，开发者需要按照框架规定的方式来组织代码、实现功能，以便框架能够正确运行。
> 3.  **框架提供了约定和规则，以减少开发者需要做的决策**。这可以加快开发速度，但可能会限制一些自定义的灵活性。
> 4.  **示例：Angular、React和Vue.js是JavaScript前端框架，它们提供了组件化开发模式、路由管理、状态管理等功能，并要求开发者按照它们的方式来组织应用程序。**

总的来说，库更像是工具箱中的工具，供开发者根据需要挑选和使用，而框架更像是一个规范和蓝图，规定了应用程序的整体结构和开发方式。选择使用库还是框架通常取决于项目的需求、开发团队的经验和开发速度的权衡。

#### 1.3 MVVM的介绍 ####

MVVM是一种设计模式，将应用程序分为三个主要部分：Model（数据层）、View（视图层）和ViewModel（视图模型层）。Vue.js将这三个部分清晰地分离开来，使得数据和UI之间的关联更加紧密，同时保持了代码的可维护性和可测试性。

什么是MVVM？就是Model-View-ViewModel。

![47a3ac81c3d9086f1f9347fd67d8cf9f.png][]

**　　ViewModel是Vue.js的核心，它是一个Vue实例。**

**MVVM模式的三个主要部分：**

> 1.  **Model（模型）**：
>     
>      *  Model代表应用程序的数据模型或数据层。它负责管理应用程序的数据和业务逻辑。
>      *  Model通常包括数据对象、数据获取和存储、数据验证和转换等功能。
> 2.  **View（视图）**：
>     
>      *  View是用户界面的可视部分，负责将数据呈现给用户，通常是HTML、XML、或其他UI元素。
>      *  View是 passively（被动地）呈现数据的，即它只展示数据，不处理数据的变化。
> 3.  **ViewModel（视图模型）**：
>     
>      *  ViewModel是连接模型和视图的中间层，它负责管理视图的状态、数据绑定和用户交互。
>      *  ViewModel包含了应用程序的业务逻辑，处理用户输入，更新数据模型，并将数据绑定到视图。

**MVVM的工作流程：**

> 1.  用户与视图（View）交互，例如在输入框中输入文本。
> 2.  视图触发事件，将用户的操作传递给ViewModel。
> 3.  ViewModel处理事件，可能会更新数据模型（Model）中的数据或执行其他业务逻辑。
> 4.  数据模型中的更改通知ViewModel，ViewModel将更新的数据绑定到视图。
> 5.  视图自动更新以反映数据模型的变化，用户看到新的数据呈现。

**MVVM的优势：**

> 1.  **分离关注点**：MVVM将数据和界面逻辑分开，使得代码更易于理解和维护。开发者可以专注于不同方面的开发，不会相互干扰。
> 2.  **可测试性**：由于业务逻辑位于ViewModel中，它们可以更容易地进行单元测试，从而提高代码质量。
> 3.  **数据绑定**：MVVM提供了双向数据绑定，使得界面和数据模型之间的同步变得自动化，减少了手动DOM操作。
> 4.  **可重用性**：ViewModel中的业务逻辑可以在不同的视图中重用，从而提高了组件的可重用性。
> 5.  **适用于复杂界面**：MVVM特别适用于大型和复杂的用户界面，其中有许多交互和数据变化。

总的来说，MVVM是一种有助于构建可维护、可测试和高度可交互的前端应用程序的架构模式。它在许多现代前端框架中得到了广泛的应用，例如Vue.js、Angular等。通过MVVM，开发者能够更轻松地管理和开发复杂的前端应用。

### 2. Vue入门 ###

#### 2.1 安装Vue.js ####

要使用Vue.js，首先需要安装它。你可以使用CDN引入Vue.js，也可以使用npm或yarn安装它，然后在项目中导入。

在下面的案例中我将使用CDN引入Vue.js快速上手

> [BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务][BootCDN - Bootstrap _ CDN]

**BootCDN**是Bootstrap中文网支持并维护的前端开源项目免费CDN服务，致力于为Bootstrap、jQuery、Angular、Vuejs  
一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

#### 2.2CDN是什么? ####

CDN代表内容分发网络（Content Delivery Network），是一种网络基础设施，用于提高互联网内容的传输效率、可用性和性能。CDN通过将内容分发到位于全球各地的多个服务器上，使用户能够更快速、可靠地访问网站、应用程序和其他在线资源。以下是CDN的主要工作原理和好处：

**CDN的工作原理：**

1.  **内容复制和缓存**：CDN提供商会将客户的静态资源（例如图片、CSS、JavaScript文件、视频等）复制到位于全球各地的多个服务器上。这些服务器通常位于数据中心或云服务提供商的设施中。
2.  **就近访问**：当用户访问一个使用CDN的网站或应用程序时，他们的请求会被路由到距离最近的CDN服务器，而不是直接请求源服务器。
3.  **内容分发**：CDN服务器提供缓存的内容，以便更快速地响应用户的请求。如果CDN服务器上有所需资源的副本，它将直接提供给用户，而不需要从源服务器下载。
4.  **负载均衡和智能路由**：CDN提供商使用负载均衡和智能路由算法，以确保用户的请求被路由到性能最佳的服务器。这可以降低延迟并提高响应速度。

**CDN的好处：**

1.  **更快的加载时间**：CDN可以加速网站和应用程序的加载速度，因为它将内容提供给用户的就近服务器，减少了数据传输的距离和延迟。
2.  **提高可用性**：CDN服务器之间的冗余和自动故障转移可以提高网站和应用程序的可用性。如果一个服务器不可用，用户仍然可以从其他服务器获取内容。
3.  **减轻源服务器负载**：通过将部分流量分发到CDN，源服务器的负载减轻，从而提高了源服务器的性能和稳定性。
4.  **降低网络成本**：CDN可以减少数据传输的费用，因为它可以选择最经济的路由和数据中心来传输内容。
5.  **提高安全性**：一些CDN提供商还提供安全性功能，例如DDoS攻击防护、SSL证书管理等，以提高网站和应用程序的安全性。

总的来说，CDN是一种用于优化内容传输的强大工具，特别适用于大流量的网站、在线媒体和全球化应用程序，以提供更好的用户体验和性能。许多云服务提供商和专业的CDN提供商都提供CDN服务，供网站和应用程序开发者使用。

### 3. Vue入门案例 ###

#### 3.1 Vue入门 ####

Vue目前的的开发模式主要有两种：  
1.直接页面级的开发，script直接引入Vue  
2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，里面的文件都配置好了

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue入门</title>
    		
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<h3>{
       {msg}}<h3>
    		</div>
    		
    		<script type="text/javascript">
    			new Vue({
    				el:"#app",
    				data(){
    					return{
    						msg:"hello,小白"
    					}	
    				}
    			})
    		</script>
    	</body>
    </html>

测试结果:

![64c06e024c484d5292ad5ace40442086.png][]

#### 3.2 双向数据绑定 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>vue入门</title>
    		
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<h3>{
       {msg}}<h3>
    			<input type="text" v-model="msg" />
    			<button @click="show">点击有惊喜</button>
    		</div>
    		
    		<script type="text/javascript">
    			new Vue({
    				el:"#app",
    				data(){
    					return{
    						msg:"hello,小白"
    					}	
    				},
    				methods:{
    					show() {
    					alert(this.msg);
    						}
    				}
    			})	
    		</script>
    	</body>
    </html>

测试结果:

![63133306c5b3420a93e38bd548741cc3.png][]

### 4. Vue的生命周期 ###

#### 4.1 生命周期钩子 ####

Vue.js中的Vue实例有一个生命周期，它包括一系列的钩子函数，这些钩子函数在Vue实例不同阶段被调用，允许你在不同的时刻执行代码。这些生命周期钩子函数的顺序如下：

> 1.  **beforeCreate（创建前）**：
>     
>      *  在Vue实例被创建之后，但在数据和事件被初始化之前调用。
>      *  在这个阶段，Vue实例只是一个空壳，数据和方法都还未初始化。
> 2.  **created（创建后）**：
>     
>      *  在Vue实例被创建之后，数据和方法都已初始化，但DOM元素还未挂载到页面上。
>      *  在这个阶段，你可以访问Vue实例的数据，执行异步操作，但尚不能访问页面上的DOM元素。
> 3.  **beforeMount（挂载前）**：
>     
>      *  在Vue实例的模板编译完成，但还未将其挂载到页面上之前调用。
>      *  在这个阶段，你可以访问模板中的DOM元素，但它们还未和Vue实例建立关联。
> 4.  **mounted（挂载后）**：
>     
>      *  在Vue实例挂载到页面上后调用。
>      *  在这个阶段，你可以访问页面上的DOM元素，执行一些需要DOM的操作，如初始化第三方插件、发送网络请求等。
> 5.  **beforeUpdate（更新前）**：
>     
>      *  在数据更新之前，DOM被重新渲染之前调用。
>      *  在这个阶段，你可以访问更新前的数据和DOM状态。
> 6.  **updated（更新后）**：
>     
>      *  在数据更新之后，DOM被重新渲染之后调用。
>      *  在这个阶段，你可以访问更新后的数据和DOM状态。
> 7.  **beforeDestroy（销毁前）**：
>     
>      *  在Vue实例销毁之前调用。
>      *  在这个阶段，你可以进行一些清理工作，如取消订阅、清除定时器等。
> 8.  **destroyed（销毁后）**：
>     
>      *  在Vue实例销毁之后调用。
>      *  在这个阶段，Vue实例和其相关的数据、事件监听器等都已销毁，不再可用。

这些生命周期钩子函数允许你在不同的阶段执行自定义逻辑，以满足应用程序的需求。例如，在`created`钩子中可以发送初始化网络请求，而在`beforeDestroy`钩子中可以进行资源的清理工作。了解Vue实例的生命周期可以帮助你更好地管理和控制应用程序的行为。注意，如果你使用Vue组件，组件也具有类似的生命周期钩子。

![a2f96d64a40d49d983f904f039177eea.png][]

#### 4.2 生命周期示例 ####

![f757fd7f05f849a49e121913d9a961fc.png][]

![5090ff1e75e8454a904ffad2c78067eb.png][]

[47a3ac81c3d9086f1f9347fd67d8cf9f.png]: https://img-blog.csdnimg.cn/img_convert/47a3ac81c3d9086f1f9347fd67d8cf9f.png
[BootCDN - Bootstrap _ CDN]: https://www.bootcdn.cn/
[64c06e024c484d5292ad5ace40442086.png]: https://img-blog.csdnimg.cn/64c06e024c484d5292ad5ace40442086.png
[63133306c5b3420a93e38bd548741cc3.png]: https://img-blog.csdnimg.cn/63133306c5b3420a93e38bd548741cc3.png
[a2f96d64a40d49d983f904f039177eea.png]: https://img-blog.csdnimg.cn/a2f96d64a40d49d983f904f039177eea.png
[f757fd7f05f849a49e121913d9a961fc.png]: https://img-blog.csdnimg.cn/f757fd7f05f849a49e121913d9a961fc.png
[5090ff1e75e8454a904ffad2c78067eb.png]: https://img-blog.csdnimg.cn/5090ff1e75e8454a904ffad2c78067eb.png