认识数据绑定
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页面。