谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定双向绑定

本节的主要内容是学习几个绑定指令:

• 插值表达式
• v-html
• v-text
• v-model
• v-bind

一，插值表达式

插值表达式是一种用于在模板中动态插入数据的方法。

插值表达式允许在双大括号 {{ }} 中嵌入 JavaScript 表达式，Vue 会自动解析这些表达式并将结果渲染到 DOM 中。这种方式主要用于展示或计算数据，而不涉及复杂的逻辑处理。

插值表达式的使用非常直接，你只需在模板中需要显示动态数据的地方使用双大括号即可。例如：

<p>{{ message }}</p>

在上面的例子中，{{ message }} 就是一个插值表达式，它会显示 Vue 实例中 message 属性的值。

插值表达式可以包含任何合法的 JavaScript 表达式，包括变量、函数调用、算术运算等。例如：

<p>{{ price * quantity }}</p>

在这个例子中，插值表达式 {{ price * quantity }} 会显示 price 和 quantity 属性相乘的结果。

注意事项1：不适合复杂的逻辑处理

需要注意的是，尽管插值表达式可以包含表达式，但不适合复杂的逻辑处理。对于复杂的逻辑，Vue 推荐使用计算属性（computed properties）或方法（methods），这样可以让模板保持清晰，将复杂逻辑分离到更合适的地方。

注意事项2：插值表达式支持文本拼接

此外，插值表达式支持文本拼接，可以通过加号或字符串模板字面量实现：

<p>{{ firstName + ' ' + lastName }}</p>

或

<p>{{ `${firstName} ${lastName}` }}</p>

以上就是 Vue 中插值表达式的基本概念和使用方式。它为数据驱动的 UI 提供了简单而强大的工具，使得开发者可以轻松地将数据绑定到视图中。

注意事项3：插值表达式只能在标签体中

插值表达式只能在标签体中。

<p>{{ message }}</p>

不能用在标签属性中，下面用法是错误的。

<p color="{{color}}">标签属性中使用插值表达式是错误用法，不能达到预期目的</p>

二，v-html和v-text

在 Vue.js 中，v-html 和 v-text 都是用来将数据插入到 DOM 中的指令，但它们的使用场景和处理方式有所不同。

v-text

v-text 指令用于将数据作为纯文本插入到 DOM 节点中。它会替换整个节点的文本内容，而不会解析 HTML 标签。这通常用于安全地插入文本数据，避免潜在的 XSS（跨站脚本）攻击。

用法示例：

<div v-text="greeting"></div>

在 Vue 实例中：

let vm = new Vue({el: '#app',data: {greeting: '<strong>Hello, Vue!</strong>'}
})

这段代码会将 “Hello, Vue!” 插入到 div 中，但不会将其解析为 HTML，即使 greeting 包含 HTML 标签。

v-html

相比之下，v-html 指令会将数据作为 HTML 插入到 DOM 中，也就是说，如果数据中包含 HTML 标签，这些标签会被解析并显示为实际的 HTML 元素。这通常用于需要动态生成 HTML 结构的情况，但同时也增加了安全风险，因为未经适当清理的 HTML 数据可能包含恶意脚本。

用法示例：

<div v-html="greeting"></div>

在 Vue 实例中：

let vm = new Vue({el: '#app',data: {greeting: '<strong>Hello, Vue!</strong>'}
})

这段代码会将 <strong>Hello, Vue!</strong> 解析为 HTML，并显示加粗的文本 “Hello, Vue!”。

区别总结：

• 安全性：v-text 更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html 则可能引发安全问题，因为它会解析并渲染 HTML 标签。
• 用途：v-text 适用于插入文本数据，而 v-html 适用于插入需要被解析为实际 HTML 的数据。
• 处理 HTML 标签：v-text 忽略 HTML 标签，将其视为普通文本；v-html 则会解析并显示 HTML 标签。
• 二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。

最佳实践

