vue教程入门 Vue的快速入门教程

这是前端框架vue的介绍和快速入门教程。本文将从以下三个步骤打开vue的大门:前端技术的开发、vue的基本介绍和vue基本语法的使用，最后教你如何与后台界面交互。

一、前端开发流程

从互联网发展到今天，一直都有前端和后端的概念。对于前端来说，大致可以分为四个阶段:静态页面、ajax、前端MVC和SPA。下面将介绍每个阶段的前端特性。

1.静态页面阶段

在互联网发展的早期，网站的前端和后端是集成的，用户在浏览网页时必须经过以下步骤:

后端从浏览器接收请求

生成静态页面

向浏览器返回静态页面

所以当时的网站如果想提交表单，整个页面都需要刷新，用户体验非常差。

2.AJAX阶段

后来AJAX技术诞生，改变了前端开发。他的全名是异步JavaScript和XML，中文意思是异步Javascript和XML。使用AJAX技术，可以通过脚本独立向服务器请求数据，并交给前端处理，而不是后端返回整个页面。整个过程中，后端只负责提供数据，导致了前端和后端分离的开发模式。

3.前端MVC阶段

前端代码具有读写数据、处理数据、生成视图等功能。，所以迫切需要辅助工具来方便开发者组织代码，就像后端MVC一样，这就导致了前端MVC框架的诞生。简单来说，前端和后端也有相同的模型、视图和控制器。原生html+js可以理解为MVC模式。用户请求服务器端路由并调用相应的控制器来处理它。控制器获取数据并将结果返回给前端。后来，MVVM模式诞生了，即控制器被视图模式取代。如果用户修改视图层中的数据，视图模型层将自动更改数据。当ViewModel层中的数据发生变化时，可以自动将数据渲染到页面中，实现了视图层和数据模型的自动同步。整个过程不需要开发人员手工处理。Vue是MVVM模式。如下图所示:

4.水疗舞台

SPA的全称是单页应用，意思是单页应用。顾名思义，就是在一个页面上展示一个多页的应用。用户的浏览器只需要加载网页一次，然后在这个页面上就可以完成所有的操作。目前最流行的前端框架，比如Vue、Angular、React，都属于SPA开发框架。

二，Vue的基本介绍

1.什么是1。某视频剪辑软件

这里引用官网的介绍，“Vue是一个构建用户界面的渐进式框架。与其他大框架不同，Vue的设计是从下到上一层一层的应用。对于初学者来说，你只需要知道它是一个前端框架，易于使用，可以大大提高你的开发效率。

2.安装2个。某视频剪辑软件

我们可以用三种方式引用Vue:

通过本地文件直接引用:从官网下载vue.js，带脚本标签导入。

通过CDN引入:

通过npm下载引入:

这种方法可用于建筑工程。由于本教程是入门教程，第一种方法将用于安装vue。

3.创建第一个Vue应用程序

首先，把你下载的vue.js放在某个地方，然后通过脚本标签把它引入你的html文件的头部

每个Vue应用都需要通过实例化Vue来实现，语法如下:

您可以在这里看到，在Vue构造函数中有一个el参数，它是DOM元素中的id。在上面的例子中，id是app。可以理解的是，我们接下来所有的Vue操作只会在这个id为app的div中生效，其他都不会生效。文件启动时，可以看到页面上显示“Hello Vue”，这样我们的第一个Vue应用就成功启动了。但是你会发现我们只是在p标签中写了一个大括号和一个msg，那么为什么它会显示hellowue呢？别慌。我马上解释。

4.4的使用。Vue基本说明

插值表达式

Vue使用基于HTML的模板语法，这允许开发人员声明性地将DOM绑定到底层Vue实例的数据。最基本的就是通过插值表达式来实现，比如上面提到的{}，就是一个插值表达式。虽然我们没有在p标签中写任何东西，但是在vue实例中，我们在数据中定义了一个msg属性，它包含“Hello Vue”，这样Vue就可以自动为我们渲染到对应的页面。

垂直装订

V-bind可以动态绑定标签的属性，编写如下:

示例:

效果如下:

绑定事件

V-on用于绑定事件监控，当然最常用的是click事件，语法如下:

v-on:click = ' method '/basic writing

例子如下:

在通过v-on绑定事件名称之后，我们需要在方法属性方法中定义相应的事件。

效果如下:

条件语句

Vue提供了像普通编程语言一样的条件语句判断。我们可以在标签上使用v-if、v-else-if和v-else通过条件判断来显示元素，当然也可以使用v-show根据值来显示元素。例子如下:

循环语句

Vue还提供了v-for循环生成元素，这就需要site in sites形式的特殊语法，其中site是源数据数组，site是数组元素迭代的别名。例子如下:

效果如下:

计算属性

经过以上研究，我们可以看到插值表达式的使用非常方便。除了在数据中直接显示数据之外，我们还可以在其中执行一些操作，例如:

像这样复杂的运算可以用在插值表达式中，但其初衷只是为了进行简单的运算。当遇到这样复杂的操作时，它看起来很麻烦，不适合在这里使用，而计算属性可以帮助我们处理这样复杂的操作。当然，你可能会问，“让我们绑定一个方法来处理这些数据。”的确，方法属性可以达到同样的目的。它们的区别主要在于实施机制不同:

初始化并执行计算中的方法后，只要更新任何值，计算计算属性中与其相关的所有值都会更新。

方法只会在调用时执行相应的方法，不会自动同步数据。

因此，computed有一个缓存，可以提高处理大量数据时的效率。如果不想缓存，可以使用methods属性。

另外，编写内部函数没有区别，但是调用时会有所不同，如下图:

至此，我们已经完成了Vue的基本常用指令。最后，我们将教Vue应用程序如何与后端接口交互。

5.5之间的互动。Vue和后端

众所周知，前端和后端可以通过ajax技术进行交互。从Vue2.0开始，建议axios进行网络请求。它几乎完美地封装了ajax，解决了原生Ajax的许多缺点。同时因为支持promise，所以不会有jueryAjax的回调地狱。接下来，让我们看看axios是如何使用的。

初步准备

您需要一个后端接口，可以使用mockjs等来模拟后端接口。我使用nodejs+express框架编写了一个简单的API进行测试。

装置

和Vue一样，可以通过三种方式安装。这里我用cdn介绍。

获取请求

首先是get请求

引入axios cdn后，可以在方法中使用。基本用法如上所示..get是声明请求的类型。然后是处理服务器返回的结果。catch就是捕捉异常。当然，除了直接在url中拼接参数，params还可以用来设置参数，比如:

请求成功后，打印结果，后台也可以得到相应的参数:

发布请求

实际上，Post请求也是以同样的方式编写的。这里是用传递配置的方式写的。

首先，按照以下格式定义请求的参数:

varconfig = {

然后将这些配置直接放入axios

请求成功后，打印结果，后台也可以得到相应的参数:

三.摘要

至此，Vue的介绍指南结束。本文主要讲述Vue的一些入门操作以及如何使用Vue进行前端交互。因为是入门级，所以vue路由和vuex还没有涉及。这些将在以后的vue-cli文章中解释。请指出本文中的任何错误和遗漏，谢谢~

-结束-