《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！

- 一、前言
- 二、Vue是什么？
- - 1、简介
  - 2、发展史
  - 3、为什么要学习Vue？
  - 4、jQuery、javascript、Vue的区别
  - 5、Vue框架构造
- 三、Vue的使用
- - 1、Vue环境搭建
  - 2、插值表达式
  - 3、指令（Directives）
  - - 1、什么是指令
    - 2、指令API
    - - 1、v-cloak 解决插值闪动
      - 2、v-text 填充纯文本
      - 3、v-html ：填充HTML片段
      - 4、v-pre 填充原始信息
      - 5、v-once 只编译一次
      - 6、v-model 双向数据绑定
      - 7、v-on 事件绑定
      - 8、v-bind 属性绑定
      - 9、v-if 分支结构
      - v-if
        
        v-else
        
        v-else-if
      - 10、v-show 元素的显示与隐藏
      - 11、v-for 遍历
      - 12、自定义指令
    - 3、案例
    - - 1、计算机案例（实现简单的加法运算）
      - 2、原淘宝选项卡案例
  - 4、表单输入绑定
  - - （1）单行文本和多行文本
    - （2）单选按钮
    - （3）复选按钮
    - （4）下拉菜单
    - 示例：
  - 5、计算属性（computed）
  - - （1）为什么需要计算属性？
    - （2）计算属性的用法
    - （3）计算属性与方法的区别
  - 6、侦听器
  - - （1）为什么需要侦听器？
    - （2）侦听器的使用
    - 案例：验证用户名是否存在
  - 7、过滤器
  - - （1）过滤器的作用是什么？
    - （2）自定义过滤器
    - 案例：使用过滤器格式化日期
  - 8、选项/生命周期钩子函数
  - - (1)主要阶段
    - (2)Vue实例的产生过程
  - 9、Vue响应式数据
  - - （1）数组响应式数据
    - （2）Vue响应式数据
    - - A、使用
      - B、说明
      - C、注意
      - D、案例
  - 10、组件
  - - （1）组件是什么？
    - （2）组件的复用
    - （3）data 必须是一个函数
    - （4）组件的组织和注册
    - （5）组件通信
    - - 1、父组件向子组件传值
      - 2、子组件向父组件传值
      - 3、兄弟组件传值
  - 11、插槽
  - - （1）插槽是什么？
    - （2）插槽的基本使用
    - （3）具名插槽
    - （4）作用域插槽
- 四、Vue Router（路由）
- - 1、什么是路由？
  - - （1）后端路由
    - （2）前端路由
  - 2、SPA
  - - （1）前后端渲染的缺点
    - （2）什么是SPA
    - （3）实现简易的前端路由
  - 3、Vue Router
  - - （1）简介
    - （2）基本使用
    - （3）路由重定向
    - （4）嵌套路由
    - - 1、简介：
      - 2、实现：
    - （5）动态路由匹配
    - - 1、基本用法
      - 2、路由组件传递参数
      - 3、vue-router命名路由
      - 4、编程式导航
      - （1）页面导航的两种方式
        
        （2）常用的编程式导航 API 如下：
        
        （3）编程式导航参数规则
- 五、Vue CLI （脚手架）
- - 1、简介
  - 2、安装
  - 3、基于3.x版本的脚手架创建vue项目
  - 4、Vue 脚手架生成的项目结构分析
  - 5、Vue 脚手架的自定义配置
- 六、Vux 集中状态管理
- - 1、回顾Vue组件通信
  - 2、Vuex 是什么
  - 3、什么样的数据适合存储到Vuex中？
  - 4、Vuex 的基本使用
  - 5、Vuex 的核心概念
  - - （1）State（状态）
    - （2）Mutation（变化）
    - - 1、简介
      - 2、使用：
      - 3、在组件中调用mutations中的方法
    - （3）Action
    - - 1、简介
      - 2、使用
      - 3、组件中调用
    - （4）Getter
    - - 1、简介
      - 2、使用
      - 3、在组件中使用
- 七、Element-UI
- 八、经典案例
- - 1、图书管理系统
  - 2、购物车
  - 3、ToDoList待办事项列表
  - 4、简易计算器
- 九、总结

一、前言

在初步学习前端课程的时候，相信大家都知道Vue这个名字，至于Vue到底是什么却不得而知，又或者知道Vue是前端的一大流行框架，那么它到底是用来干啥的呢，对于其他框架而言Vue又有什么优势和特点，学习前端的人为什么都要去学习Vue呢？

对于这些答案，相信大家都想去亲自揭开它的谜底，但是如果你未学过JavaScript和jQuery那么，请先不要学习Vue，因为没有根基是非常晦涩难学的。反之学习的时候会特别轻松，所以希望大家学习Vue的时候，尽量都有javascript和jQuery库类的基础。

二、Vue是什么？

1、简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

什么是渐进式框架？

说白了，就是框架分层。那是如何分层的呢？就像《功夫》里面黄圣依手里拿的棒棒糖一样：最核心的是视图层渲染，然后往外是组件机制，在此基础上再加入路由机制，再加入状态管理，最外层是构建工具，vue和react都是如此。

