关于前端:Vue入门-一记敲门砖敲近你我它

大家好，我是小菜。
一个心愿可能成为 吹着牛 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 个常见的事件修饰符：

用法皆是通过 @click. 名称 的形式

㈡ 按键修饰符

咱们在监听 键盘事件 的时候，常常须要判断具体的按键，用来对应不同的按键动作行为。当然 vue 中也为 键盘相干的事件 增加 按键修饰符 ，例如监听 回车键：（其余按键按需替换 enter 名称即可）

4）双向绑定指令

咱们后面曾经意识了 v-bind / v-text / v-html / {{}} 等指令，但这些都是 单向绑定指令，页面元素能够从数据源中获取数据，然而数据源无奈从页面元素中获取数据。因而，咱们这里就说到了 vue 提供的 v-model 双向绑定指令~！

双向绑定指令 的益处便是 不必操作 DOM 元素的状况下，能够疾速获取表单的数据

咱们能够在 input 输入框中更改 username 的值，相应的，页面上{{username}} 值也会发生变化~！

当咱们应用双向绑定解决的时候，为了缩小一些不必要的多余操作，如trim, number 转换...，在vue 也曾经为咱们提供了相应的解决修饰符：

5）条件渲染指令

条件渲染指令 是用来管制 DOM 节点 的显示与暗藏

• v-if
• v-show

以上两个指令都是属于条件渲染指令，应用形式如下：

当满足条件的状况下，两者都会失常显示，当不满足条件的状况下咱们来看看两者有什么区别：

咱们能够通过 F12 控制台查看页面元素，发现页面元素缺失了 v-if 润饰的 span 元素，因而咱们得出结论：

实现原理层面

• v-if 指令会动静地创立或移除 DOM 元素，从而管制元素在页面上的显示或暗藏
• v-show 指令会动静为元素增加或移除style='display: none;' 款式，从而管制元素在页面上的显示或暗藏

性能耗费层面

v-if 有更高的 切换开销 ，而 v-show 有更高的 初始渲染开销

1. 如果须要频繁的切换，则应用 v-show
2. 如果在运行时条件很少扭转，则应用 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 做架构 的程序猿吧~ 点个关注做个伴，让小菜不再孤独。咱们下文见！

明天的你多致力一点，今天的你就能少说一句求人的话！
我是小菜，一个和你一起变强的男人。 💋
微信公众号已开启，小菜良记，没关注的同学们记得关注哦！