Vue.js学习笔记(一)

Vue是构建用户界面的渐进式框架，可以根据需要选择使用的模块，只关注视图层

---

Vue中的两个核心点：

1. 响应的数据绑定
   就是当数据发生改变的时候，视图就可以自动更新，也就是利用

Object.defineProperty

中的

setter/getter

代理数据，监控对数据的操作，
因为IE8及以下不支持Object.defineProperty，所以Vue不兼容IE8及以下

<div id="demo1>
    {{message}}
</div>
<script>
    var oDemo1 = new Vue({
        el:'#demo1',
        data:{
            message:'hello world!'
        }
    });
//在此同时，我们可以通过修改oDemo1.message来修改数             据
//也可以通过修改oDemo1._data.message来修改。
</script>

1. 组合的视图组件
   
   1. UI页面映射为组件树，也就是把页面拆分为小组件，然后组成 一个完整的页面，理解上可以参考DOM树
   2. 划分组件可增强可维护性，可重用性，可测试性

虚拟DOM

运行js代码的速度是很快的，但是大量的操作DOM就会很慢。所以如果按照常规方法来实现类似与Vue的实时更新数据，那么系统资源会大量分配在DOM操作上，在对于DOM的处理上，Vue采用了比较聪明的虚拟DOM技术。
所谓的虚拟DOM技术，就是Vue利用在内存中生成与真实DOM对应的数据结构，当数据发生变化时，能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

Vue渲染DOM的过程：

模板：

<ul id="demo2">
    <li v-for='item in items'>{{item}}</li>
</ul>

然后调用渲染函数：

createElement(
        'ul',   //结点的类型
        {       //标签上结点的属性
             attr:{
                id:'demo2'
             }
        }，
        {           //该节点的子节点
            createElement('li',0),
            createElement('li',1),
            createElement('li',2)
        }
    )

形成虚拟DOM树：
虚拟DOM树其实是一个对象，用于存储该结点的信息，包括其属性方法，子节点信息等。

最后生成真实节点。

---

简单的双向数据绑定例子：

<div id='demo3'>
    <input type='text' v-model='message' />
    <p>{{message}},</p>
</div>
<script>
    var demo3 = new Vue({
        el:'#demo',
        data:{
            message:'hello world!'
        }
    });
</script>

Vue实例

每一个应用都是通过Vue这个构造函数创建根实例启动new Vue()

需要传入选项对象，对象包含挂载元素，数据，模板，方法等;

el: 挂载元素选择器
data: 代理数据
methods: 定义方法

Vue代理data数据

每个Vue实例都会代理其data对象里所有的属性，这些被代理的属性是响应的。新添加的属性不具备响应功能，改变后不会更新视图。

Vue实例自身的属性和方法
暴露自身的属性和方法，以$开头，如$el,$data等

指令
是Vue的自定义行间属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上。在Vue中，指令以v-开头。