课程进度 88% · 第18/20章第18/20章 · 标签 1/2
— 1 —
Vue简介
Vue是一款渐进式JavaScript框架，核心思想是响应式、声明式渲染和组件化开发。
- 响应式：数据变化自动驱动视图更新。
- 声明式渲染：用模板语法描述UI。
- 组件化开发：UI拆分为可复用组件。
html
1
<!-- 最简单的Vue组件 -->
2
<script setup>
3
const msg = 'Hello, Vue!'
4
</script>
5
<template>
6
<h1>{{ msg }}</h1>
7
</template>
模板语法与指令
html
1
<!-- 插值语法 -->
2
<span>{{ msg }}</span>
3
<!-- v-if 条件渲染 -->
4
<p v-if="ok">显示</p>
5
<!-- v-for 列表渲染 -->
6
<li v-for="item in list" :key="item">{{ item }}</li>
7
<!-- v-bind 绑定属性 -->
8
<img :src="imgUrl" />
9
<!-- v-on 绑定事件 -->
10
<button @click="onClick">点我</button>
— 2 —
组件开发与通信
props与事件：
html
1
<!-- 父传子：props -->
2
<!-- Parent.vue -->
3
<Child :msg="msg" />
4
<!-- 子组件接收 -->
5
<script setup>
6
defineProps(['msg'])
7
</script>
8
<!-- 子传父：事件 -->
9
<!-- Child.vue -->
10
<button @click="$emit('change', val)">通知父组件</button>
插槽与依赖注入：
html
1
<!-- 插槽slot -->
2
<template>
3
<slot>默认内容</slot>
4
</template>
5
<!-- provide/inject 跨层通信 -->
6
<script setup>
7
import { provide, inject } from 'vue'
8
provide('color', 'red')
9
const color = inject('color')
10
</script>
Vue模板指令组件props