《跟热饭一起学习vue吧》Part.6 指令带参数和修饰符

简介: 《跟热饭一起学习vue吧》Part.6 指令带参数和修饰符


指令带参数

大家一定不陌生v-bind,我们上一节课 说 ,v-开头的都是 vue自己做的一些指令,讲了一个v-if指令,用来控制元素标签是否显示隐藏。


但是这个v-bind,也是一个指令。我们一开始认识它的时候,是说属性绑定的章节,那节课里,我们从属性为角度切入,说前面加个v-bind: 就是绑定到了vue的变量了可以。

但是本节课我们要重新从v-bind自身的角度讲起,v-bind是一个指令,它要带着参数,才行。而v-bind:class 中,这个class就是一个参数,也就是说,v- 指令有一些是要带着参数的,而v-bind这个指令的参数就是 元素的属性!


它的作用不用多说了,大家都知道了。v-bind可以带的其他属性有很多,比如v-bind:href,v-bind:name 等等。


其他的指令我们后面会讲,但是这里先给大家提前认识一个:v-on指令,v-on也是要带参数的,它的参数之一就是click 。


连起来就是v-on:click = "方法名" 作用是执行某些函数方法动作等。相当于原生html中的onclick。



指令带修饰符

刚刚说完指令可以带参数,现在要讲的是,指令也可以带修饰符,不得不说,这个设计确实很优秀。


那么什么是修饰符呢?答:就是对这个指令绑定后面变量/方法的时候,使用特殊方式。


那么怎么用修饰符呢?答:在参数后加.修饰符即可,如:v-on:click.prevent='' 其中v-on是指令,click是参数,.prevernt就是修饰符。意思是什么大家暂时可以不用明白,先背好这个结构。


本节课我们知道了,指令后是可以接参数和修饰符的。具体有什么到时候我们直接百度即可,因为实在太多了,不过我们现在已经学会了这个用法,到时候百度也能看的懂了。

相关文章
|
5天前
|
JavaScript
vue常用指令
vue常用指令
13 1
|
5天前
|
JavaScript 前端开发
vue常见的指令
vue常见的指令
10 2
|
17天前
|
JavaScript 前端开发 安全
【Vue】内置指令真的很常用!
【Vue】内置指令真的很常用!
|
18天前
|
JavaScript 前端开发 开发者
Vue的指令系统:Vue内置指令的使用
【4月更文挑战第24天】Vue.js 指令详解:简化DOM操作与数据绑定。Vue提供以`v-`开头的内置指令,如`v-bind`(响应式更新属性)、`v-model`(双向数据绑定)、`v-if/v-else`(条件渲染)、`v-for`(循环渲染)、`v-on/@`(事件监听)等,提升开发效率和代码可读性。通过`v-bind`绑定属性,`v-model`处理表单数据,`v-if/v-for`控制元素显示与循环,以及`v-on`响应事件,开发者能更高效地构建用户界面。理解并掌握这些指令对Vue开发至关重要。
|
20天前
|
JavaScript 前端开发 UED
数据绑定魔法:Vue中的插值和指令
【4月更文挑战第22天】Vue.js 是一款轻量级前端框架,擅长处理动态数据。本文聚焦于Vue中的数据绑定,包括插值和指令。插值({{ }})用于在HTML中展示JavaScript表达式,如变量和简单运算。指令(v-前缀)如v-bind、v-model和v-on,则提供更复杂的声明式渲染。v-bind绑定属性,v-model实现双向数据绑定,v-on监听DOM事件。指令还支持修饰符(如.prevent)和动态参数,增强灵活性。掌握这些,能提升开发效率并创建响应式界面。
|
26天前
|
JavaScript 开发者
VUE指令: 请解释v-pre指令的作用。
`v-pre`指令在Vue中用于避免元素及子元素的编译,显示原始HTML。当需要防止模板解析,如固定文本,可使用此指令。但注意,它会忽略插值、事件绑定等。适用于提升性能,跳过无指令节点的编译。
12 0
|
26天前
|
JavaScript
VUE指令:v-once指令是用来做什么的?
`【4月更文挑战第16天】v-once`是Vue指令,用于一次性渲染元素/组件,不响应后续数据变化,适用于静态内容。在Vue3中,它能优化性能,但可能阻止数据更新。子元素默认也遵循此规则。结合使用`v-memo`可控制渲染,提升效率。需谨慎使用,以免影响正常更新。
10 0
|
26天前
|
JavaScript
VUE指令: 什么是Vue的修饰符?
Vue修饰符是特定的指令后缀,如`.lazy`或`.prevent`,它们改变指令行为:表单处理(v-model)、事件处理(阻止默认行为、阻止冒泡)、鼠标键定制、键值简化绑定及属性动态绑定(v-bind)。这些修饰符增强指令灵活性,适应不同场景需求。
9 0
|
1月前
|
JavaScript 前端开发
|
1月前
|
JavaScript 前端开发
vue的常用指令
vue的常用指令