vue API 知识点(4) --- 指令、特殊 attribute 、内置组件
一、指令
1.v-text
<span v-text="msg"></span>
<!-- 两种写法是一样的 -->
<span>{{ msg }}</span>
2.v-html
更新元素的 innerHTML ,内容按普通 HTML 插入,不会作为 Vue 模板进行编译,如果试图使用 v-html 组合模板,可以重新考虑是否通过使用组件来代替
在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击,只在可信内容上使用 v-html ,永不用在用户提交的内容上
在单文件组件里, scoped 的样式不会应用在 v-html 内部,因为那部分 HTML 没有被 Vue 的模板编译器处理,如果你希望针对 v-html 的内容设置带作用域的 CSS ,你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略
3.v-show、v-if、v-else、v-else-if、v-for
4.v-on
修饰符:
.stop 调用 event.stopPropagation()
.prevent 调用 event.preventDefault()
.capture 添加事件侦听器时使用 capture 模式(改变冒泡顺序)
<div id="app" v-on:click="show">
1
<div id="app2" v-on:click.capture="show2">
2
<div id="app3" v-on:click="show3">
3
</div>
</div>
</div>
这里的代码因为div2有 capture 关键字,所以此时冒泡顺序发生了改变
正常情况下,点击 div3 一层一层冒泡,div3=>div2=>div1
使用了关键字,先div2=>div3=>div1
1.先冒泡外层带有关键字的事件
2.外层执行结束之后,往里层执行事件
3.最后按照从里向外的事件开始执行
.self 只当事件时从侦听器绑定的元素本身触发时才触发回调
可以理解为跳过冒泡事件。只有点击自己的时候才能触发自己的事件
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调
.native 监听组件根元素的原生事件
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 右键
.middle 中键
.passive 以 { passive: true } 模式添加侦听器
5.v-bind
6.v-model
修饰符:
.lazy 取代 input 监听 change 事件
.number 输入字符串转为有效的数字
.trim 输入首尾空格过滤
7.v-slot
缩写:#
参数:插槽名(可选,默认是 default)
用法:提供具名插槽或需要接收 prop 的插槽
8.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
<div v-pre>{{ dddddd }}</div>
9.v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] {display: none} 一起用时,这个指令可以隐藏未编译的 Mustache 标签,知道实例准备完毕
<div v-cloak>
{{ message }}
</div>
[v-cloak] {
display: none;
}
不会显示,直到编译结束
10.v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
二、特殊的 attribute
1.key
key 的特殊 attribute 主要用于在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key,重复的 key 会造成渲染错误
2.ref
ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例
3.is
用于动态组件且基于 DOM 内模板的限制来工作
<component v-bind:is="currentTabComponent"></component>
三、内置的组件
1.component
渲染一个 元组件 为动态组件。依 is 的值,来决定哪个组件渲染
2.transition
props:
name 用于自动生成 CSS 过渡类名
appear boolean,是否在初始渲染时使用过渡。默认 false
css boolean,是否使用 css 过渡类。默认 true
type string,指定过渡事件类型,侦听过度何时结束。有效值为 transition 和 animation
mode string,控制离开/进入过渡的事件序列。out-in 和 in-out ;默认同时进行
duration number | {enter: number, leave: number} 指定过渡的持续时间,默认情况下,Vue会等待过渡所在根元素的第一个 transitionend 或 animationend 事件
enter-class
leave-class
appear-class
enter-to-class
leave-to-class
appear-to-class
enter-active-class
leave-active-class
appear-active-class
事件:
before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled(v-show only)
appear-cancelled
用法:<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上,而不会额外渲染 DOM 元素,也不会出现在可被检查的组件层级中
3.transition-group
基本同 transition
作为多个元素/组件的过渡效果
注意,每个 transition-group 的子节点必须有独立的key,动画才能正常工作
4.keep-alive
props:
include 字符串或政正则表达式。只有名称匹配的组件会被缓存
exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max 数字。最多可以缓存多少组件实例
最多可以缓存多少组件实例,一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉
<keep-alive :max="10">
<component :is="view"></component>
</keep-alive>
用法:<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染。
<keep-alive> 要求同时只有一个子元素被渲染
5.slot
用于命名插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换
vue API 知识点(4) --- 指令、特殊 attribute 、内置组件的更多相关文章
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- vue API 知识点(2)---选项总结
一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...
- vue第十一单元(内置组件)
第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- 阅读vue源码-----内置组件篇(keep-alive)
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
随机推荐
- nginx学习http_access_module模块
location ~ ^/1.html { root /opt/app/code; deny XXXXX; #这个ip不能访问1.html allow all; #其他的可以访问这个页面1.html ...
- influxdb的基本使用
influxDB名词 database:数据库: measurement:数据库中的表: points:表里面的一行数据. influxDB中独有的一些概念 Point由时间戳(time).数据(fi ...
- fastjson JSONObject简单使用
工作中用的蛮多的最近整理下,概括地说 通过这个工具可以让一个json在json串,JSONObject,java对象之间进行转化 首先我们先写2个bean来构成一个比较复杂的json串: public ...
- MIT-6.004计算结构(2019年春)
L01: Introduction 略 L02: RISC-V Assembly 1.计算机处理器主要有三部分组成:内存.寄存器.算数逻辑单元 算数逻辑单元与寄存器通信,寄存器与内存通信,而算术逻辑单 ...
- LeetCode 036 Valid Sudoku
题目要求:Valid Sudoku Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudo ...
- Alpha冲刺-第七次冲刺笔记
Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...
- Unity全局调用非静态函数
Unity全局调用非静态函数 情形 大概就是做游戏的时候想做一个给玩家展示信息的东西,比如玩家按了不该按的键提醒一下之类的.这个脚本倒是很简单,找个Text组件往上面加字就行了.问题在于这个脚本游戏中 ...
- Markdown实用教程
Markdown 是用来编写结构化文档的一种纯文本格式,它使我们在双手不离开键盘的情况下,可以对文本进行一定程度的格式排版.markdown语法是通用的,很多写作平台都是支持markdown的,比如简 ...
- PyQt学习随笔:QTableWidget的selectedRanges、setRangeSelected访问选中矩形范围的方法
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget对项的操作支持选中多个项的情况下,可以通过方法selectedRanges ...
- PyQt(Python+Qt)学习随笔:Qt Designer中主窗口对象的toolButtonStyle属性
tooButtonStyle属性保存主窗口工具栏按钮的样式设置,用来表示工具栏按钮的文字和图标怎么显示. 该属性的可设置值类型为枚举类型Qt.ToolButtonStyle,它包含如下值: 该属性的缺 ...