vue3框架的10个入门演示代码并且加上注释以及语言显示

Hello World

代码：

<template>
  <div> {{ message }} </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!",
      };
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div> {{ message }} </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        message: "Hello World!", // 数据
      };
    },
  };
</script>

语言：Vue.js

计数器

代码：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      increment() {
        this.count++;
      },
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button> <!-- 绑定点击事件 -->
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        count: 0, // 数据
      };
    },
    methods: {
      increment() { // 方法
        this.count++; // 数据更新
      },
    },
  };
</script>

语言：Vue.js

条件渲染

代码：

<template>
  <div>
    <p v-if="show">显示内容</p>
    <button @click="toggleShow">切换显示</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
      };
    },
    methods: {
      toggleShow() {
        this.show = !this.show;
      },
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <p v-if="show">显示内容</p> <!-- 条件渲染 -->
    <button @click="toggleShow">切换显示</button> <!-- 绑定点击事件 -->
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        show: true, // 数据
      };
    },
    methods: {
      toggleShow() { // 方法
        this.show = !this.show; // 数据更新
      },
    },
  };
</script>

语言：Vue.js

列表渲染

代码：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ["item1", "item2", "item3"],
      };
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li> <!-- 列表渲染 -->
    </ul>
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        list: ["item1", "item2", "item3"], // 数据
      };
    },
  };
</script>

语言：Vue.js

组件

代码：

<template>
  <div>
    <hello-world message="Hello World!"></hello-world>
  </div>
</template>

<script>
  import HelloWorld from "./HelloWorld.vue";

  export default {
    components: {
      HelloWorld,
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <hello-world message="Hello World!"></hello-world> <!-- 使用组件 -->
  </div>
</template>

<!--逻辑-->
<script>
  // 引入组件
  import HelloWorld from "./HelloWorld.vue";

  export default {
    components: {
      HelloWorld, // 注册组件
    },
  };
</script>

语言：Vue.js

生命周期

代码：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!",
      };
    },
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdate");
    },
    updated() {
      console.log("updated");
    },
    beforeUnmount() {
      console.log("beforeUnmount");
    },
    unmounted() {
      console.log("unmounted");
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        message: "Hello World!", // 数据
      };
    },
    // 生命周期钩子
    beforeCreate() {
      console.log("beforeCreate");
    },
    created() {
      console.log("created");
    },
    beforeMount() {
      console.log("beforeMount");
    },
    mounted() {
      console.log("mounted");
    },
    beforeUpdate() {
      console.log("beforeUpdate");
    },
    updated() {
      console.log("updated");
    },
    beforeUnmount() {
      console.log("beforeUnmount");
    },
    unmounted() {
      console.log("unmounted");
    },
  };
</script>

语言：Vue.js

计算属性

代码：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!",
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split("").reverse().join("");
      },
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        message: "Hello World!", // 数据
      };
    },
    computed: {
      reversedMessage() { // 计算属性
        return this.message.split("").reverse().join(""); // 计算逻辑
      },
    },
  };
</script>

语言：Vue.js

监听器

代码：

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!",
      };
    },
    watch: {
      message(newValue, oldValue) {
        console.log(`newValue: ${newValue}, oldValue: ${oldValue}`);
      },
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="message" /> <!-- 双向绑定 -->
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        message: "Hello World!", // 数据
      };
    },
    watch: {
      message(newValue, oldValue) { // 监听器
        console.log(`newValue: ${newValue}, oldValue: ${oldValue}`); // 监听逻辑
      },
    },
  };
</script>

语言：Vue.js

插槽

代码：

<template>
  <div>
    <slot name="header"></slot>
    <p>{{ message }}</p>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: "Hello World!",
      };
    },
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <slot name="header"></slot> <!-- 具名插槽 -->
    <p>{{ message }}</p>
    <slot></slot> <!-- 默认插槽 -->
  </div>
</template>

<!--逻辑-->
<script>
  export default {
    data() {
      return {
        message: "Hello World!", // 数据
      };
    },
  };
</script>

语言：Vue.js

路由

代码：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  import { createRouter, createWebHistory } from "vue-router";
  import Home from "./Home.vue";
  import About from "./About.vue";

  const router = createRouter({
    history: createWebHistory(),
    routes: [
      {
        path: "/",
        component: Home,
      },
      {
        path: "/about",
        component: About,
      },
    ],
  });

  export default {
    router,
  };
</script>

注释：

<!--模板-->
<template>
  <div>
    <router-link to="/">Home</router-link> <!-- 路由链接 -->
    <router-link to="/about">About</router-link>
    <router-view></router-view> <!-- 路由视图 -->
  </div>
</template>

<!--逻辑-->
<script>
  import { createRouter, createWebHistory } from "vue-router"; // 引入路由相关模块
  import Home from "./Home.vue"; // 引入组件
  import About from "./About.vue";

  // 创建路由实例
  const router = createRouter({
    history: createWebHistory(),
    routes: [
      {
        path: "/",
        component: Home,
      },
      {
        path: "/about",
        component: About,
      },
    ],
  });

  export default {
    router, // 注册路由实例
  };
</script>

语言：Vue.js