《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
发布时间：2023-04-03 12:30
目录：
-
- 一、前言
- 二、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>
注意❗：
- 插值可以使用变量名的形式
- 也可以使用表达式的形式，即对这个数据进行一些了的操作，假如这个数据是个数组，那么就可以在插值的地方进行数组的分割、合并……等操作
- 在使用插值表达式后，会出现数据闪动的情况，不过可以使用指令的方式修复
- 当然也可以不使用插值表达式的形式进行绑定数据，换成使用指令
3、指令（Directives）
1、什么是指令
- 指令是一个带有
v-前缀的特殊属性，那么指令的本质就是自定义属性 - 指令的格式，以
v-开头 - 指令可带参数，也可不带参数，比如
v-cloak指令就属于无参数的指令
2、指令API
1、v-cloak 解决插值闪动
-
不需要表达式
-
用法：
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如
[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -
功能：解决插值表达式存在的闪动问题
-
原理：先隐藏，替换好值之后，再显示最终的值
-
示例：
<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> <style> /* 1.通过属性选择器，选择到带有v-cloak的元素，让其隐藏 */ [v-cloak] { display: none; } style> head> <body> <div id="msg"> <div v-cloak>姓名:{{name}}div> <div v-cloak>性别:{{sex}}div> div> <script src="./js/vue.js">script> <script> let vm = new Vue({ el: "#msg", data: { name: "张三", sex: "男" } }) script> body> html>
2、v-text 填充纯文本
-
预期：
string -
详细：
更新元素的 文本内容。如果要更新部分的 文本内容，则需要使用
{{ Mustache }}插值表达式。 -
示例：
<span v-text="msg">span> <span>{{msg}}span> -
注意：
- 相比插值表达式更加简洁
- 指令用于将数据填充到标签中，作用与差值表达式类似，但是其直接没有闪动
- 如果数据中有html标签则会将html标签一并输出
- 此处为单向绑定，数据对象上的值改变，差值会改变，但是差值改变并不会影响数据对象的改变
3、v-html ：填充HTML片段
-
预期：
string -
详细：
更新元素的
innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，并且可识别HTML标签 -
注意：
- 存在安全问题，一般只在可信任内容上使用v-html。永远不要在用户提交的内容上使用
- 和v-text区别在于v-text输出的是纯文本内容，而v-html会对内容进行html解析然后输出
- 本网站内部数据可以使用，来自第三方的数据不可以用
-
示例：
<div v-html="html">div>
4、v-pre 填充原始信息
-
不需要表达式
-
用法：
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
-
注意：
- 显示原始信息，跳过vue编译过程（分析编译过程）
- 一些静态的内容不需要编译加这个指令可以加快渲染效果
-
示例：
<span v-pre>{{ 这将不会被编译 }}span>
5、v-once 只编译一次
-
不需要表达式
-
详细：
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
-
注意：
- 显示内容之后不再具有数据响应式功能
- 什么是数据响应式？
- HTML响应式即媒体查询，屏幕尺寸的变化导致样式的改变
- Vue数据响应式则是数据的变化导致页面内容的变化
-
示例：
<span v-once>这永远不会改变: {{msg}}span> <div v-once> <h1>commenth1> <p>{{msg}}p> div> <my-component v-once :comment="msg">my-component> <ul> <li v-for="i in list" v-once>{{i}}li> ul> -
参考：
- 数据绑定语法- 插值
- 组件 - 对低开销的静态组件使用
v-once
6、v-model 双向数据绑定
-
预期：随表单控件类型不同而不同。
-
限制：