实例演示vue中常用的术语与使用方式

实例演示vue中常用的术语与使用方式

<script>
      // 2. 应用实例
      const app = Vue.createApp({
        // 根组件配置项
        data: function () {
          return {
            // 将组件中要用到的数据全部声明在这个返回的对象中
            username: "咪咪",
          };
        },
      });
      //   3.根组件实例: 应用实例与挂载点进行绑定
      const vm = app.mount("#app");
      // 4. 数据注入: 声明的数据会自动注入到当前应用实例中
      console.log(vm.$data.username);
      console.log(vm.username);
      const obj = {
        $data: {
          email: "498668472@qq.com",
        },
        get email() {
          return this.$data.email;
        },
        set email(email) {},
      };
      console.log(obj.$data.email);
      console.log(obj.email);
      // 5. 响应式
      vm.username = "小咪咪";
      // 1. 我没有进行dom操作,选择元素,更新内容
      // 2. 我没有进行事件绑定,这些都是vue在背后默默完成
    </script>