wordpress建站教程交友,wordpress网站的CDN设置,临汾网站建设公司,网站备案把二级域名放在国外Vue 中最大的一个特征就是数据的双向绑定#xff0c;而这种双向绑定的形式#xff0c;一方面表现在元数据与衍生数据之间的响应#xff0c;另一方面表现在元数据与视图之间的响应#xff0c;而这些响应的实现方式#xff0c;依赖的是数据链#xff0c;因此#xff0c;要…Vue 中最大的一个特征就是数据的双向绑定而这种双向绑定的形式一方面表现在元数据与衍生数据之间的响应另一方面表现在元数据与视图之间的响应而这些响应的实现方式依赖的是数据链因此要了解数据绑定的原理先要理解下面两方面内容。
一、 Vue中数据链
所谓数据链它是一种数据关联的形式在这种形式中有一到多个的起始数据点称之为元数据而由这些元数据因某种关系衍生出的数据称之为衍生数据元数据与衍生数据通过数据节点交织在一起形成数据结构网而这种结构网我们称之为数据链。 在Vue 中当数据链中的元数据变化时与其关联的衍生数据通过数据链完成同步更新实现数据双向绑定的效果;在Vue 实例化对象中computed选项值可以为开发人员生成衍生对象当元数据变化时生成的衍生对象将会同步更新。
实例 使用衍生数据显示“张三你好!”
1. 功能描述
新建一个名称为SayHello.vue的组件在返回的数据对象中添加一项名称为“name”的属性初始值为“张三”同时在computed配置选项中添加一个名为sayHelloName的函数在函数中返回“张三你好!”并在页面中执行该函数。
2. 实现代码
在项目的components 文件夹中新建一个名称为“ch3”的子文件夹在这个子文件夹中添加一个名为“SayHello”的.vue文件在文件中加入如清单所示代码。
代码清单 SayHello.vue代码
templatedivdiv{{ name }}/divdiv{{ sayHelloName }}/div/div
/template
script
export default {data() {return {name: 张三,};},computed: {sayHelloName() {return this.name 你好;}},
};
/script
style scoped
div {margin: 10px;text-align: left;
}
/style
SayHello.vue文件是一个独立的组件需要将它导入到根组件App.vue中并声明该组件最后在模板中以标签形式应用该组件因此App.vue文件修改后的代码如下列代码清单所示。
templateSayHello /
/templatescript
import SayHello from ./components/ch3/SayHello.vue;export default {name: App,components: {SayHello}
};
/scriptstyle
...省略样式代码
/style
3.页面效果
保存代码后页面在Chrome浏览器下执行的页面效果如图下图所示。
4. 源码分析
在Vue 实例化配置对象中computed选项中可以生成衍生数据生成过程由函数来完成该函数不接收参数在函数体中由于this指向实例化的Vue 对象因此它可以访问所有实例化对象中挂载的属性值如this.name表示元数据值。
此外computed选项中的函数虽然可以访问实例化对象中挂载的全部属性值但它在函数中必须使用return 语句返回计算或衍生后的数据通过这种形式才可以在模板中使用双大括号方式执行函数接收并显示返回的数据。
因此示例中的sayHelloName函数中先获取元数据name值并添加“你好!”形成一个衍生数据同时作用函数的返回值;当在模板中调用该函数时则直接将接收到的衍生数据显示在页面中由于是衍生数据当元数所变化时将会通过数据链形式同步衍生数据因此衍生数据也会同步更新。即修改name值为“李四”时页面将直接显示“李四你好!”的字样。
