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了!
方法论:项目中要敢于尝试,尝试新的技术,新的框架!把它们用到项目中去!