首先 我们先说一下V3的三种语法

• 第一种，也就是V2 option API的书写风格，他还是支持的，

• 第二种，新增了一种setup函数，所有的变量都在这个里边去定义，通过模板语法去展示，切记的是在setup函授中定义的变量都必须return出去

<template>
  <div>
    {{ name }}
  </div>
</template>

<script>
  export default {
    setup () {
      const name = '小石'
      return {
        name
      }
    }
  }
</script>

• 第三种，从第二种得知，setup函授定义都需要return出去，vue3为了解决这种问题，提出了setup语法糖模式，在script上面添加setup，还可以定义ts语言，不需要return，页面就可以直接渲染，非常nice

<script setup lang="ts">
const name:string = '小石'

</script>

接下来 简单说一下Vue的指令都有哪些

vue首字母V,作为开头，v-xxx，都是vue的指令

• v-text 显示文本，和使用模板语法一样的

<template>
  <div v-text="name">
    
  </div>
</template>

<script setup lang="ts">
const name:string = '我的名字叫小石'

</script>

• v-if v-else 显示和隐藏，判断布尔值是true还是false,隐藏只是把标签给注释了， v-else是与v-if搭配使用的，还可以搭配v-else-if
• v-show 显示和隐藏，标签还在，只是切换css样式，性能是比v-if好
• v-on 比如：v-on：click可以标签添加点击事件，用的少，可以用@简写，事件可以动态的去切换
• v-bind 绑定元素上面的一些属性,可以绑定自定义的数据，style，class都是可以的

<template>
  <div v-bind:name="name">
    
  </div>
</template>

<script setup lang="ts">
const name:string = '小石'

</script>

我们用name定义的可以在dom看见，v-bind简写，:name="name"

• v-html 展示文字，可以解析标签，不支持组件
• .stop 阻止冒泡，在我们点击事件的时候，父类也添加了点击事件，这时候点击会触发冒泡，使用@click.stop即可

<template>
  <div v-html="name">
    
  </div>
</template>

<script setup lang="ts">
const name:string = '<span style="color: red;">我的名字叫小石</span>'

</script>

• v-module 绑定表单元素的，利用这个触发响应式的双向绑定，需注意的是V3还需要借助ref或者reactive做包裹起来的值
• v-once 里面放的值，只会渲染一次，性能优化
• v-for 遍历，类型于循环，有两个参数，一个是值，一个是索引，可以支持嵌套for，搭配key值使用，key属于唯一值