Vue3基础——数据双向绑定、常用指令、计算属性、watch监听数据变化、class类名&style样式多种操作方式

本文链接：https://blog.csdn.net/weixin_45732235/article/details/127858122

文章目录

Vue3文档 https://cn.vuejs.org/guide/introduction.html

(自我复习笔记不适合0基础人查看）

p2 通过script引入的方式实现vue3应用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue3.js"></script>
  </head>
  <body>
    <div id="counter">
      <h1>counter: {
  { num }}</h1>
    </div>

    <script>
      const Counter = {
     
        data() {
     
          return {
     
            num: 0,
          };
        },
      };

      //   创建一个应用，将配置的对象Counter的内容，渲染到选择器是#counter的元素上
      Vue.createApp(Counter).mount("#counter");
    </script>
  </body>
</html>

在这里插入图片描述

p3 最新vite构建工具创建vue项目

npm init vite-app vue3demo02

p4 Vue声明式语法与数据双向绑定

声明式语法

<template>
  <h1>{
  { msg }}</h1>
</template>

<script>
// 命令式
// document.querySelector("h1").innerHTML = "hello";

// 声明式
export default {
     
  name: "App",
  data() {
     
    return {
     
      msg: "helloworld",
    };
  },
};
</script>

数据双向绑定

<template>
  <h1>{
  { msg }}</h1>
  <input type="text" v-model="msg" />
</template>

<script>

Vue3基础——数据双向绑定、常用指令、计算属性、watch监听数据变化、class类名&style样式多种操作方式

文章目录

p2 通过script引入的方式 实现vue3应用

p3 最新vite构建工具创建vue项目

p4 Vue声明式语法与数据双向绑定

声明式语法

数据双向绑定

p2 通过script引入的方式实现vue3应用