vue3 的基本语法

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>