在实际开发中，推荐尽可能使用 v-text，并在确实需要动态生成 HTML 时才使用 v-html，同时确保插入的数据经过了适当的清理和验证，以防止 XSS 攻击。

三，v-model

v-model 是 Vue.js 中用于实现表单输入和其他 UI 控件与数据双向绑定的指令。它简化了数据绑定的过程，使得数据模型和用户界面能够实时同步。下面是 v-model 的一些用法示例及注意事项：

复选框

<!-- 在复选框中使用 v-model -->
<label for="checkA">Java</label>
<br>
<input type="checkbox" id="checkB" value="PHP" v-model="language">
<label for="checkB">PHP</label>
<br>
<input type="checkbox" id="checkC" value="Python" v-model="language">
<label for="checkC">Python</label>
<p>选中的有：{{language.join(',')}}</p>

let vm = new Vue({el: '#app',data: {language: ['Java','PHP']}
})

对于复选框，v-model 通常绑定到一个数组，数组中的值代表被选中的复选框。

文本输入框

<!-- 在文本输入框中使用 v-model -->
<input v-model="message" placeholder="编辑我">

在这个例子中，message 数据属性将被绑定到输入框的值，任何输入框中的更改都会立即反映到 message 的值上。

单选按钮

<!-- 在单选按钮中使用 v-model -->
<input type="radio" id="optionA" value="A" v-model="selectedOption">
<label for="optionA">选项 A</label>
<br>
<input type="radio" id="optionB" value="B" v-model="selectedOption">
<label for="optionB">选项 B</label>

这里，selectedOption 数据属性将被设置为用户选择的选项的值。

下拉列表

<!-- 在下拉列表中使用 v-model -->
<select v-model="selectedValue"><option disabled value="">请选择</option><option value="A">选项 A</option><option value="B">选项 B</option>
</select>

这里，selectedValue 数据属性将被设置为用户选择的选项的值。

四，v-bind

v-bind 是 Vue.js 中的一个核心指令，用于动态地将数据绑定到 HTML 元素的属性上。它可以用于绑定任何类型的属性，包括 src、href、class、style 等。v-bind 的语法是在属性前加上 v-bind: 或者简写为 :。

基本用法

首先，来看一个基本的 v-bind 用法，绑定一个 src 属性：

<img :src="imageUrl">

假设 Vue 实例中有如下数据：

data() {return {imageUrl: 'https://example.com/image.jpg'}
}

那么，上述模板代码会将图片的 src 属性绑定到 imageUrl 的值上。

绑定 class 属性

v-bind:class 或 v-bind:class 的简写 :class 允许你动态地绑定一个或多个 CSS 类。这可以是字符串或对象形式。

字符串形式

<div :class="className"></div>

let vm = new Vue({el: '#app',data: {className: 'active-class'}
})

对象形式

<div :class="{ active: isActive }"></div>

let vm = new Vue({el: '#app',data: {isActive: true}
})

在这个例子中，如果 isActive 为 true，div 元素将会有 active 类。

数组形式

你也可以使用数组形式来绑定多个类：

<div :class="[firstClass, secondClass]"></div>

let vm = new Vue({el: '#app',data: {firstClass: 'first',secondClass: 'second'}
})

绑定 style 属性

v-bind:style 或其简写 :style 用于动态地绑定 CSS 样式。它可以是字符串、对象或数组的形式。

字符串形式

<div :style="styleString"></div>

let vm = new Vue({el: '#app',data: {styleString: 'color: red; background-color: yellow;'}
})

对象形式

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

let vm = new Vue({el: '#app',data: {activeColor: 'red',fontSize: 16}
})

在这个例子中，div 的颜色将是 red，字体大小将是 16px。

数组形式

你也可以将多个样式对象组合在一起：

<div :style="[baseStyles, extraStyles]"></div>

let vm = new Vue({el: '#app',data: {baseStyles: { color: 'red', fontSize: '16px' },extraStyles: { fontWeight: 'bold' }}
})