vue点击弹窗外关闭弹窗？如何使用侦听器实现

Vue3基础-模板语法

1、在 Vue 3 中，修饰符是与指令结合使用的特殊标记，用于修改指令的行为。常见的修饰符包括.lazy、.number、.trim、.stop、.prevent、.capture、.lf、.once、.passive 和 .exact，它们能帮助开发者更精确地控制指令的。

2、v-bind有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为更简洁。注意：Vue2 template模板中只能有一个根元素，Vue3 template模板中允许有多个根元素。在开发中，有时候我们的元素class也是动态的，比如：当数据为某个状态时，字体显示红色，当数据另一个状态时，字体显示黑色。

3、v-for 书写格式：v-for=content，content是一个遍历表达式。有下面两种遍历形式，items是一个数组。在Vue3中，v-if的优先级高于v-for，导致v-if访问不了v-for中的变量，因此绝对不要把v-if和v-for同时用在同一个元素上。下面是一些简单指令：v-text 作用：用于向标签对中添加文本。

4、Vue3模板使用方法详解Vue3的模板语法是其核心，通过声明式方式将数据绑定到DOM，结合其响应，智能地更新视图。以下是三种常见的使用方式：文本插值：使用双大括号{{...}}是最常见的数据绑定形式，如早期模板字符串写法和HTML5标准后的template元素。

5、data 属性需要传入一个函数，返回一个对象。在 vue3 中，必须使用函数，否则会报错。此函数内的对象属性可以被模板中的方法直接访问。methods 是一个对象，通常定义方法供模板调用。在某个方法中，可以使用 this 关键字访问 data 对象属性。