Vue3学习（第2天）

一.类与样式绑定

1.绑定对象

v-bind：class可以缩写为：class，它的作用是动态传输样式，我们可以传递一个对象来动态的切换class

<div :class="{active:isActive}"></div>

<script setup>
import {active} from 'vue'
const isActive=ref(true)
</script>

2.绑定数组

当需要多个元素的时候，可以绑定数组，具体操作如下

const classOne = ref('classOne')
const classTow = ref('classTow')

<div :class='[classOne,classTow]'></div>

二.条件渲染

v-if指令可以选择性的渲染一块区域的内容,可以搭配v-else使用，当v-if的值=fales的时候，就会显示

const awesome= ref('isShow')
<h1 v-if="awesome">if显示出来了哦！</h1>
<h1 v-else>我是elseif的内容</h1>

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

三.v-for循环渲染

1.与Vue2差异不大，v-for循环内部可以访问外部变量

2.v-for和v-if同时使用时会抛出警告，原因时v-for定义的值没有在改实例定义，解决办法是将v-for放在<template> 中

<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

四，监听事件

1.v-on指令，简写为@来监听Dom事件，并且在触发时执行对应的JS，例如点击事件可以是。@cliak='submin',或者是v-：click='submin'

事件处理器的值可以是：

        内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

        方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

2.监听事件v-on还可以接收方法名，或者对某个方法进行调用

<script setup>
import { ref } from 'vue'

const name = ref('Vue.js')

function greet(event) {
  alert(event)
}
</script>

<template>
	<button @click="greet('Hell！阿英')">Greet</button>
</template>

3.事件修饰符

事件修饰符在事件后加一个 . 表示指令后缀，包含以下这些

• .stop ：单击事件将停止传递
• .prevent ：提交事件将不再重新加载页面
• .self ：阻止冒泡
• .capture ：只有点击当前元素时候，才会触发事件处理函数
• .once ：只能点击一次
• .passive ：滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成