vue3中.vue基本写法

1.script标签内写法

<script>
// reactive 接收一个普通对象然后返回该普通对象的响应式代理，等同于2.x的Vue.observable
// toRefs将响应式对象转为普通对象
import { reactive, toRefs } from "vue";
export default {
  name: "home",
  components: {},
  setup() {
    // 相当于created 和 beforeCreated 两个生命周期
    const data = reactive({
      name: "小红",
      age: 20,
      info: "<i>我是斜体字</i>",
      href: "www.baidu.com",
      isRed: false,
      show: false,
      userList: [
        {
          username: "小红",
          userage: 10,
        },
        {
          username: "小白",
          userage: 10,
        },
        {
          username: "小蓝",
          userage: 10,
        },
        {
          username: "小绿",
          userage: 10,
        },
        {
          username: "小紫",
          userage: 10,
        },
      ],
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>

2.模板结构，vue3不需要在外层加上大盒子

<template>
    <div>Home</div>
    <h1>{{ name }}</h1>
    <div v-text="age"></div>
    <!-- v-text 仅当成简单的文本标签 -->
    <div v-text="info"></div>
    <!-- v-html 当成html元素进行解析 -->
    <div v-html="info"></div>
    <!-- v-bind 单向绑定，绑定动态的标签属性 -->
    <p>我有一个动态的属性</p>
    <!-- class类名绑定 {'类名':属性真值}-->
    <p :class="{ red: !isRed }">我是红色字体</p>
    <!-- v-if元素从DOM上移除、v-show元素的显示与隐藏
         v-else v-else-if -->
    <p v-if="show">show:true</p>
    <p v-else>show:false</p>
    <!-- v-for 列表渲染 key性能问题-->
    <ul>
      <li v-for="(item, index) in userList" :key="index">
        {{ index }}-{{ item }}
      </li>
    </ul>
</template>