乐趣区

关于前端: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 个常见的事件修饰符:

事件修饰符 阐明
.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 有更高的 初始渲染开销

  1. 如果须要频繁的切换,则应用 v-show
  2. 如果在运行时条件很少扭转,则应用 v-if

v-if 标签,天然有 v-else-ifv-else 标签了~

6)列表渲染指令

后面咱们绑定的都是单值元素,当咱们遇到数组元素的时候就得应用上 vue 提供的 v-for 标签。该标签是用来 基于一个数组来循环渲染一个列表构造v-for 指令须要应用 item in items 模式的非凡语法

  • items:待循环的数组
  • item: 被循环的每一项

除了 item in items 语法,还反对传入 index 作为索引 -> (item, index) in items

这个指令通常搭配的还有一个要害指令 :keyvue 中应用 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.x1.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 做架构 的程序猿吧~ 点个关注做个伴,让小菜不再孤独。咱们下文见!

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

退出移动版