Vue分层：声明式渲染>组件系统>客户端路由>集中式状态管理>项目构建

2、发展史

创始人：尤雨溪

照片：

官网：https://cn.vuejs.org/

安装：https://cn.vuejs.org/v2/guide/installation.html =》点击开发版本

2013年，在 Google 工作的尤雨溪，受到 Angular 的启发，开发出了一款轻量框架，最初命名为 Seed 。
2013年12月，更名为 Vue，图标颜色是代表勃勃生机的绿色，版本号是 0.6.0。
2014.01.24，Vue 正式对外发布，版本号是 0.8.0。
2014.02.25，0.9.0 发布，有了自己的代号：Animatrix，此后，重要的版本都会有自己的代号。
2015.06.13，0.12.0，代号Dragon Ball，Laravel 社区（一款流行的 PHP 框架的社区）首次使用 Vue，Vue 在 JS 社区也打响了知名度。
2015.10.26，1.0.0 Evangelion 是 Vue 历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着 Vue从一个视图层库发展为一个渐进式框架。
2016.10.01，2.0.0 是第二个重要的里程碑，它吸收了 React 的虚拟 Dom 方案，还支持服务端渲染。自从Vue 2.0 发布之后，Vue 就成了前端领域的热门话题。
2019.02.05，Vue 发布了 2.6.0 ，这是一个承前启后的版本，在它之后，将推出 3.0.0。
2019.12.05，在万众期待中，尤雨溪公布了 Vue 3 源代码，目前 Vue 3 处于 Alpha 版本。

3、为什么要学习Vue？

易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效： 20kB 运行大小，超快虚拟 DOM

4、jQuery、javascript、Vue的区别

Vue是框架而jQuery顶多算个库类

在Vue还未诞生之前，jQuey可以说是一个前端的流行框架，操作DOM元素非常方便，缺点是要大量的获取和操作DOM元素。在 React、Vue、Angular前端三大主流框架出现后，jQuey就被降级了，所以顶多算个库类。而在使用Vue等其他主流框架的时候，我们不需要一直关注DOM元素，因为在Vue中DOM是虚拟的，我们不需要去获取，这样就减轻了前端开发人员的工作量。
前端渲染方式
- 原生js字符串拼接ES6新语法……等，显得极为麻烦
- 使用 template-web.js 模板引擎，但没有提供专门的事件机制
- Vue提供了一套极为标准的模板，包括插值、指令、事件、属性、样式、分支循环……等，可以说我们只使用Vue就可以搭建并完成一整套的网页应用

5、Vue框架构造

Vue程序结构框架：

Vue.js是典型的MVVM框架，什么是MVVM框架，介绍之前我们先介绍下什么是MVC框架

MVC是后端分层开发的思想即 Model-View-Controller 的缩写，就是模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的：

View 用来把数据以某种方式呈现给用户。

Model 其实就是数据。

Controller 接收并处理来自用户的请求，并将 Model 返回给用户。

MVC框架对于简单的应用处理是可以的，也符合软件架构的分层思想。但随着H5 的不断发展，人们更希望使用H5 开发的应用能和Native 媲美，或者接近于原生App 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题：

开发者在代码中大量调用相同的 DOM API, 处理繁琐，操作冗余，使得代码难以维护。
大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

其实，早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。随着智能手机，平板电脑的流行，多终端开始流行。

MVVM框架开始流行，应用场景：

针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
提供ajax数据持久化，保证前端用户体验

框架数据分层情况：

M-Model：数据模型层，可以在Model中定义数据修改和操作的业务逻辑， Vue中数据层都放在data里面
V-View：视图层，它负责将数据模型转化成UI 展现出来
VM-ViewModel：是控制器，将视图和数据之间建立联系，或者说是一个同步视图和数据的对象，即Vue对象

三、Vue的使用

1、Vue环境搭建

引入Vue.js
给HTML元素即视图添加id属性
创建Vue对象，并搭建Vue环境


<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>Vue差值表达式title>
head>
<body>
    <div id="app">div>
  	// 导入vue
    <script src="./js/vue.js">script>
    <script>
      // 创建Vue环境
        let vm = new Vue({
        		// 将该DOM元素内部搭建为Vue环境  
            el: "#app",
          	// 模型数据
            data: {
                name: "张三",
                sex: "男"
            }
        })
    script>
body>
html>

注意❗：

el 元素的挂载位置(值可以是 CSS 选择器或者 DOM 元素)，但一般都使用CSS选择器
data ：模型数据(值必须是一个对象)

2、插值表达式

与template-web.js模板引擎绑定数据的语法类似，都是使用双大括号的文本插值{{ msg }}


<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>Vue差值表达式title>
head>
<body>
    <div id="app">
    		// 从data模型数据中获取
        <div>姓名:{{name}}div>
        <div>性别:{{sex}}div>
    div>
    <script src="./js/vue.js">script>
    <script>
        let vm = new Vue({
            el: "#app",
          	// 模型数据
            data: {
                name: "张三",
                sex: "男"
            }
        })
    script>
body>
html>