首页
技术小册
AIGC
面试刷题
技术文章
MAGENTO
云计算
视频课程
源码下载
PDF书籍
「涨薪秘籍」
登录
注册
10.1 注册自定义指令
10.1.1 全局自定义指令
10.1.2 局部自定义指令
10.2 钩子函数
10.3 绑定值的类型
10.3.1 绑定数值
10.3.2 绑定字符串
10.3.3 绑定对象字面量
11.1 注册组件
11.1.1 注册全局组件
11.1.2 注册局部组件
11.2 向子组件传递数据
11.2.1 Prop基本用法
11.2.2 数据验证
11.3 监听子组件事件
11.3.1 监听自定义事件
11.3.2 监听原生事件
11.4 插槽的使用
11.4.1 基础用法
11.4.2 编译作用域
11.4.3 默认内容
11.4.4 命名插槽
11.4.5 作用域插槽
11.5 混入
11.5.1 基础用法
11.5.2 选项合并
11.6 动态组件
11.6.1 动态组件的用法
11.6.2 缓存效果
12.1 什么是组合API
12.2 setup()函数
12.3 响应式API
12.3.1 reactive()方法
12.3.2 watchEffect()方法
12.3.3 ref()方法
12.3.4 computed()方法
12.3.5 watch()方法
12.4 生命周期钩子函数
12.5 使用ref获取DOM元素
13.1 单元素过渡
13.1.1 CSS过渡
13.1.2 过渡的类名
13.1.3 自定义过渡的类名
13.1.4 CSS动画
13.1.5 使用JavaScript钩子函数实现动画
13.2 多元素过渡
13.2.1 多元素过渡的用法
13.2.2 设置元素的key属性
13.2.3 过渡模式的设置
13.3 多组件过渡
13.4 列表过渡
14.1 什么是虚拟DOM
14.2 render()函数的使用
14.2.1 基本用法
14.2.2 h()函数
14.3 使用JavaScript代替模板功能
15.1 路由基础
15.1.1 引入Vue Router
15.1.2 基本用法
15.1.3 动态路由匹配
15.1.4 命名路由
15.2 编程式导航
15.3 嵌套路由
15.4 命名视图
15.5 高级用法
15.5.1 beforeEach钩子函数
15.5.2 scrollBehavior方法
当前位置:
首页>>
技术小册>>
Vue.js从入门到精通(三)
小册名称：Vue.js从入门到精通(三)
### 10.3 绑定值的类型 在Vue.js的世界里，数据绑定是其核心特性之一，它允许开发者以声明式的方式将DOM的渲染与Vue实例的数据状态保持同步。这种同步机制不仅限于简单的文本内容，还包括了多种数据类型和复杂的数据结构。本章“10.3 绑定值的类型”将深入探讨Vue.js中不同类型的数据绑定方式，包括基本数据类型（如字符串、数字、布尔值）、数组、对象以及更高级的数据结构，如响应式对象和计算属性。 #### 10.3.1 基本数据类型绑定 ##### 字符串绑定 字符串是Web开发中最常用的数据类型之一。在Vue.js中，字符串绑定通常通过双大括号`{{ }}`插值表达式或`v-bind`（简写为`:`）指令来实现。插值表达式主要用于文本内容的绑定，而`v-bind`则用于HTML属性的绑定。 ```html <!-- 使用插值表达式绑定字符串 --> <p>{{ message }}</p> <!-- 使用v-bind绑定字符串到HTML属性 --> <a v-bind:href="url">Visit Website</a> <!-- 简写形式 --> <a :href="url">Visit Website</a> ``` ##### 数字与布尔值绑定 数字与布尔值的绑定方式与字符串类似，也是通过插值表达式或`v-bind`实现。不过，在处理布尔值时，Vue.js会智能地将其转换为对应的属性存在与否。例如，对于`disabled`属性，当绑定的值为`true`时，该属性会被添加到元素上；为`false`时，则不会添加。 ```html <!-- 数字绑定 --> <p>The count is {{ count }}</p> <!-- 布尔值绑定到属性 --> <button :disabled="isDisabled">Click Me</button> ``` #### 10.3.2 数组绑定 Vue.js对数组的响应式处理非常高效，使得开发者可以很容易地在模板中渲染数组数据。数组的绑定通常通过`v-for`指令来实现，该指令允许我们基于一个数组来渲染一个列表。 ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <script> new Vue({ el: '#app', data: { items: ['Apple', 'Banana', 'Cherry'] } }) </script> ``` 在数组绑定中，Vue.js不仅会响应数组元素的变化，还会响应数组长度的变化，如添加、删除元素等。但需要注意，直接通过索引设置数组项（如`vm.items[indexOfItem] = newValue`）或修改数组长度（如`vm.items.length = newLength`）不会触发视图更新，此时应使用Vue提供的方法，如`vm.$set`或数组的原生方法（如`push`、`pop`、`splice`等）。 #### 10.3.3 对象绑定 对象绑定在Vue.js中同样重要，尤其是在处理复杂数据结构时。对象可以通过插值表达式或`v-bind`指令绑定到模板中的属性或文本内容，但更常见的做法是利用`v-for`遍历对象的属性或使用计算属性来提取对象中的特定信息。 ```html <!-- 使用插值表达式绑定对象属性 --> <p>The user's name is {{ user.name }}</p> <!-- 使用v-for遍历对象的keys --> <ul> <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li> </ul> <script> new Vue({ el: '#app', data: { user: { name: 'Alice', age: 30, email: 'alice@example.com' } } }) </script> ``` 在对象绑定中，Vue.js能够响应对象属性的添加、删除或修改。但需要注意的是，如果你向一个响应式对象添加了一个新属性，并希望这个新属性也是响应式的，那么你应该使用`Vue.set(object, propertyName, value)`或`this.$set(object, propertyName, value)`来确保新属性是响应式的。 #### 10.3.4 响应式对象与计算属性 Vue.js的响应式系统是其核心，它使得Vue实例的数据状态能够自动地映射到视图上，并在数据变化时更新视图。然而，在某些情况下，我们可能需要对数据进行更复杂的处理或转换，这时就可以使用计算属性（computed properties）。 计算属性是基于它们的依赖进行缓存的响应式属性。只有当相关依赖发生改变时，计算属性才会重新求值。这使得计算属性非常适合执行复杂的数据处理，同时保持高效的性能。 ```html <p>Reversed message: {{ reversedMessage }}</p> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' }, computed: { // 计算属性 reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join(''); } } }) </script> ``` 在上述例子中，`reversedMessage`是一个计算属性，它依赖于`message`数据。每当`message`发生变化时，`reversedMessage`也会自动更新。由于计算属性是基于它们的响应式依赖进行缓存的，所以多次访问`reversedMessage`（在`message`没有变化的情况下）将不会执行计算函数，而是直接返回缓存的结果。 #### 10.3.5 监听器（Watchers） 虽然计算属性是处理复杂逻辑的首选方式，但在某些情况下，我们可能还需要对数据变化执行异步操作或开销较大的操作，这时就可以使用Vue的监听器（watchers）。 监听器允许我们观察和响应Vue实例上数据的变化。当被监听的数据变化时，可以执行异步操作或开销较大的操作，而不会阻塞DOM的更新。 ```javascript new Vue({ el: '#app', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 `question` 发生改变，这个函数就会运行 question(newQuestion, oldQuestion) { this.debouncedGetAnswer(); } }, created() { // 使用 `_.debounce` 来创建一个防抖函数 this.debouncedGetAnswer = _.debounce(this.getAnswer, 500); }, methods: { getAnswer() { if (this.question.indexOf('?') > -1) { this.answer = 'Thinking...'; // 模拟API请求 setTimeout(() => { this.answer = 'Yes!'; }, 1000); } else { this.answer = 'Questions usually contain a question mark. (?)'; } } } }) ``` 在上面的例子中，我们创建了一个监听器来观察`question`数据的变化。当`question`变化时，我们使用一个防抖函数`debouncedGetAnswer`来延迟执行`getAnswer`方法，以避免在短时间内多次触发API请求。 #### 总结 Vue.js通过其强大的数据绑定机制，使得开发者能够轻松地在视图与数据之间建立联系。无论是基本数据类型、数组、对象，还是更复杂的响应式对象和计算属性，Vue.js都提供了丰富的工具和选项来支持各种类型的数据绑定。通过合理使用这些工具和选项，我们可以构建出既高效又易于维护的Vue.js应用。希望本章内容能够帮助你更深入地理解Vue.js中的数据绑定机制，并在实际开发中灵活运用。
上一篇：
10.2 钩子函数
下一篇：
10.3.1 绑定数值
该分类下的相关小册推荐：
Vue.js从入门到精通(一)
Vue源码完全解析
TypeScript和Vue从入门到精通(五)
VUE组件基础与实战
TypeScript和Vue从入门到精通(三)
TypeScript和Vue从入门到精通(一)
Vue3技术解密
移动端开发指南
Vue.js从入门到精通(四)
vuejs组件实例与底层原理精讲
Vue.js从入门到精通(二)
TypeScript和Vue从入门到精通(四)
