

首页  思维导图  详情



3、VUE的常用指令1

2022-04-01 12:17:24   0  举报





AI智能生成

vue学习

前端开发

vue

金色小芝麻

模版推荐

作者其他创作

大纲/内容

定义

directive

在vue中 v-xxx 的行内属性我们统称为 vue指令

这些指令实际上都是基于自定义属性设置的，只不过在 VUE 上有特殊的含义

当vue加载成功并进行处理的时候，会按照相关的规则解析和渲染视图，遇到对应的指令实现对应的功能

有原生对应的

v-text

定义

给非表单元素设置内容

相当于小胡子语法

v-text会把所有内容分都当做文本

使用

v-text = '变量'

场景

传统的胡子语法，在vue没有加载完成之前，会把{{xxx}}展示在页面中，当vue加载完才会出现真正的内容，这样体验不好

可以使用这种方式替代小胡子语法

v-html

定义

给非表单元素设置内容

相当于原生的innerHTML

v-html支持对于标签的自动识别

使用

v-html = '变量'

注意

只在可信任的内容上使用该指令

用户可以操作的一般不添加这个指令

v-for

定义

循环展示标签

想循环谁就给谁设置v-for

使用

v-for = '(值，index) in vue变量'

值代表数组中的当前项

index 是对应的索引

注意

值和 key 是自己定义的变量， 两个都写需要加上();

这两个变量 只能用在当前使用v-for的标签上及其内部

应用范围

可以用来循环数组、字符串、数字、对象

多用于数组

无原生对应的

v-bind

定义

给元素的内置属性动态绑定数据

例如：给img绑定动态的图片路径地址

使用

v-bind:src = “变量”

可简写为 :src = “变量”

注意

是专门用来处理行内属性（src class style ...）的指令

一般简写成冒号（:）

v-cloak

定义

为了解决小胡子的显示问题

使用

v-cloak

需要配合css使用

有这个 v-cloak 行内属性的元素会有这个样式（属性选择器）

[v-cloak]{ display: none; }

原理

当vue模板渲染之前，执行的是普通的html，这时，我们写的css样式起作用，让元素display：none，就看不见小胡子了

当模板渲染完成之后，vue会自动把这个行内属性移除，这时在页面上展示的是渲染好的html了；

v-once

定义

绑定的数据是一次性的，后面不论数据怎么改变，视图也都不会重新渲染

使用

v-once

注意

vue对有这个指令的元素只渲染一次

v-pre

定义

告诉vue 这个标签及其子标签都不用vue渲染

使用

v-pre

作用

可以用来提升vue的编译效率

 Collect

Get Started

vue前端架构图

 Collect

Get Started

2-6-3-（1）-3

 Collect

Get Started

3-3我的

 Collect

Get Started

50个常用的DeepSeek指令





0 条评论

下一页