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.jsscript 的脚本文件

  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 指令。
    用法:

    
    

属性绑定指令

为元素的属性动态绑定属性值,则需要用到 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-ifv-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实例之间共享过滤器,则可以按如下格式定义全局过滤器

Vue.filter('capitalize', (str) => {
    return str.chatAr(0).toUpperCase() + str.slice(1) + '~~'
})

连续调用多个过滤器

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

上述表达式表示:

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

过滤器传参

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

<p>{{ message | filterA(arg1, arg2) }}</p>

// 第一个参数永远都是“管道符”前面待处理的值
// 从第二个参数开始,才是调用过滤器时传递过来的参数
Vue.filter('filterA', (msg, arg1, arg2) => {
// 过滤的代码逻辑
})

过滤器的兼容性

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

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

这些信息可能会帮助到你: 关于我们 | 饿了么返钱 | 捐赠支持

文章名称:Vue2框架学习一:基础语法
文章链接:https://www.bysjb.cn/vue2.html
THE END
分享
二维码
打赏
< <上一篇
下一篇>>