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了！

方法论：项目中要敢于尝试，尝试新的技术，新的框架！把它们用到项目中去！

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/6677858.html，如需转载请自行联系原作者