Vue3的简介
Vue 3是于2020年9月发布的最新主要版本的Vue.js框架。它相较于其前身Vue 2有许多显著的改进。
Vue 3最引人注目的变化之一是新的组合API,它提供了一种更灵活和可扩展的方式来组织和重用组件逻辑。使用组合API,您可以在单个组件内封装相关功能,使您更容易理解和维护代码。
Vue 3还引入了一个新的渲染引擎,提供更好的性能和更小的捆绑包大小。新的渲染器使用更有效的模板编译过程,并包括针对现代JavaScript特性(如ES2015模块)的优化。
Vue 3的其他改进包括更好的TypeScript支持,带有代理支持的增强型响应系统,以及对服务器端渲染的改进支持。
Vue 3的目标之一是尽可能保持与Vue 2的兼容性,因此大多数应用程序从Vue 2迁移到Vue 3应该很容易。但是,某些功能和API已被弃用或删除,因此在升级之前必须检查迁移指南。
总体而言,Vue 3在性能、灵活性和可维护性方面相较于Vue 2有了显著的改进,使其成为构建现代Web应用程序的一个引人注目的选择。
vue3基本语法
<template>
<!-- template直系儿子只能有一个 -->
<div>
<h1> hello HelloWorld</h1>
<!-- v-text -->
<p v-text="name"></p>
<!-- v-text的简写 -->
<p>{
{name}}</p>
<p>{
{age}}</p>
<!-- v-html把字段内容标签化 -->
<p v-html="info"></p>
<!-- v-bind:属性名="变量名" 绑定动态标签属性 简写: :属性名="变量名" -->
<p v-bind:data1="dataVal">{
{dataVal}}</p>
<!-- class 类名绑定 可以叠加使用 -->
<p calss="text" :class="{'red':isRed}">我是红色的</p>
<!-- 判断语句 v-if false的时候是元素为渲染在页面上 -->
<!-- v-show :false的时候 是样式的隐藏 -->
<p v-if="isTrue">我是if的存在</p>
<p v-show="isTrue">我是show的存在</p>
<!-- if-else语句 -->
<p v-if="!isFalse">我是if的存在</p>
<p v-else>else</p>
<!-- for循环语句 v-for="(每个对象的变量,下标) in 数组" -->
<ul>
<li v-for="(i,inedx) in stuList" :key="inedx">
学生姓名:{
{i.name}}
年龄:{
{i.age}}
</li>
</ul>
</div>
</template>
<script>
// @ is an alias to /src
import { reactive, toRefs } from "vue";
export default {
name: 'home',
setup() {
const data1 = '';
const data = reactive({
name: '小明',
age: 22,
info: "<i>我是斜字体<i>",
dataVal: 2,
isRed: true,
isTrue: false,
isFalse: true,
stuList: [
{
name: '小明',
age: 22,
},
{
name: '小张',
age: 23,
},
{
name: '小红',
age: 19,
},
{
name: '小智',
age: 25,
}
]
})
return {
...toRefs(data, data1),
}
},
}
</script>
<style>
.red {
color: red;
}
</style>