Vue上手初体验 - HelloWorld开发者社区

Vue.js

vue.js不是一个框架，他只是一个提供MVVM风格的双向绑定的库，专注于UI层面。

在 Vue.js 的定义中，View 就是用户实际看到的 DOM 元素，而 Model 就是原生的JavaScript 对象。作为开发者，真正需要关注的只有 ViewModel，也就是 Vue.js 所提供的 Vue 构建函数:

我们来看一个Vue实例：

//这个是我们的HTM
<div id="demo">
    <p>{{mesData}}</p>
    <input type="text" v-model="thisisModel">
</div>
//然后我在模板里面定义v-model，这样就可以在全局利用vm.thisiModel来操作数据了
<script>
    // module.export = {
    //     data:function() {
    //         thisisModel:""
    //     }
    // }
    //上面的代码是我们在开发项目的时候用到的
    //这个是我们的数据
    var data = {
        thisisModel: 'Hello Vue.js!'
    }
    //这个是我们要做的
    var demo = new Vue({
        el: '#demo',
        data: data
    })
</script>

这个时候我们在input里面输入数据时会动态的传输到对应的数据层。

Vue.js 已经建立了 DOM 和数据之间的连接，此时任何对 data.thisisModel 的改动，都会触发 DOM 的更新。这样我们就可以将vm.thisisModel通过ajax请求，封装成param对象，栓送数据，获取到对应的数据，完成数据的提交和绑定，以及更改刷新。

directive

如果你没用过 Angular，那你可能不知道 directive(指令) 是什么。v-model 就是一个 directive。
######

简单来说，directive就是一个特殊的HTML属性，当vue.js看到v-model时，就知道要对当前的DOM元素做些什么。v-model是一个双向绑定，意味着：
1.当 "thisisModel" 在当前 ViewModel 上所对应的数据发生改变时，更新 <input> 的值；
2.当用户在 <input> 中修改或输入内容的时候，同步 ViewModel 上 "message" 对应的数据。