Vue简单使用

1.引入vue.js

<script type="text/javascript" src="../script/vue.js"></script>

2.js脚本

// 基本信息赋值
var vm = new Vue({
    el: '#header_info',
    data:{
        nickname:'张三',
        customer_id:'888888'
    }
});

3.html处理数据

<header class="aui-bar aui-bar-nav" id="header_info">
    <div class="aui-info-item aui-margin-l-10" style="margin-top: 50%; line-height: 1;">
        <span class="aui-margin-l-5">{{nickname}}</span>
    </div>
    <div class="aui-info-item aui-margin-l-15">
        <h4>账号:{{customer_id}}</h4>
    </div>
</header>
            

经过这么简单的操作,json数据就显示到页面上了!
这只是简单应用!比之dot的加载,这种方式要好用,不用总是写script了!

方法论:项目中要敢于尝试,尝试新的技术,新的框架!把它们用到项目中去!

posted @ 2017-04-07 14:08  TBHacker  阅读(322)  评论(0编辑  收藏  举报