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 的基本使用
-
导入
vue.js
的script
的脚本文件 -
在页面中生命一个将要被 vue 控制的
DOM
区域 -
创建
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-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实例之间共享过滤器,则可以按如下格式定义全局过滤器
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 中使用计算属性或方法代替被剔除的过滤器功能
共有 0 条评论