Vue3的语法相对比Vue2有不少改变，这篇讲一下基础语法在Vue3里的形式。

创建Vue对象

        在脚手架项目中，index.html等资源不再编写代码，只作为一个容器。所有的页面代码都在.vue相关文件中进行编写，由main.js引入各个.vue文件渲染出页面，再注入给index.html等容器。        

        在这里我们演示一下单个index.html中创建vue对象：

        

v-model（双向数据绑定）

功能：在表单元素和组件上实现双向数据绑定，自动同步数据与视图。

基础用法

<template>
  <!-- 文本输入框 -->
  <input v-model="text" />
  <p>输入内容：{{ text }}</p>

  <!-- 复选框 -->
  <input type="checkbox" v-model="checked" />
  <p>选中状态：{{ checked }}</p>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('');
const checked = ref(false);
</script>

         import可以换成下面的形式：

<script setup>
const text = Vue.ref('');//直接改用Vue.Xxxx 的方式
const checked = ref(false);
</script>

 修饰符

.lazy：改为监听 change 事件（输入完成时触发）

.number：自动将输入转为数字类型

.trim：自动去除首尾空格

v-bind（属性绑定）

功能：动态绑定 HTML 属性或组件 props，实现单向数据流。

<template>
  <!-- 绑定属性 -->
  <img :src="imageUrl" :alt="altText" />

  <!-- 动态属性名 -->
  <div :[dynamicAttr]="value"></div>

  <!-- 绑定对象 -->
  <button v-bind="buttonProps">按钮</button>
</template>

<script setup>
import { ref } from 'vue';
const imageUrl = ref('logo.png');
const altText = ref('网站标志');
const dynamicAttr = ref('data-id');
const buttonProps = ref({
  id: 'submit-btn',
  class: 'primary',
  disabled: false
});
</script>

v-on（事件监听）

功能：监听 DOM 事件或自定义事件。

<template>
  <!-- 基础用法 -->
  <button @click="count++">点击次数：{{ count }}</button>

  <!-- 方法处理 -->
  <button @click="handleClick('参数', $event)">带参事件</button>

  <!-- 事件修饰符 -->
  <form @submit.prevent="onSubmit">
    <input @keyup.enter="submit" />
  </form>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
const handleClick = (msg, event) => {
  console.log(msg, event);
};
</script>

修饰符：

.stop - 阻止冒泡

.prevent - 阻止默认行为

.once - 只触发一次

.self - 仅当事件源是元素本身时触发

条件渲染

v-if / v-else

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">合格</div>
<div v-else>不及格</div>
v-show
vue
<div v-show="isVisible">通过 display 控制显示</div>

区别：

v-if：条件为假时移除 DOM 元素

v-show：始终保留 DOM，通过 CSS 控制显示

列表渲染 (v-for)

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
const items = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' }
]);
</script>