vue3教程
预备知识:HTML、CSS、JavaScript
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
基础
安装cnpm:npm install cnpm -g
安装vue-cli:cnpm install -g @vue/cli
MAC报错:npm install –ignore-scripts
![](https://wudiguang.top/images/hexo/vue/vue3-catalogue.png)
开始
简介
1 2 3 4 5
| <div id="app"> <button @click="count++"> Count is: {{ count }} </button> </div>
|
1 2 3 4 5 6 7 8 9
| import { createApp } from 'vue'
createApp({ data() { return { count: 0 } } }).mount('#app')
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
|
<script> export default { data() { return { count: 0 } } } </script>
<template> <button @click="count++">Count is: {{ count }}</button> </template>
<style scoped> button { font-weight: bold; } </style>
|
上面示例展示了Vue的两个核心功能:
- 声明式渲染:Vue基于标准HTML拓展了一套模版语法,使得我们可以声明式地描述最终输出的HTML和JavaScript状态之间的关系
- 响应性:Vue会自动跟踪JavaScript状态并在其变化时响应地更新DOM
快速上手
1 2 3 4 5 6
| npm init vue@latest > cd <your-project-name> > npm install > npm run dev # 发布到生产环境 > npm run build
|
创建应用
1 2 3
| <div id="app"> <button @click="count++">{{ count }}</button> </div>
|
1 2 3 4 5 6 7 8 9 10 11
| import { createApp } from 'vue'
const app = createApp({ data() { return { count: 0 } } })
app.mount('#app')
|
配置全局
1 2 3 4 5
| app.config.errorHandler = (err) => { /* 处理错误 */ } <!-- 组件注册 --> app.component('TodoDeleteButton', TodoDeleteButton)
|
模版语法
1 2 3 4 5 6 7 8 9 10 11 12 13
| <span>Message: {{ msg }}</span>
<p>Using text interpolation: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p>
<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div>
<button :disabled="isButtonDisabled">Button</button>
|
1 2 3 4 5 6 7 8 9
| <div v-bind="objectOfAttrs"></div> data() { return { objectOfAttrs: { id: 'container', class: 'wrapper' } } }
|
使用JavaScript表达式
1 2 3 4 5 6 7
| {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
|
指令
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <p v-if="seen">Now you see me</p>
<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<a v-bind:[attributeName]="url"> ... </a>
<a :[attributeName]="url"> ... </a>
|
完整指令语法
![](https://wudiguang.top/images/hexo/vue/complete_instruction.png)
响应式基础
声明方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { this.increment() } }
|
计算属性
使用计算属性来描述依赖响应式状态的复杂逻辑
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: { publishedBooksMessage() { return this.author.books.length > 0 ? 'Yes' : 'No' } } }
|
1 2
| <p>Has published books:</p> <span>{{ publishedBooksMessage }}</span>
|
类与样式绑定
条件渲染
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| <h1 v-if="awesome">Vue is awesome!</h1>
<button @click="awesome = !awesome">Toggle</button>
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
|
列表渲染
事件处理
表单输入绑定
生命周期
侦听器
模板引用
组件基础
深入组件
注册
Props
事件
组件 v-model
遗传 Attributes
插槽
依赖注入
异步组件
逻辑复用
组合式函数
自定义指令
插件
内置组件
Transition
TransitionGroup
KeepAlive
Teleport
Suspense
应用规模化
单文件组件
工具链
路由
状态管理
测试
最佳实践
生产部署
性能优化
无障碍访问
安全