一、指令

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 、内置组件的更多相关文章

  1. Vue内置组件[回顾]

    1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...

  2. Vue基础(环境配置、内部指令、全局API、选项、内置组件)

    1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...

  3. vue API 知识点(2)---选项总结

    一.选项 / 数据 1.data 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例,如果 data 仍然是一个纯碎的对象,则所有的实例将被共享引用同一个 ...

  4. vue第十一单元(内置组件)

    第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件,作用是:配 ...

  5. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  6. Vue内置组件keep-alive的使用

    本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...

  7. 阅读vue源码-----内置组件篇(keep-alive)

    1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...

  8. form-create教程:给内置组件和自定义组件添加事件

    本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...

  9. Django:内置组件Content-Type

    12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...

  10. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

随机推荐

  1. nginx学习http_access_module模块

    location ~ ^/1.html { root /opt/app/code; deny XXXXX; #这个ip不能访问1.html allow all; #其他的可以访问这个页面1.html ...

  2. influxdb的基本使用

    influxDB名词 database:数据库: measurement:数据库中的表: points:表里面的一行数据. influxDB中独有的一些概念 Point由时间戳(time).数据(fi ...

  3. fastjson JSONObject简单使用

    工作中用的蛮多的最近整理下,概括地说 通过这个工具可以让一个json在json串,JSONObject,java对象之间进行转化 首先我们先写2个bean来构成一个比较复杂的json串: public ...

  4. MIT-6.004计算结构(2019年春)

    L01: Introduction 略 L02: RISC-V Assembly 1.计算机处理器主要有三部分组成:内存.寄存器.算数逻辑单元 算数逻辑单元与寄存器通信,寄存器与内存通信,而算术逻辑单 ...

  5. LeetCode 036 Valid Sudoku

    题目要求:Valid Sudoku Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudo ...

  6. Alpha冲刺-第七次冲刺笔记

    Alpha冲刺-冲刺笔记 这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2 这个作业要求在哪里 https://edu.cnblogs. ...

  7. Unity全局调用非静态函数

    Unity全局调用非静态函数 情形 大概就是做游戏的时候想做一个给玩家展示信息的东西,比如玩家按了不该按的键提醒一下之类的.这个脚本倒是很简单,找个Text组件往上面加字就行了.问题在于这个脚本游戏中 ...

  8. Markdown实用教程

    Markdown 是用来编写结构化文档的一种纯文本格式,它使我们在双手不离开键盘的情况下,可以对文本进行一定程度的格式排版.markdown语法是通用的,很多写作平台都是支持markdown的,比如简 ...

  9. PyQt学习随笔:QTableWidget的selectedRanges、setRangeSelected访问选中矩形范围的方法

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在QTableWidget对项的操作支持选中多个项的情况下,可以通过方法selectedRanges ...

  10. PyQt(Python+Qt)学习随笔:Qt Designer中主窗口对象的toolButtonStyle属性

    tooButtonStyle属性保存主窗口工具栏按钮的样式设置,用来表示工具栏按钮的文字和图标怎么显示. 该属性的可设置值类型为枚举类型Qt.ToolButtonStyle,它包含如下值: 该属性的缺 ...