前端开发:Vue中数据绑定视图

时间:2024-10-23 11:15:40

Vue.js(通常简称为 Vue)是一个用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是,Vue 被设计为可以逐步采用。核心库只关注视图层,并且非常容易上手,同时也很容易与其他库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。今天给大家分享——数据绑定视图,如果对有所帮助,麻烦关注收藏一下,联系我可以一起学习!

一般而言,一个对象是由多个key/value值对组成的无序集合,并且对象中的每个属性值可以是任意类型的,向对象添加属性时,可以是字面量或构建函数,如下代码:

var obj = new Object;  // 等价于obj = {}
obj.name = "张三";  //添加描述
obj.say = function(){};  //添加行为

除上述方式之外,还可以使用 Object.defineProperty 方法定义新属性或修改原有的属性值;在设置和获取属性时,可以使用setter和getter方法,前者用于设置对象的属性值,后者用于获取对象的属性值,如下代码:

var obj = {};
var initValue = 'hello';
Object.defineProperty(obj, "name2", {
     get: function () {
           //函数在获取值时触发
           return initValue;
     },
     set: function (value) {
           //函数在设置值时触发,新值通过参数 value 获取
           initValue = value;
     }
});
// 获取初始值
console.log(obj.name2);  // 输出"hello"
// 设置新值
obj.name2 = '李四';
// 输出设置的值
console.log(obj.name2); // 输出"李四"

对象中的 setter 和 getter方法不需要成对出现,根据需求按功能也可以单独添加;由于它们都是方法,因此,可以在执行方法过程中执行其他的功能,例如,在修改属性值时,重量页面中显示属性值的元素内容,实现数据同步绑定视图内容的效果,实例如下:

实例: 数据同步绑定视图内容

1)功能描述

在新建的页面中,添加一个input 文本输入框元素,并添加一个div 元素,当在文本框中输入内容时,div 元素中同步显示文本框中输入的内容。

2)实现代码

在项目components 文件夹的ch3子文件夹中,添加一个名为“dataView”的.html文件,在文件中加入如清单所示代码。

代码清单: dataView.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同步视图绑定的数据</title>
</head>

<body>
    <input type="text" id="txt">
    <div id="tip">...</div>
    <script>
        let txt = document.getElementById("txt");
        let tip = document.getElementById("tip");
        let obj = {
            name: ""
        }
        let temp = {}
        let propName = "name";
        Object.defineProperty(obj, propName, {
            set(v) {
                tip.innerHTML = v;
                temp[propName] = v;
            },
            get() {
                return temp[propName];
            }
        })
        txt.addEventListener("keyup", function () {
            obj[propName] = this.value;
        })
    </script>
</body>

</html>

3)页面效果

保存代码后,页面在Chrome浏览器下执行的页面效果如图所示。
在这里插入图片描述
4) 源码分析

在本示例的页面源码中,首先,使用对象的 defineProperty 方法获取和重置obj对象的“name”属性值,其次,在重置方法中,不仅修改了对象属性值,而且还将该属性值赋给div元素,最后,当文本框执行绑定的“keyup”事件时,需要重量对象的“name”属性,因此,触发了对象属性变更的setter 函数,在重置属性值的同步,将属性值同步显示在元素的内容中,这个过程实质上也是 Vue 中数据与视图绑定的原理。

在Vue 中,当把JavaScript 对象传给Vue实例的data选项时,Vue将遍历这个对象的全部属性,并使用Object.defineProperty将其全部转化为getter/setter 变更形式,并在组件渲染时,记录属性与视图的依赖关系,根据这种依赖关系,当setter函数再次被调用时,会通知watcher重新计算并更新其关联的所有组件,最终实现数据双向同步的功能。
在这里插入图片描述

相关文章