01-Vue3基础入门

Vue 3 基础入门

1. 什么是 Vue

Vue 是一款用于构建用户界面的渐进式 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，提供了一套声明式的、组件化的编程模型。

核心特点

• 声明式渲染：通过模板语法，将数据声明式地渲染到 DOM
• 组件化：将 UI 拆分成独立、可复用的组件
• 响应式系统：数据变化时视图自动更新
• 渐进式框架：可按需引入功能

2. 环境搭建

使用 Vite 创建项目（推荐）

# npm
npm create vue@latest
pnpm
pnpm create vue@latest

项目结构

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

3. 创建第一个应用

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue 3!')

</script>
<template>

<h1>{{ message }}</h1>

</template>

4. 模板语法

文本插值

<span>Message: {{ msg }}</span>

属性绑定

<!-- 完整语法 -->
<a v-bind:href="url">Link</a>
<!-- 缩写 -->

<a :href="url">Link</a>
<!-- 动态参数 -->

<a :[attributeName]="url">Link</a>

事件绑定

<!-- 完整语法 -->
<button v-on:click="handleClick">Click</button>
<!-- 缩写 -->

<button @click="handleClick">Click</button>

5. 响应式基础

ref() - 基本类型

import { ref } from 'vue'
const count = ref(0)

console.log(count.value) // 0
count.value++

console.log(count.value) // 1

reactive() - 对象类型

import { reactive } from 'vue'
const state = reactive({

count: 0,

name: 'Vue'

})
state.count++ // 直接访问，无需 .value

6. 计算属性

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('张')

const lastName = ref('三')
const fullName = computed(() => {

return firstName.value + lastName.value

})

</script>

7. 条件渲染

<template>
  <h1 v-if="type === 'A'">优秀</h1>
  <h1 v-else-if="type === 'B'">良好</h1>
  <h1 v-else>继续努力</h1>
<!-- v-show 仅切换 CSS display -->

<p v-show="isVisible">这段文字可以显示隐藏</p>

</template>

8. 列表渲染

<script setup>
import { ref } from 'vue'
const items = ref([

{ id: 1, name: '学习 Vue' },

{ id: 2, name: '学习 React' },

{ id: 3, name: '学习 Angular' }

])

</script>
<template>

<ul>

<li v-for="item in items" :key="item.id">

{{ item.name }}

</li>

</ul>

</template>

9. 事件处理

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment(event) {

count.value++

console.log('点击事件:', event)

}

</script>
<template>

<button @click="increment">

点击次数: {{ count }}

</button>
<!-- 事件修饰符 -->

<form @submit.prevent="onSubmit">...</form>

<button @click.stop="doThat">阻止冒泡</button>

<button @click.once="doOnce">只触发一次</button>

</template>

10. 表单输入绑定

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

const checked = ref(false)

const selected = ref('')

const textarea = ref('')

</script>
<template>

<!-- 文本输入 -->

<input v-model="text" placeholder="请输入" />

<p>输入内容: {{ text }}</p>
<!-- 复选框 -->

<input type="checkbox" v-model="checked" />

<p>是否选中: {{ checked }}</p>
<!-- 下拉选择 -->

<select v-model="selected">

<option disabled value="">请选择</option>

<option>Vue</option>

<option>React</option>

<option>Angular</option>

</select>
<!-- 多行文本 -->

<textarea v-model="textarea" rows="5"></textarea>

</template>

小结

本章介绍了 Vue 3 的基础知识，包括环境搭建、模板语法、响应式数据、计算属性、条件渲染、列表渲染、事件处理和表单绑定。掌握这些基础概念后，就可以开始构建简单的 Vue 应用了。