组合Api的核心思想是直接在函数作用域中定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。（风格：自由！！！！）
vue3.0它在script 上增加了一个setup ，然后可以直接在script setup 里引用和声明变量，在template上依然是双向绑定。 回顾其他
split('')把一个字符串分割成字符串数组
reverse()颠倒数组中元素的顺序
join('')把数组中的所有元素放在一个字符串
message.split('').reverse().join('')意思是把字符串翻转重组成字符串
ly→yl
@click="message += 'ly'"在点击时间上加ly这个字符串
其他
@click.prevent阻止事件的默认行为（在a标签跳转到其他页面阻止它跳转）
@click.top阻止冒泡事件（在一个盒子里有A盒子B盒子C盒子，c盒子里面有一个按钮事件，按钮事件为了不触发父盒子的点击事件，就用阻止冒泡来解决，按钮就点击成功了，其他父盒子就不会触发。）
@click.native组件点击事件（在页面上引入组件然后用组件的时候在这个组件上面给他进行点击，那么久用native）
<template>
//v-bind:title
<div :title="message">你好呀追风者 </div>
//class绑定还特别支持了对象和数组
<div :class="{red:isRed}" @click="toggleRed">你好呀皮卡丘</div>
//样式绑定也支持对象和数组
<div :style="{ color }" @click="toggleColor">你好小蜜蜂</div>
</template>
<script setup>
import { ref } from 'vue'
const message = ref('Hello World!')
const isRed = ref(true)
const color = ref('green')
function toggleRed() {
isRed.value = !isRed.value
}
function toggleColor() {
color.value = color.value === 'green' ? 'blue' : 'pink'
}
</script>
<style>
.red {
color: red;
}
</style>
判断条件
<script setup>
import { ref } from 'vue'
const show = ref(true)
const list = ref([1, 2, 3])
</script>
<template>
<button @click="show = !show">切换</button>
<button @click="list.push(list.length + 1)">增加数字</button>
<button @click="list.pop()">减少数字</button>
<button @click="list.reverse()">顺序倒序</button>
<ul v-if="show && list.length">
<li v-for="item of list">{{ item }}</li>
</ul>
<p v-else-if="list.length">List is not empty, but hidden.</p>
<p v-else>List is empty.</p>
</template>
indexOf () 可发挥某个指定的字符串值在字符串中首次出现的位置
（新增，存在浏览器兼容的问题）语法：arrayObject.indexOf(searchvalue, startIndex)
从数组的开头（位置0）开始往后查找
参数：searchvalue必须要查找的项，startIndex可选七点位置的索引。
返回number,查找的项在数组中的位置没有找到的情况下会返回-1
lastIndexOf从后往前找
（新增，存在浏览器兼容的问题）
slice() 从已有的数组中返回选定的元素 提取字符串的某个部分，并以新的字符串返回被提取的部分
