千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

1. 插值表达式：在Vue 3中，插值表达式的语法没有改变。我们仍然可以使用双大括号({{}})来将表达式绑定到HTML模板中的元素中。例如：<p>{{ message }}</p>。插值表达式会将数据动态地渲染到对应的元素中。
2. 指令：Vue 3引入了新的指令v-bind和v-on的简写形式。v-bind可以简写为:，用于属性绑定。例如：<img :src="imageUrl" />。
3. v-on可以简写为@，用于事件绑定。例如：<button @click="handleClick">点击</button>。
4. 条件渲染：Vue 3中的条件渲染依然使用v-if和v-else指令。例如：

<div v-if="isShow">
  <!-- 条件为真时显示的内容 -->
</div>
<div v-else>
  <!-- 条件为假时显示的内容 -->
</div>

Vue 3还引入了新的v-if/v-else的兄弟指令v-if/v-else-if/v-else的写法。例如：

<div v-if="condition1">
  <!-- 条件1为真时显示的内容 -->
</div>
<div v-else-if="condition2">
  <!-- 条件2为真时显示的内容 -->
</div>
<div v-else>
  <!-- 所有条件都为假时显示的内容 -->
</div>

1. 列表渲染：Vue 3中仍然使用v-for指令来进行列表渲染。例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

可以通过:key属性来绑定每个列表项的唯一标识，以提高渲染性能。

1. 组件和Prop：在Vue 3中，使用组件时，可以通过v-bind或:指令将数据传递给子组件的Prop。例如：

<app-component :message="message"></app-component>

其中，message是父组件中的数据，可以通过在子组件中定义相应的Prop进行接收和使用。