前端：Vue.js特性

Nowl

发布于 2024-01-18 19:39:27

910

发布于 2024-01-18 19:39:27

文章被收录于专栏：NowlNowl_AINowlNowl_AI

虚拟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文件中减少了许多代码

运行代码内容可以正常显示