Vue2框架学习一：基础语法

Vue 简介

概念

是一套用于构建用户界面的前端框架

特性

数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。

好处：当页面数据发生变化时，页面会自动重新渲染。

数据驱动视图是单向的数据绑定。

双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。

好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值。

MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。 MVVM 指的是 Model、 View和 ViewModel，它把每个 html 页面都拆分成了这三个部分。

• Model 表示当前页面渲染时所需的数据源。
• View 表示当前页面所渲染的 DOM 结构。
• ViewModel 表示 vue 的实例，它是 MVVM 的核心。

版本介绍

目前共有3个大版本

• 1.x 几乎被淘汰，不再建议学习与使用

• 2.x 主流版本，会被逐渐淘汰

• 3.x 尚未普及，未来开发的趋势

Vue 的基本使用

1. 导入 vue.js 的 script 的脚本文件

2. 在页面中生命一个将要被 vue 控制的 DOM 区域

3. 创建 vm 实例对象（vue实例对象）

Vue 的指令

概念

指令（ Directives ）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

指令是 vue 开发中最基础、最常用、最简单的知识点。

分类

内容渲染指令

用来辅助开发者渲染 DOM 元素的文本内容。常用指令如下：

• v-text

  用法：<p v-text="username"></p>
  v-text 指令会覆盖元素内默认的值

• {{ }}

  作用：专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式。
  用法：<p>姓名：{{username}}</p>
  相对于 v-text 指令来说，插值表达式在开发中更常用一些。因为它不会覆盖元素中的默认文本内容。

• v-html

  作用：v-text 和插值表达式只能渲染纯文本内容。如果要把包含 HTML标签的字符串渲染为页面中的 HTML 元素，则需要使用到 v-html 指令。
  用法：

  <!-- 假定 description 数据为：<p style="color: red">这是一段红色的文字</p> --> <p v-html="description"></p>

  1 2	<!-- 假定 description 数据为：<p style="color: red">这是一段红色的文字</p> --> <p v-html="description"></p>

属性绑定指令

为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。简写为英文的 :

事件绑定指令

使用 v-on 指令来绑定事件，用来辅助程序员为 DOM 元素绑定事件监听。简写为 @

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明

• 事件参数对象

  在原生 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event 。同理，在使用 v-on 所绑定的事件处理函数中，同样可以接受到事件参数对象 event。

• 绑定事件并传参

  在使用 v-on 绑定事件时，可以使用 () 进行传参

• $event

  $event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象被覆盖的问题。

• 事件修饰符

  在事件处理函数中，调用 event.preventDefault 或 event.stopProgation() 是非常常见的需求。因此，vue 中提出了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。

  • .prevent 阻止默认行为（如：阻止a链接的跳转、阻止表单的提交等）

  • .stop 阻止事件冒泡

  • .capture 以捕获模式触发当前的事件处理函数

  • .once 绑定的事件只触发一次

  • .self 只有在 event.target 是当前元素自身时触发事件处理函数

• 按键修饰符

  在监听键盘事件时，我们经常需要判断详细的按键。

  • @keyup.enter 当 key 是 Enter 触发事件
  • @keyup.esc 当 key 是 Esc 触发事件

双向绑定指令

使用v-model来绑定。辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

指令修饰符（处理用户输入的内容）

• .number 自动将用户输入的值转为数值类型
• .trim 自动过滤用户输入的首尾空白字符
• .lazy 在 change 时而非 input 时更新

条件渲染指令

辅助开发者按需控制 DOM 的显示与隐藏。指令有v-if与v-show

v-if 与 v-show 的区别

• 实现原理不同

  v-if 指令会动态的创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；

  v-show 指令会动态的为元素添加或移除 style=" display: none; "样式，从而控制元素的显示与隐藏。

• 性能消耗不同

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

  • 如果需要非常频繁的切换，则使用 v-show 较好
  • 如果在运行时条件很少改变，则使用 v-if 较好

v-else 与 v-else-if 必须搭配 v-if 使用，否则将不被识别

列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用 item in items 形式的特殊语法

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

v-for 中的索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法为 (item, index) in items

v-for 指令中的 item 项和 index 索引都是形参，可以进行需要进行重命名。如 (user, i) in userlist

使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每一项提供一个唯一的 key属性 。

key 的注意事项

• key 的值只能是字符串或数字类型
• key 的值必须具有唯一性（即 key 的值不能重复）
• 建议把数据项 id 属性的值作为 key 的值（因为id属性的值具有唯一性）
• 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
• 建议使用 v-for 指令时一定要指定 key 的值（既提升性能，又防止列表状态紊乱）

Vue 的过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。

过滤器应该被添加在 JS 表达式的尾部，由“管道符”进行调用。

定义过滤器

可以在 filters 节点中定义过滤器

私有过滤器和全局过滤器

在 filters 节点中定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个vue实例之间共享过滤器，则可以按如下格式定义全局过滤器

连续调用多个过滤器

过滤器可以串联地进行调用，如 {{ message | filterA | filterB }}

上述表达式表示：

• 表示把 message 的值交给 filterA处理；
• 把 filterA 处理的结果再交给 filterB 处理；
• 把 filterA 处理后的结果，作为最终的值渲染到页面上。

过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接受参数

过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 版本中剔除了过滤器相关的功能。

官方建议在 3.x 中使用计算属性或方法代替被剔除的过滤器功能