虚拟DOM
DOM是html的文档对象，那么什么是虚拟DOM呢？
虚拟DOM就是Vue支持的在js中写数据，然后传递给html，看个例子
<script setup> import { ref } from 'vue'; const blog = ref({ title: "Vue教程", content: "虚拟DOM" }); </script> <template> <div> {{ blog.title }} {{ blog.content }} </div> </template> <style scoped> </style>
运行项目可以看见：
我们在script代码中定义数据，然后在template代码中用{{ }}来绑定数据，这就是虚拟DOM的实现了，它可以减少我们的代码量，前端往往有很多相同的块，使用传统前端时我们需要一个个去写，而使用虚拟DOM我们就只需要写一遍，然后绑定就行
模块
Vue还有一种减少代码的方式，就是定义模块，创建如下两个文件：
App.vue文件
<script setup> import { ref } from 'vue'; //导入模板 import BlogPost from "./components/BlogPost.vue"; const blog = ref({ title: "Vue教程", content: "Vue模板" }); </script> <template> //绑定数据 <BlogPost v-bind="blog"> </BlogPost> </template> <style scoped> </style>
BlogBost.vue文件
<template> <div> <h1> <a>{{ title }}</a> </h1> <article> <div > {{ content }} </div> </article> </div> </template> <script setup> defineProps(["title", "content"]); </script>
上面代码中，BlogPost.vue文件就是我们定义的模板，然后在App.vue中引用模板，可以看见，App.vue文件中减少了许多代码
运行代码内容可以正常显示
持续更新...
