美文网首页react & vue & angular前端
Vue介绍(重点Vue的六种详细指令介绍)

Vue介绍(重点Vue的六种详细指令介绍)

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-06-06 09:33 被阅读0次

什么是vue框架?

官方给出的概念:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的前端框架。

vue的特性

vue 框架的特性,主要体现在如下两方面:

① 数据驱动视图

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

好处:当页面数据发生变化时,页面会自动重新渲染!

注意:数据驱动视图是单向的数据绑定

② 双向数据绑

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

中。

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

 js数据的变化,会被自动渲染到页面上

页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新到js数据中


MVVM

① 了解MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,

它把每个 HTML 页面都拆分成了这三个部分。

Model 表示当前页面渲染时所依赖的数据源。

View 表示当前页面所渲染的 DOM 结构。

ViewModel 表示 vue 的实例,它是 MVVM 的核心

②MVVM的工作原理

ViewModel 作为 MVVM 的核心,是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。

当数据源发生变化时,会被 ViewModel 监听到,VM 会根据最新的数据源自动更新页面的结构

当表单元素的值发生变化时,也会被 VM 监听到,VM 会把变化过后最新的值自动同步到 Model 数据源

vue 的调试工具

        1. 安装 vue-devtools 调试工具 

        2. 配置 Chrome 浏览器中的 vue-devtools 点击 Chrome 浏览器右上角的 按钮,选择 更多工具 -> 扩展程序 -> Vue.js devtools 详细信息 ,并勾选如下 的两个选项:

注意:修改完成配置以后重启浏览器才生效

        3. 使用 vue-devtools 调试 vue 页面

        在浏览器中 访问一个使用了 vue 的页面 ,打开浏览器的 开发者工具 , 切换到 Vue 面板 ,即可使用 vue-devtools 调试当前的页面。

vue 的指令与过滤器


1. 指令的概念

        指令(Directives) 是 vue 为开发者提供的 模板语法 ,用于 辅助开发者渲染页面的基本结构 。vue 中的指令 按照不同的用途 可以分为如下 6 大类:

        ① 内容渲染 指令

        ② 属性绑定 指令

        ③ 事件绑定 指令

        ④ 双向绑定 指令

        ⑤ 条件渲染 指令

        ⑥ 列表渲染 指令

1.1 内容渲染指令

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

        v-text 指令的缺点会覆盖元素内部原有内容

        {{ }} 插值表达式:在实际开发中用的最多,只是内容的占位符,不会覆盖原有内容

        v-html 指令的作用:可以把带有标签的字符串,渲染成真正的HTML内容


1.2 属性绑定指令

注意: 插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中

        如果需要为元素的属性动态绑定属性值,则需要用到v-bind属性绑定指令。

        简写是英文的 :

        在使用v-bind 属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号,例如 <div :title=" 'box' + index ">这是一个 div</div>

1.3 事件绑定指令

        vue 提供了v-on 事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。

        简写@事件名称

        例如: <button @click="add(1)">+1</button>

1.3.1 事件对象$event

        $event 是 vue 提供的 特殊变量 ,用来表示 原生的事件参数对象 event 。$event 可以解决事件参数对象 event 被覆盖的问题,他是固定写法必须是$event

1.3.2 事件修饰符

        在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此,

        vue 提供了 事件修饰符 的概念,来辅助程序员更方便的 对事件的触发进行控制 。

 事件修饰符加在事件后,语法格式如下:       

 <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

常用的 5 个事件修饰符如下

按键修饰符

        在监听 键盘事件 时,我们经常需要 判断详细的按键 。此时,可以为 键盘相关的事件 添加 按键修饰符 ,例如:

1.4 双向绑定指令(只能用于表单元素)


vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。

v-model 指令的修饰符

        为了方便对用户输入的内容进行处理 ,vue 为 v-model 指令提供了 3 个修饰符,分别是:


1.5 条件渲染指令

        条件渲染指令 用来辅助开发者 按需控制 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-if 可以单独使用,或配合 v-else 指令一起使用

v-else 指令 必须配合 v-if 指令一起使用,否则它将不会被识别!

 v-else-if v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: 

 注意:v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别

1.6 列表渲染指令

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

        用 item in items 形式的特殊语法,其中:

                items 是 待循环的数组

                item 是 被循环的每一项

v-for 中的索引

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


使用 key 维护列表的状态

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

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


key 的注意事项

① key 的值只能是 字符串 或 数字 类型

② key 的值 必须具有唯一性 (即:key 的值不能重复)

③ 建议把 数据项 id 属性的值 作为 key 的值(因为 id 属性的值具有唯一性)

④ 使用 index 的值 当作 key 的值 没有任何意义 (因为 index 的值不具有唯一性)

⑤ 建议使用 v-for 指令时 一定要指定 key 的值 (既提升性能、又防止列表状态紊乱)

2. 过滤器

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

        过滤器应该被添加在 JavaScript 表达式的 尾部 ,由“ 管道符 ”进行调用,示例代码如下:

 2.1 定义局部过滤器

2.2定义全局过滤器(有专门写这一部分的)

2.3 连续调用多个过滤器

        过滤器可以 串联地 进行调用

2.4 过滤器传参

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

当前,vue 共有 3 个大版本,其中:

2.x 版本的 vue 是目前企业级项目开发中的主流版本

3.x 版本的 vue 于 2020-09-19 发布,生态还不完善,尚未在企业级项目开发中普及和推广

1.x 版本的 vue 几乎被淘汰,不再建议学习与使用

总结:

3.x 版本的 vue 是未来企业级项目开发的趋势;

2.x 版本的 vue 在未来(1 ~ 2年内)会被逐渐淘汰

相关文章

网友评论

    本文标题:Vue介绍(重点Vue的六种详细指令介绍)

    本文链接:https://www.haomeiwen.com/subject/lqllmrtx.html