前端学习日记Vue3---Day1

最新推荐文章于 2024-10-15 15:24:52 发布

Jesse_Kyrie

最新推荐文章于 2024-10-15 15:24:52 发布

阅读量487

点赞数 3

分类专栏： vue3学习日记文章标签：前端学习

本文链接：https://blog.csdn.net/Jesse_Kyrie/article/details/139419202

版权

vue3学习日记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

声明式渲染

使用简洁的模板语法，将数据与 DOM（文档对象模型）关联起来。通过这种方式，可以实现数据驱动的界面更新，简化开发流程。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明式渲染</title>
    <!-- 引入 Vue 3 CDN -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--代码段1-->
    <div id="counter">
      Counter: {{ counter }}
    </div>

    <script>
        <!--代码段2-->
        const CounterApp = {
          data() {
            return {
              counter: 0
            }
          },
          //   代码段3
          mounted() {
            setInterval(() => {
              this.counter++
            }, 1000)
          }
        }
        Vue.createApp(CounterApp).mount('#counter')
    </script>
</body>
</html>

HTML 模板包含一个 div 元素，里面使用了双大括号语法 {{ counter }}，这是 Vue.js 的模板语法，用于显示 counter 数据属性的值。
定义了一个 Vue 组件 Counter。组件的 data 函数返回一个对象，其中包含一个 counter 属性，初始值为 0。然后，通过 Vue.createApp 创建一个 Vue 应用实例，并将其挂载到 id 为 counter 的 DOM 元素上。数据和 DOM 已经被建立了关联，所有东西都是响应式的。这意味着当 counter 的值发生变化时，DOM 会自动更新，以反映最新的值。
我们增加了一个 mounted 生命周期钩子函数。mounted 是 Vue 组件生命周期的一部分，它在组件被挂载到 DOM 后立即执行。在 mounted 函数中，我们使用 setInterval 函数每秒调用一次回调函数，在回调函数中递增 counter 的值。

<div id="bind-attribute">: 定义一个 div 容器，id 为 bind-attribute。
<span v-bind:title="message">: 使用 v-bind 指令将 span 元素的 title 属性绑定到 Vue 实例的数据属性 message 上。
v-bind:title: 绑定 HTML 属性 title。
"message": 绑定到 Vue 实例的 message 数据属性。

在页面加载时，Vue.js 将会创建一个新的 Vue 应用实例，并将 AttributeBinding 组件的数据绑定到 DOM 元素上。具体来说，message 数据属性的值 ‘这是动态绑定的提示信息’ 会被绑定到 span 元素的 title 属性上。当你将鼠标悬停在 span 元素上时，会显示动态绑定的提示信息。这展示了 Vue.js 的声明式渲染和响应式数据绑定特性。