vue事件的基本使用和内置指令

only‘t

已于 2024-03-07 14:01:08 修改

阅读量1.6k

点赞数 21

文章标签： vue.js 前端 javascript ecmascript 前端框架

于 2024-02-19 11:24:28 首次发布

本文链接：https://blog.csdn.net/2301_77264434/article/details/136166496

版权

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名
2.事件的回调需要配置在methods对象中,最后会在vm中
3.methods中配置的函数,不要使用箭头函数!否则this就不是vm而是全局部
4.methods中配置的函数,都是被vue所管理的函数,this的指向是vm是组件实例对象
5.@click=“xxx” 和@click="xxx($event)"意思是一样的,但是后面的方法可以传参

2.内置指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
/*
指令
v-text： 这个指令用于将元素的 textContent 设置为指定的数据值。它会替代元素原有的内容，只显示指定的文本数据。

v-html： 与 v-text 不同，v-html 将元素的 innerHTML 设置为指定的 HTML 内容。在这种情况下，指定的数据值会被浏览器解析并渲染为 HTML 元素。

v-pre: 跳过编译过程，原始写的样子就呈现什么样子，数据的改变不会影响v-once所在代码的更新了。

v-show： 使用 v-show 可以根据表达式的真假值来切换元素的 display CSS 属性。当表达式为真时，元素会显示；当表达式为假时，元素会隐藏。

v-if、v-else、v-else-if： 这些指令用于条件性地渲染元素。v-if 定义一个条件，如果为真，则渲染元素；否则，不渲染。v-else 和 v-else-if 是在 v-if 块或前一个 v-else-if 块之后使用的，用于定义额外的条件块。

v-for： 使用 v-for 可以基于数组或对象的数据源进行循环渲染。可以使用特殊变量 $index 获取当前项的索引，$key 获取当前项的键（仅适用于对象循环）。

v-on： v-on 用于监听 DOM 事件并在触发时执行对应的方法。可以使用简化语法 @ 来代替 v-on。

v-bind： 使用 v-bind 可以动态地绑定一个或多个特性，或者一个组件 prop 到表达式。可以使用简化语法 : 来代替 v-bind。

v-model： v-model 可以在表单输入元素上创建双向数据绑定。它会根据用户的输入自动更新绑定的数据。




在vue2中v-for比v-if优先级高
在vue3中v-if比v-for优先级高
v-if和v-for不能同时使用
同时使用需要在外层嵌套盒子，在外层进行v-if判断，在内层进行v-for循环
*/
</body>
</html>