一、Vue3基础[内置指令]
创始人
2024-04-01 12:16:34

一、内置指令

1.v-text

解释：同v-html相对，内容只会以纯文本内容展示



{{msg}}

2.v-html

解释：同v-text相对，内容会被html语法解析

注意：在单文件组件，scoped 样式将不会作用于 v-html 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。想要使用到需要style是全局样式，不加scoped

3.v-show

解释：让元素隐藏，即仅切换了该元素上名为 display 的 CSS 属性

Hello!

4.v-if

解释：同if语法一样，只会为true时，其才会渲染

A



B



C



Not A/B/C

5.v-for

解释：循环
注意：v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名；要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示（默认方式是尝试就地更新元素而不移动它们）

{{ item.text }}

6.v-on

简写：@

常用事件：click

修饰符()：

  • .stop 是阻止冒泡行为不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件；其他向上冒泡的元素全部不会触发,从自身开始不向外部发射冒泡信号
  • .prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
  • .self 是只有是自己触发的自己才会执行,其只会阻止在自己身上冒泡；只响应当前元素自身触发的事件，并不会阻止冒泡继续向外部触发
  • .capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
  • .once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
  • .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。

解释：绑定事件（里面一般绑定函数）

7.v-bind

解释：同上一篇内容，绑定属性之类

8.v-model

解释：在表单输入元素或组件上创建双向绑定

使用范围仅限：