Javaweb学习之Vue数据绑定（五）

认识数据绑定

Vue.js 中的数据绑定是一个核心概念，它极大地简化了前端开发中数据与视图（DOM）之间的同步问题。Vue.js 通过其响应式系统实现了数据的双向绑定（在 Vue 2.x 中主要是单向数据流结合视图层的双向绑定，而在 Vue 3.x 中通过 Composition API 提供了更灵活的响应式系统），这意味着当数据变化时，视图会自动更新以反映这些变化，反之亦然（在表单输入等场景下）。

1.单向绑定

单向绑定（One-Way Binding）指的是数据从模型（Vue 实例的数据）流向视图（DOM）（DOM是什么？），而视图的变化不会影响数据。它是一种将数据从 Vue 实例传递到视图的方式。

1.1. 插值（Interpolation）

基本用法：使用 {{ }} 符号将 Vue 实例中的数据绑定到视图中。

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

这里 message 的值会被插入到 <p> 标签中。

1.2. 指令绑定

v-bind 指令：用于将数据绑定到 HTML 属性上。

<div id="app">
  <a v-bind:href="url">Go to Vue</a>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      url: 'https://vuejs.org'
    }
  });
</script>

这里 url 的值将被绑定到 <a> 标签的 href 属性上。

简写：v-bind 可以简写为 :
```
<a :href="url">Go to Vue</a>
```

1.3. `v-bind` 的对象语法

你可以同时绑定多个属性：

<div id="app">
  <img v-bind="imgAttributes">
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      imgAttributes: {
        src: 'image.jpg',
        alt: 'An image'
      }
    }
  });
</script>

2. 双向绑定

双向绑定（Two-Way Binding）允许数据在视图和模型之间双向同步。它意味着当数据发生变化时，视图自动更新；反之，当视图中的值被修改时，数据也会同步变化。

2.1. v-model 指令

基本用法：v-model 用于表单输入元素（如 <input>、<textarea> 和 <select>）以实现双向数据绑定。

<div id="app">
  <input v-model="message" placeholder="Type something">
  <p>The input value is: {{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    }
  });
</script>

这里，输入框的值和 message 之间会保持同步。输入框中的值改变时，message 的值也会更新，反之亦然。

2.2. 修饰符

.lazy 修饰符：v-model 默认在每次输入时更新数据。.lazy 修饰符可以在失去焦点时才更新数据。

<input v-model.lazy="message">

.number 修饰符：将输入的值自动转换为数字。

<input v-model.number="age">

.trim 修饰符：自动去除输入值的首尾空格。

<input v-model.trim="message">

2.3. 使用 `v-model` 在组件中

自定义组件：在自定义组件中，v-model 需要配合 model 选项和 prop 来使用。

<custom-input v-model="inputValue"></custom-input>

<script>
  Vue.component('custom-input', {
    props: ['value'],
    template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">'
  });
</script>

在这个示例中，自定义组件通过 $emit('input', newValue) 将更新传递到父组件中，v-model 自动处理这个更新。

3. 单向绑定与双向绑定的比较

单向绑定适用于那些数据不需要反向同步的场景，比如显示静态内容或从数据源加载内容到视图。
双向绑定适用于表单输入等需要保持数据与视图同步的场景。它使得用户的输入可以直接反映到 Vue 实例的数据中，而不需要手动处理每次数据的变化。

4. 实际应用

表单处理：使用 v-model 在表单中实现用户输入的双向绑定，简化表单处理和数据验证。
动态样式和类：使用单向绑定（v-bind）动态应用样式和类。
组件设计：利用 v-model 在组件中实现双向绑定，提升组件的可复用性和可维护性。

实例：

<template>
  <div class="hello">
    <input type="text" v-model="username" />
    <input type="text" v-model.lazy="password" />
    <input type="text" v-model.trim="id" />
    <p>{{ username }},{{ password }},{{ id }}</p>
    <button @click="clickGetName">获取用户名</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      username: "",
      password: "",
      id: "",
    };
  },
  methods: {
    clickGetName() {
      console.log(this.username);
    },
  },
  
};
</script>

拓展

DOM是什么？

DOM（Document Object Model，文档对象模型）是一种跨平台、与语言无关的编程接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在Web开发中，DOM特别指的是HTML和XML文档的编程接口。通过DOM，开发者可以构建动态的、可交互的网页应用。

DOM的基本概念

文档（Document）：在Web环境中，文档通常指的是加载在浏览器窗口中的HTML或XML文件。
对象（Object）：在DOM中，文档被表示为对象，这些对象可以通过编程方式被访问和操作。
模型（Model）：模型是一种表示数据结构的方式。在DOM中，这个模型表示了文档的结构，包括标签、属性、文本等。

