Vue之响应的数据绑定

概述

Vue.js(读音 /vjuː/, 类似于 view)是一个聚焦于视图层,构建数据驱动的 web 界面的库

和其他框架的区别
demo地址:https://github.com/comeriven/Vue

Vue.js的特点

  • 响应的数据绑定
  • 组件系统

响应的数据绑定

Vue 的数据绑定是响应的,简单来说,当我们将DOM树绑定到底层数据,那么DOM树上的内容将和数据保持同步,如果更新了DOM树上的内容,那么底层数据也将一起被更新。
同理,如果更新了底层数据,那么DOM树上显示的内容也将更新。

官网上有个图片很形象(本文所有图片均来自官方)

来举个栗子:
HTML:

<div id="app">
    <p>{{ haaa }}</p>
    <input type="text" v-model="haaa">
</div> 

JavaScript

var obj = new Vue({
    el:'#app',
    data:{haaa:'Hi Vue'}
});  

如上面的栗子,data是所绑定的数据。本例中增加了一个输入框,输入框的默认内容与p标记的内容一致。并且当文本框的内容被修改时,P标记中的内容会同时改变,这就是所谓响应的数据绑定。

组件系统

组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:

实际上和DOM树很相似,我们可以把它理解成Vue独特的DOM树。这个后篇在详述。

发布者

iamorz

前端技术群:263240563

发表评论

电子邮件地址不会被公开。 必填项已用*标注