v-on、事件修饰符、v-model、一些常用指令

v-on

v-on、事件修饰符、v-model、一些常用指令_第1张图片

v-on、事件修饰符、v-model、一些常用指令_第2张图片
v-on、事件修饰符、v-model、一些常用指令_第3张图片

事件修饰符

v-on、事件修饰符、v-model、一些常用指令_第4张图片
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件

.middle - 中间滚轮事件
v-on、事件修饰符、v-model、一些常用指令_第5张图片
v-on、事件修饰符、v-model、一些常用指令_第6张图片

v-model

v-on、事件修饰符、v-model、一些常用指令_第7张图片
v-on、事件修饰符、v-model、一些常用指令_第8张图片

常用指令

v-if:根据条件判断是否显示或隐藏元素。
v-for:循环遍历数组或对象,并渲染每个元素。
v-bind(简写为:):动态绑定属性或组件的属性。
v-on(简写为@):绑定事件监听器,执行相应的方法。
v-model:实现表单元素与数据的双向绑定。
v-show:根据条件判断是否显示或隐藏元素,与v-if类似,但是使用CSS的display属性来控制显示状态,而不是添加/移除元素。
v-text:将数据绑定到元素的文本内容。
v-html:将数据绑定到元素的HTML内容,可以渲染HTML标记。
v-pre:跳过模板编译,直接将内容显示为纯文本。
v-cloak:用于解决初始化时显示模板标记的问题,使用CSS隐藏元素,直到Vue实例完成编译。

你可能感兴趣的:(前端)