DOM的作用

DOM的主要作用是让开发者能够通过编程方式访问和操作网页的内容。这意味着你可以使用JavaScript（或其他支持DOM的编程语言）来添加、删除、修改或移动网页上的元素，以及改变它们的样式或行为。

DOM的结构

DOM将文档表示为一个由节点（node）构成的树状结构。每个节点都是一个对象，表示文档中的一部分，如元素（element）、属性（attribute）、文本（text）等。

根节点（Root Node）：对于HTML文档，根节点是<html>元素。
元素节点（Element Node）：代表文档中的HTML或XML元素，如<div>、<p>等。
属性节点（Attribute Node）：代表元素的属性，如<img src="image.jpg">中的src属性。
文本节点（Text Node）：包含文本内容，如元素之间的文字。
注释节点（Comment Node）：包含注释内容，如。

使用DOM

在JavaScript中，你可以使用DOM API来访问和操作DOM树。例如，你可以使用document.getElementById()来查找具有特定ID的元素，使用element.style.color = 'red';来改变元素的样式，或者使用element.appendChild(newElement);来向元素中添加子元素。

注意事项

DOM操作可能会对性能产生影响，特别是在处理大量元素或频繁进行DOM操作时。因此，在开发时应该注意优化DOM操作。
现代浏览器提供了许多新的API和特性来改进DOM的性能和易用性，例如DocumentFragment、classList等。
随着Web标准的不断发展，DOM也在持续演进。因此，开发者应该关注最新的Web标准和浏览器兼容性信息。

BOM是什么

BOM（Browser Object Model，浏览器对象模型）是一个与浏览器交互的接口，它提供了独立于内容的、可以与浏览器窗口进行互动的对象。BOM 主要由一系列与浏览器窗口进行交互的对象组成，而不是像 DOM 那样专注于文档内容。

BOM 的核心对象是 window，它代表了浏览器的一个实例（通常是一个标签页或窗口），并提供了操作浏览器窗口的方法和属性。通过 window 对象，你可以访问浏览器的历史记录（通过 history 对象）、当前 URL（通过 location 对象）、浏览器窗口的尺寸和位置（通过 screen 对象和 window 对象自身的属性和方法），以及执行诸如打开新窗口、移动窗口、调整窗口大小等操作。

除了 window 对象外，BOM 还包含了一些其他对象，如 navigator（提供有关浏览器的信息）、screen（提供有关用户屏幕的信息）、localStorage 和 sessionStorage（提供在浏览器端存储数据的功能）等。

需要注意的是，BOM 并没有一个正式的标准，不同的浏览器厂商可能会实现不同的功能和接口。因此，在使用 BOM 时，开发者需要特别注意跨浏览器兼容性问题。

总的来说，BOM 是 Web 开发中不可或缺的一部分，它允许开发者通过编程方式控制浏览器窗口的行为和外观，从而创建更加丰富和动态的 Web 应用。

DOM（文档对象模型）和BOM（浏览器对象模型）的关系可以理解为：DOM专注于操作网页的文档结构，而BOM则负责管理浏览器窗口与网页之间的交互，两者共同协作以实现动态、交互式的Web页面。

标签：Vue,浏览器,Javaweb,DOM,绑定,视图,文档
From： https://blog.csdn.net/2301_80841939/article/details/141641671

Javaweb学习之Vue数据绑定（五）

认识数据绑定

1.单向绑定

1.1. 插值（Interpolation）

1.2. 指令绑定

1.3. `v-bind` 的对象语法

2. 双向绑定

2.1. v-model 指令

2.2. 修饰符

.trim 修饰符：自动去除输入值的首尾空格。

2.3. 使用 `v-model` 在组件中

3. 单向绑定与双向绑定的比较

4. 实际应用

拓展

DOM是什么？

DOM的基本概念

DOM的作用

DOM的结构

使用DOM

注意事项

BOM是什么

相关文章

赞助商

阅读排行

Javaweb学习之Vue数据绑定（五）

认识数据绑定

1.单向绑定

1.1. 插值（Interpolation）

1.2. 指令绑定

1.3. v-bind 的对象语法

2. 双向绑定

2.1. v-model 指令

2.2. 修饰符

.trim 修饰符：自动去除输入值的首尾空格。

2.3. 使用 v-model 在组件中

3. 单向绑定与双向绑定的比较

4. 实际应用

拓展

DOM是什么？

DOM的基本概念

DOM的作用

DOM的结构

使用DOM

注意事项

BOM是什么

相关文章

赞助商

阅读排行

1.3. `v-bind` 的对象语法

2.3. 使用 `v-model` 在组件中