Vue上手初体验

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” 对应的数据。

    原文作者:沉梦昂志
    原文地址: https://segmentfault.com/a/1190000007849881
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