Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[vue] 说下你对指令的理解? #230

Open
undefinedYu opened this issue Jun 11, 2019 · 7 comments
Open

[vue] 说下你对指令的理解? #230

undefinedYu opened this issue Jun 11, 2019 · 7 comments
Labels
vue vue

Comments

@undefinedYu
Copy link
Contributor

[vue] 说下你对指令的理解?

@undefinedYu undefinedYu added the vue vue label Jun 11, 2019
@wesweet
Copy link

wesweet commented Nov 11, 2019

主要提供了一种机制,将数据的变化映射为DOM行为

@canwdev
Copy link

canwdev commented Feb 22, 2020

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。—— 官方文档

@zhaofeipeter
Copy link

给程序员提供操作原生Dom的途径

@crush2020
Copy link

指令就是把操作DOM的方法糅合为一条命令。

@hyj443
Copy link

hyj443 commented Oct 21, 2021

指令值改变时所产生的连带影响,作用于DOM。指令值一般写JS表达式 ,写在模板里,它符合HTML规范的模板语法,在AST语法解析时,会识别出是内置指令还是自定义指令,最后生成一段可执行的JS代码,然后执行对应的处理逻辑。

@yxllovewq
Copy link

指令可以让开发者在指令插入DOM元素的不同阶段通过指令提供的勾子来控制DOM,实现不同的功能

@Cai-zhiji
Copy link

Cai-zhiji commented Jul 5, 2023

定义

在Vue中,指令(Directives)是一种特殊的属性,用于给HTML元素赋予特定的行为或功能。指令以v-作为前缀,通过在元素上添加指令来达到特定的效果。Vue提供了一些内置指令,同时也允许开发者自定义指令来满足特定的需求。

类型

操作dom

这类指令用于操作HTML DOM元素,改变元素的样式、属性、内容等。
v-bind:用于动态地绑定元素的属性或组件的属性。
v-model:用于在表单元素和组件之间实现双向数据绑定。
v-show:根据表达式的值决定元素是否显示。
v-if/v-else/v-else-if:根据条件决定是否渲染元素。
v-for:用于循环渲染元素列表。

响应式交互

这类指令用于处理用户交互,响应用户的输入或操作。
v-on(简写为@):用于监听DOM事件,执行相应的方法或表达式。
v-click-outside:在点击元素之外的区域时触发相应的方法。
v-debounce:延迟执行方法,避免频繁触发。

除了这些内置指令,开发者还可以通过自定义指令来扩展Vue的功能。自定义指令可以用于封装特定的DOM操作、实现可复用的行为或功能,以及与第三方库的集成等。

指令的使用方式通常是在元素上使用v-前缀,后面跟上指令名称和相应的参数。指令还可以带有修饰符,用于改变指令的行为。例如,v-on:click表示在点击事件上触发指定的方法,v-bind:title表示将元素的title属性绑定到指定的数据。

通过使用指令,开发者可以更方便地操作DOM、实现交互功能和处理数据绑定,使得Vue应用的开发变得更加灵活和高效。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

8 participants