vue3.0基本语法,在html中引入vue3.0

最新推荐文章于 2025-04-16 12:17:14 发布

初梦依旧

最新推荐文章于 2025-04-16 12:17:14 发布

阅读量558

点赞数 2

文章标签： html vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_44149644/article/details/140102990

版权

首先官网得找半天,排名不是第一个,所以小心点到广告

https://cn.vuejs.org/

认准官网
举一个例子,可以直接使用html体验一下vue3.0

<!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>vue3.0初体验</title>
</head>

<body>
  <!-- //写一个点击按钮就增加1或者是减少1的按钮 -->
  <div id="app" class="container">
    <div>{{count}}</div>
    <span>查看数据</span>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
  <!-- 来自官网 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script setup>
    const app = Vue.createApp({
      data() {
        return {
        
          count: Vue.ref(0)
        }
      },
      methods: {
        increment() {
          this.count += 1;
        },
        decrement() {
          this.count -= 1;
        },
      }
    });
    app.mount("#app");
  </script>
</body>
</html>

重点的问题:

<script setup>

1.setup是什么意思可以不写吗?

<script setup> 标签是Vue 3中引入的一种新的编写单文件组件的方式，它用于简化并提高脚本部分的组织和管理。相比于传统的 <script> 标签下直接编写方法和数据，setup 函数提供了一个更模块化、更易读的方式来定义组件的局部状态（通过 ref、reactive 等响应式API）、计算属性以及事件处理等。

好处：

声明式编程：setup 函数让你能够更容易地理解组件的工作原理，因为变量和依赖都在可见的地方。
分块代码：可以把相关的状态和行为放在一起，提高代码可维护性。
懒加载：对于大型项目，setup 可以延迟一些初始化操作直到组件被真正挂载。
是否必要：虽然不是强制性的，但推荐使用<script setup>，因为它提供了更好的编程体验和性能优化，并且与Vue 3的现代架构更加契合。如果非常小的组件或对性能优化没有特别需求，也可以选择不使用，但那样可能会失去这些优势。

2.ref(0)什么意思可以不写吗?
要用 ref：在Vue中，ref 是为了更好地管理状态，尤其是对于那些需要手动控制或响应性变化的数据。
如果不使用 ref，直接在模板上使用表达式 ({{ … }})，虽然可以直接读取和修改值，但Vue无法跟踪其变化，因此不是响应式的。而使用 ref 就可以让Vue对数据的变化做出适当的更新和渲染。
所以，ref 提供了一种更安全、易于维护的状态管理方法。