持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
Vue 3中的新特性
包含但不限于…
- 对于复杂组件可提升代码的复用性、可读性和可组织性
- 在组件中提供了一个
setup()给我们使用 - 组件中支持多个根元素并排
- 内置
Telpeort组件（告别vue 2.0需要通过第三方组件portal-vue曲线救国的尴尬） - 内置
Suspense组件：可以为加载异步组件提供后备内容 - 支持typescript：现在可以愉快地使用ts来写vue应用了
- 自定义组件中支持多
v-model指令绑定 - 提升响应性
- 更好的性能
<template>
<header>Header</header>
<section>{{ app.title }}</section>
<footer>footer</footer>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
setup() {
const app = reactive({ title: 'Vue 3 Guide' })
// 暴露给模板
return {
app
}
}
}
</script>
准备vscode开发插件
- 本地实时服务：Live Server
- vue 3语法支持插件：Vue Language Features（Volar）
开启Vue 3之旅
该系列教程使用javascript语言开发，后续会推出基于typescript的教程
新建一个demo目录并引入vue 3
vue3-for-beginner
-- index.html
-- app.js
点击Live Server即可开启一个本地服务
开发vue app
先将html body中的内容改为：
<div id="app"></div>
<script src="./app.js"></script>
在app.js中加入
const app = Vue.createApp({
template: '<h1>Hello World!</h1>',
})
app.mount('#app')
vue支持通过template参数去设置挂载在div#app中的内容，我们可以看到效果：
但是，我们更倾向于使用vue的模板语法（使用双花括号的形式）：
<div id="app">
<p>{{ title }} - @{{ author }} - {{ age }}</p>
</div>
title我们通过createApp中的data参数暴露出去：
const app = Vue.createApp({
data() {
return {
title: 'Hello Vue 3',
author: 'lostvita',
age: 18,
}
},
})
app.mount('#app')
注意：我们使用app.mount('#app')将数据挂载到div#app上，在这div之外使用模板语法，vue是无法识别处理的。
处理事件绑定
在dom上使用v-on指令可以绑定事件（如click等），它的值可以是javascript表达式或者函数：
<div id="app">
<p>{{ title }} - @{{ author }} - {{ age }}</p>
<button v-on:click="age++">+ age</button>
<button v-on:click="age--">- age</button>
</div>
简写v-on指令，使用@符号代替：
<button @click="title = 'change title'">更改标题</button>
以上我们通过在模板中使用javascript表达式完成了事件绑定，然而，在vue语法中，它支持methods参数定义一系列函数，像data中暴露数据一样提供给模板调用。
const app = Vue.createApp({
data() {
return {
title: 'Hello Vue 3',
author: 'lostvita',
age: 18,
}
},
methods: {
changeTitle(title = '默认标题内容') {
this.title = title
},
increaseAge() {
this.age++
},
decreaseAge() {
this.age--
},
},
})
app.mount('#app')
<div id="app">
<p>{{ title }} - @{{ author }} - {{ age }}</p>
<button @click="increaseAge">+ age</button>
<button @click="decreaseAge">- age</button>
<button @click="changeTitle('自定义标题内容')">更改标题</button>
</div>
条件渲染
v-if条件渲染
const app = Vue.createApp({
data() {
return {
showTitle: true,
title: 'Hello Vue 3',
author: 'lostvita',
age: 18,
}
},
methods: {
toggleTitle() {
this.showTitle = !this.showTitle
},
},
})
app.mount('#app')
<div id="app">
<p v-if="showTitle">{{ title }} - @{{ author }} - {{ age }}</p>
<p v-else>title被卸载了</p>
<button @click="toggleTitle">Toggle Title</button>
</div>
v-show条件渲染
<div id="app">
<p v-show="showTitle">{{ title }} - @{{ author }} - {{ age }}</p>
<button @click="toggleTitle">Toggle Title</button>
</div>
v-show跟v-if的区别在于，v-if会把对应dom从document树中移除，v-show则不会，它通过设置css属性
display:none;去隐藏dom元素，另外v-else也只跟v-show搭配使用。
如何选择使用v-if还是v-show呢？这里有个基本的判断准则：如果这个dom需要频繁操作隐藏，那么使用v-show；反之不需要频繁操作并且后续不再需要使用该dom元素时，则使用v-if。
