《跟热饭一起学习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就是修饰符。意思是什么大家暂时可以不用明白,先背好这个结构。


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

相关文章
|
1月前
|
JavaScript
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南,涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
59 2
VUE学习二:事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
|
22天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
9天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
26天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
1月前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
42 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
13 1
|
1月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
1月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
30 1
|
1月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
61 1
下一篇
无影云桌面