共计 5072 个字符，预计需要花费 13 分钟才能阅读完成。
大家好，我是小菜。
一个心愿可能成为 吹着牛 X 谈架构 的男人！如果你也想成为我想成为的人，不然点个关注做个伴，让小菜不再孤独！
本文次要介绍
Vue 入门介绍如有须要，能够参考
如有帮忙，不忘 点赞 ❥
微信公众号已开启，小菜良记，没关注的同学们记得关注哦！
上篇咱们曾经将 webpack 的根本应用介绍过一遍了，也相当于是为了接下来的 Vue 作铺垫！还没看过的小伙伴记得跳转查缺补漏~！
后端视线学 Webpack，文武双全？
Vue 认知
什么是 Vue，它是一套用于 构建用户界面 的渐进式框架 。一句简略的介绍中，咱们须要重点了解两个词 构建用户界面 和 渐进式框架。它的个性体现在两个方面
- 数据驱动视图
应用 vue 的页面中，vue 会主动监听数据的变动，从而自行渲染页面的构造。在 vue 中，无需手动操作 DOM 节点，它会通过一些非凡的 HTML 语法，将 DOM 和数据绑定起来，一旦创立了绑定，DOM 将和数据放弃同步，每当变更了数据，DOM 也会相应的更新
- 双向数据绑定
下面说到的数据驱动是 单向绑定 的，但 vue 也反对 双向绑定 的个性，当页面构造的数据产生的时候，能够在不操作 DOM 的条件下，主动把页面的信息同步到 vue 数据中。
MVVM 模型
下面说到两种 vue 的个性其外围原理便是 MVVM
- M：
Model，示意以后页面渲染时做依赖的数据源 - V：
View，示意以后页面所渲染的 DOM 构造 - VM：
ViewModel，示意 vue 的实例，即 MVVM 的外围
通过上图咱们解释下 MVVM 的工作原理，其中 viewModel 作为 MVVM 的外围，相当于一个连贯的 桥梁，中间连贯的别离是 Model(数据源) 和 View(页面构造)。其中 View 就是浏览器上能够看到的构造，Model 通常指的就是通过 Api 调用获取的数据。
- 当数据源发生变化时候，会被 ViewModel 监听到，便会依据最新的数据源自动更新页面的构造
- 当页面元素的值发生变化的时候，也会被 ViewModel 监听到，便会把变动后的最新值同步到 Model 数据源中
这个是一个非常简单的 Vue 例子，但外面曾经蕴含了 View - ViewModel - Model 三局部的构造
根本应用
Ⅰ、指令
咱们先来认识一下什么是 指令 。指令是 vue 为开发者提供的 模板语法，用来辅助开发者渲染页面的根本构造
vue 中的指令依照不同的用处能够分为 6 大类，如下：
1）内容渲染指令
内容渲染指令，就是用来 渲染 DOM 元素中的文本内容。
1、v-text
两个 h1 标签，一个有默认值，一个无默认值，咱们都应用了 v-text 指令，来看后果
值得快乐的是，v-text 如咱们所愿失效了，然而又有些许不对劲，第二个 h1 有本人的默认值，却被 v-text 指令替换了，而这也便成为了 v-text 毛病~！
v-text 指令会笼罩元素内默认的值
{{}}
这个是 vue 提供的语法，专门用来解决 v-text 笼罩默认文本内容值的问题。这种 {{}} 语法的业余名称叫做 插值表达式，上面来看应用办法：
咱们能够通过简略的语法 {{值 key}} 来获取数据源的值，不会烦扰到标签中原有的值，因而 插值表达式 在咱们日常开发中会更加罕用一点。同时它还反对在指令中应用简略的 Java Script 语法：
然而如果数据源中的某个值，不是惯例意义上的 value，而是一段 html 片段，那么通过 {{}} 是否胜利辨认渲染呢？
很遗憾，插值表达式并没有帮咱们渲染出 html 片段，那这个时候该如何解决？就须要用到咱们接下来要说的指令了~！
v-html
该指令一看就晓得是和 html 沾边的，因为 v-text 和 插值表达式 只能帮忙咱们渲染纯文本内容。如果要把蕴含 HTML 标签的字符串渲染为页面 HTML 元素，就须要用到这个v-html 指令
2）属性绑定指令
v-bind
如果须要为 元素的属性 动静绑定值，咱们就须要用到 v-bind 属性绑定指令
因为 v-bind 在日常开发中应用的频率十分高，因而，vue 官网也提供了简写模式（英文符号的 :）
同样在 v-bind 中也反对简略的 JS 语法
3）事件绑定指令
vue 中还提供了 v-on 事件绑定指令，用来为 DOM 阶段绑定事件监听，简略语法如下
咱们在 data 中定义了数据源，在 methods 中定义了办法，通过 v-on 指令来绑定事件。整体构造清晰明了，当然解决 onclick 事件除外，咱们还能够应用 oninput、onkeyup 等原生事件
同样因为 v-on 指令在开发中应用频率十分高，因而，vue 官网同样提供了简写模式（@）
咱们在下面办法函数中呈现了 e 这个参数，不晓得仔细的小伙伴有没有留神到~
在原生的 DOM 事件绑定中，能够在事件处理函数的形参处，接管事件参数对象 event，同样，在 v-on 指令所绑定的事件处理函数中，咱们一样能够通过上述形式获取到 事件参数对象 event
这个时候如果调用函数没有形参还好，然而在存在形参的状况下咱们又该如何解决？咱们先试一试
能够发现这种办法不得行，咱们的事件参数对象被笼罩了！那这就能够说到 vue 为咱们提供的一个 非凡变量 $event，该变量用来示意 原生的事件参数对象 event。$event 能够解决事件参数对象 event 被笼罩的问题。
能够看出，该非凡变量曾经解决了咱们上述遇到的问题！
㈠ 事件修饰符
在 DOM 事件中，有一种经典的问题，那就是 事件冒泡 ，什么是 事件冒泡 呢？
咱们要解决这个问题也很简略，能够利用下面说到的 事件对象 阻止冒泡行为：
通过函数 stopPropagation() 便能够解决事件冒泡问题，然而 Vue 中提供了更加优雅的解决方案~
这种形式在 vue 中称之为 事件修饰符，用来更加不便的对事件的触发进行管制，以下咱们列举 5 个常见的事件修饰符：
| 事件修饰符 | 阐明 |
|---|---|
| .prevent | 阻止默认行为（如：a 标签的跳转，表单的提交等） |
| .stop | 阻止事件冒泡 |
| .capture | 以捕捉模式触发以后的事件处理函数 |
| .once | 绑定的事件只触发一次 |
| .self | 只有在 event.target 是以后元素本身时触发事件处理函数 |
用法皆是通过 @click. 名称 的形式
㈡ 按键修饰符
咱们在监听 键盘事件 的时候，常常须要判断具体的按键，用来对应不同的按键动作行为。当然 vue 中也为 键盘相干的事件 增加 按键修饰符 ，例如监听 回车键：（其余按键按需替换 enter 名称即可）
4）双向绑定指令
咱们后面曾经意识了 v-bind / v-text / v-html / {{}} 等指令，但这些都是 单向绑定指令，页面元素能够从数据源中获取数据，然而数据源无奈从页面元素中获取数据。因而，咱们这里就说到了 vue 提供的 v-model 双向绑定指令~！
双向绑定指令 的益处便是 不必操作 DOM 元素的状况下，能够疾速获取表单的数据
咱们能够在 input 输入框中更改 username 的值，相应的，页面上{{username}} 值也会发生变化~！
当咱们应用双向绑定解决的时候，为了缩小一些不必要的多余操作，如trim, number 转换...，在vue 也曾经为咱们提供了相应的解决修饰符：
| 修饰符 | 阐明 |
|---|---|
| .number | 主动将用户的输出值转为数值类型 |
| .trim | 主动过滤用户输出的收尾空白字符 |
| .lazy | 在“change”时而非“input”时更新 |
5）条件渲染指令
条件渲染指令 是用来管制 DOM 节点 的显示与暗藏
- v-if
- v-show
以上两个指令都是属于条件渲染指令，应用形式如下：
当满足条件的状况下，两者都会失常显示，当不满足条件的状况下咱们来看看两者有什么区别：
咱们能够通过 F12 控制台查看页面元素，发现页面元素缺失了 v-if 润饰的 span 元素，因而咱们得出结论：
实现原理层面
- v-if 指令会动静地创立或移除 DOM 元素，从而管制元素在页面上的显示或暗藏
- v-show 指令会动静为元素增加或移除
style='display: none;'款式，从而管制元素在页面上的显示或暗藏
性能耗费层面
v-if 有更高的 切换开销 ，而 v-show 有更高的 初始渲染开销
- 如果须要频繁的切换，则应用 v-show
- 如果在运行时条件很少扭转，则应用 v-if
有 v-if 标签，天然有 v-else-if 和 v-else 标签了~
6）列表渲染指令
后面咱们绑定的都是单值元素，当咱们遇到数组元素的时候就得应用上 vue 提供的 v-for 标签。该标签是用来 基于一个数组来循环渲染一个列表构造。v-for 指令须要应用 item in items 模式的非凡语法
- items：待循环的数组
- item： 被循环的每一项
除了 item in items 语法，还反对传入 index 作为索引 -> (item, index) in items
这个指令通常搭配的还有一个要害指令 :key，vue 中应用 key 来保护列表的状态，当列表的数据发生变化时，默认状况下，vue 会尽可能复用已存在的 DOM 元素，从而晋升渲染的性能，但这种默认的性能优化策略，会导致有状态的列表无奈备正确更新。
为了给 vue 一个提醒，以便它能跟踪每个节点的身份，从而在保障有状态的列表被正确更新的前提下，晋升渲染的性能。此时，须要为每项提供一个惟一的 key 属性！
对于key 咱们须要留神以下几点：
- key 的值只能是
字符串或者数字类型 - key 的值必须具备
唯一性（通常取 ID） - 应用
index作为 key 的值没有任何意义（index 的值不具备唯一性） - 倡议应用
v-for指令的是哦户肯定要指定 key 的值
Ⅱ、过滤器
下面咱们说完了vue 中的 六大类指令，接下来持续聊聊 vue 中的过滤器（Filters）。
过滤器（Filters）罕用于 文本的格式化 ，能够用来 插值表达式 {{}} 和 v-bind 中，应用形式如下：
咱们以 | 作为 管道符 进行过滤器办法的调用。其中 过滤器办法 写在 filters 节点下。
这种用法能够联想到 Linux 的管道符操作，和 Java 8 中的 stream.map 操作
咱们下面定义的过滤器是属于 公有过滤器 ，何为 公有？那就是这个过滤器只能在以后的 vm 实例所管制的 el 区域内应用，如果想要在多个 vm 实例之间共享过滤器，则须要定义全局过滤器~！
并且过滤器还反对间断调用多个
同时过滤器还反对传递参数
留神：过滤器仅在
vue 2.x和1.x中受反对，在vue 3.x的版本中剔除了过滤器相干的性能。
Ⅲ、侦听器
什么是侦听器？watch 侦听器能够用来监听数据的变动，从而针对数据的变动做出特定的动作！以下便是简略应用例子：
咱们通过监听 data 中的数据源 username，能够获取 username 的最新值，该形式也罕用于判断参数值是否可用，疾速反馈给使用者提醒~！应用侦听器须要留神几点
- 所有的侦听器都应该定义到 watch 节点下
- 侦听器实质上是一个函数，要监听哪个数据发生变化，就把对应数据的名称作为办法名即可
㈠ immediate
在默认状况下，组件在首次加载结束后不会调用 watch 侦听器，如果想让 watch 侦听器立刻被调用，则须要应用 immediate 选项。简而言之，immediate 的作用便是：管制侦听器是否主动触发一次！
应用形式如下：
其中 handler() 是固定写法，当监听值发生变化时，就会主动调用 handler 函数。immediate 示意当页面除此渲染好之后，就立刻触发以后 watch 侦听器
这个时候在控制台就能够发现，当初次绑定值的时候就曾经触发了侦听器
㈡ deep
当咱们监听的值变成一个对象的时候，咱们利用以上写法是否还能够监听的到对象的属性值产生扭转？
通过控制台咱们发现，解决首次监听之外，前面做出的更改都没有触发侦听器！那这个时候就须要用上咱们的 deep 属性：
通过加上 deep: true 注解，咱们胜利监听到了对象属性的变动，如果咱们想要通过简写侦听器的形式就须要依照以下写法：
留神：如果要侦听的是对象的子属性的变动，则必须包裹一层单引号
Ⅳ、计算属性
看完了侦听器的应用，咱们浑水摸鱼，呸~ 趁热打铁来理解一下 vue 中的计算属性！
什么是计算属性？计算属性是指通过一系列运算之后，最终失去一个属性值，这个动静计算出来的属性值，能够被模板构造或 methods 应用，简略示例如下：
计算属性自身应用并不简单，咱们须要理解它的几个特点
- 尽管计算属性在申明的时候被定义为
办法，然而计算属性的实质是一个属性，应用的时候当成一般属性应用即可 - 计算属性会缓存计算的后果，只有计算属性依赖的
数据变动时，才会从新进行计算
Ⅴ、总结
咱们这篇简略介绍了 Vue 的根本用法，当然想要把握 Vue 还有很长的路要走，后续还会继续更新 Vue相干文章！
不要空谈，不要贪懒，和小菜一起做个 吹着牛 X 做架构 的程序猿吧~ 点个关注做个伴，让小菜不再孤独。咱们下文见！
明天的你多致力一点，今天的你就能少说一句求人的话！
我是小菜，一个和你一起变强的男人。💋
微信公众号已开启，小菜良记，没关注的同学们记得关注哦！