vue基础 day1

说到vue，第一反应就是MVVM框架，那么什么是MVVM框架，和普通的框架有什么区别，

mvvm 是 model + view + viewmodel 框架，通过 viewmodel 连接数据模型model 和 view
Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化
ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素
DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化

小结：简单说vue就是一个拥有ViewModel实例，这个实例链接数据模型和视图，以数据驱动，通过数据来显示视图层，而不是操作节点，双向绑定的中心是DOM Listeners和Data Bindings

JS实现双向绑定

<body>
    <div id="div1">
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
</body>
<script type="text/javascript">
    //要双向绑定的数据对象
    var obj = {}
        //通过defineProperty,来监听obj对象中的txt属性变化
    Object.defineProperty(obj, 'txt1', {
        //txt1被读取时返回原来值
        get: function() {
            return obj
        },
        //当txt1被设置时，把这个值赋给input，和p标签
        set: function(newValue) {
            document.getElementById('txt').value = newValue
            document.getElementById('show').innerHTML = newValue
        }
    })
    //当输入框有输入事件，把输入的这个值传赋给数据对象，然后数据对象触发，再赋给绑定的框
    document.addEventListener('keyup', function(e) {
        obj.txt1 = e.target.value
    })
</script>

vue的生命周期

首先总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后,
beforeCreate（创建前）在数据观测和初始化事件还未开始
created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来
beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted（载入后）在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

小结：这些看看了解下就可以，真实很少全部用到，记住常用的，

beforecreate : 可以在这加个loading事件
created : 初始化完成时的事件写在这里，如在这结束loading事件,异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点

本文使用 mdnice 排版

js实现双向绑定，和vue生命周期描述使用

vue基础 day1

说到vue，第一反应就是MVVM框架，那么什么是MVVM框架，和普通的框架有什么区别，

JS实现双向绑定

vue的生命周期