一、了解Web的开发简史

vue.js官网：https://v2.cn.vuejs.org/

1995年前，互联网早期阶段 (开发复杂、功能简单、无前后端这一说法）；

1995年~2005年，服务器模板时代，以ASP、ISP、PHP为代表，所有业务逻辑代码都写到页面当中，当时的页面很简单，基本逻辑实现都由服务端执行；

2006年~2015年，服务器MVC时代，以java SSH、ASPNET MVC等为代表，此时产生
前后端的概念，但是前后端不分离，特点是:业务逻辑分层；

2012年后，前后端分离时代，JavaScript进入飞速发展阶段，2014 年vue.js 应运而生，前后端开发模式逐渐成为主流。

二、了解基于前后端分离的开发模式

1、传统的开发模式

前端人员开发 HTML静态页面，后提交给后端，后端套用模板开发，发现问题，返回给前端进行修改。

缺点：加了大量的沟通成本，调试成本等，而且前后端的开发进度相互影响，从而大大降低了开发效率。

2、前后端分离的开发模式

前后端提前沟通，商量好如何定义接口规范，后端模拟测试postman，前端模拟测试Mock数据，前后端联合联调测试。

优点：提升开发效率、完美应对复杂多变的前端需求、增强代码可维护性。

三、掌握Vue.js的基本概念

1、Vue.js的基本概念

Vue.js 诞生于 2014 年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

优点：

轻量级:Vue 简单、直接，所以 Vue 使用起来更加友好。

双向数据绑定:数据驱动视图，视图也可以驱动数据。

组件化开发: vue.is 提供了非常方便且高效的组件管理来进行加载公用的模块

指令:指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。

插件:插件用于对 vue框架功能进行扩展。

2、Vue.js 的开发模式: MVVM

MVVM(Model-View-ViewModel) 模式包括3个核心部分：

1、Model( 模型): 数据层，主要是从数据库取出的经过特定出来之后的数据。
2、View(视图):视图层，即 HTML文档的 DOM 元素，也就是我们看到的页面。
3、ViewModel( 视图模型): 用于连接视图与数据的数据模型，负责监听 Model 或者 View 的修改。

四、掌握Vue.js常用的开发工具

谷歌浏览器（预览效果、调试代码）+VS Code（编写代码）+命令控制台（前期暂时用不到，后期学到脚手架项目才需要，可通过Win+R键，输入cmd调出来）

五、安装使用Vue.js程序

安装使用vue可以采用以下三种方式：

1、下载独立版本“直接引入” Vue.js

在HTML页面中使用 Vue.js 时，通过 <script> 标签可以“直接引入”Vue.js 核心文件，代码如下所示:         <script src="vue.js"></script>       

上述代码表示引入当前路径下的 Vue.js 文件，Vue.js 相当于JavaScript 中的一个库。

2.不下载 .js文件直接使用 CDN 入 Vue.js

推荐一个由 BootStrap 中文网运作的免费开源的 CDN 加速服务，其地址为 http://www.bootcdn.cn/，在HTML 页面中即可完成Vue.js 的引入，代码如下所示<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

3.使用 npm 安装 Vue.js 框架(前期不推荐此方式)

若要使用 npm，则需要先安装 Node.js，然后使用npm (Node Package Manager) 包管理工具安装。执行命令:npm install vue 即可安装 Vue.js.

六、实现第一个vue.js案例

要点：

1、引入vue.js核心文件

2、创建vue实例，绑定DOM元素，定义数据

3、使用插值表达式{{}}绑定数据。

六、vue基础特性

常用的构造选项

事件修饰符

计算属性与监听属性

1、计算属性computed

一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：

下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。

2、监听属性

Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。

3、filter过滤器

概述:在Vue.s中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即 修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符“|”进行标识。
过滤器一般可以用在两个地方: 双花括号0或v-bind表达式中。它分为全局过滤器和局部过滤器。
当全局过滤器和局部过滤器重名时，会采用局部过滤器过滤器函数必须接收表达式的值(之前的操作链的结果) 作为第一个参数。

4、指令

Vue提供了许多内置指令，用于操作DOM元素。

v-bind：用于绑定HTML属性到Vue实例的数据。
v-on：用于监听DOM事件，并在触发时执行相应的方法。
v-if、v-else、v-show：用于根据条件显示或隐藏元素。
v-for：用于循环渲染列表。
v-model：用于实现表单元素和Vue实例数据之间的双向绑定。

5、生命周期钩子

Vue实例有一些生命周期钩子函数，可以在不同阶段执行相关操作。

beforeCreate：在实例初始化之后、数据观测之前被调用。
created：在实例创建完成后被调用。
beforeMount：在挂载开始之前被调用。
mounted：在挂载完成后被调用。
beforeUpdate：在组件更新之前被调用。
updated：在组件更新之后被调用。
beforeDestroy：在实例销毁之前被调用。
destroyed：在实例销毁之后被调用。

七、vue.js路由的使用

Vue Router 是 Vue.js 官方的路由管理器，它可以帮助我们在 Vue 应用程序中实现路由功能。

1、安装和引入：使用 npm 或 yarn 安装 Vue Router，并在项目中引入。

         npm install vue-router

2、创建路由实例：创建一个新的 VueRouter 实例，并定义路由配置。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})
在路由配置中，routes 数组包含了所有的路由信息。每个路由对象都有 path、name 和 component 属性。

3、创建组件：创建对应路由的组件。

import Home from './components/Home.vue'
import About from './components/About.vue'

4、设置路由出口：在 Vue 实例的模板中，设置路由出口，让路由的组件在不同的 URL 下显示。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<router-view> 元素用于显示当前路由对应的组件。

5、将路由实例注入到 Vue 实例中：将路由实例作为配置项传递给 Vue 实例。

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

6、添加路由链接：在应用程序的模板中，使用 <router-link> 元素来生成路由链接。

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

to属性指定了链接的目标路由路径。

通过以上步骤，我们就可以在 Vue 应用程序中使用 Vue Router 实现路由功能了。当用户点击不同的链接时，对应的组件将会在 <router-view> 中显示。在配置中还可以添加更多的路由，并为每个路由指定不同的组件和路径参数等。详细的使用方法和选项，请参考 Vue Router 的官方文档。