//vue 环境安装
http://blog.****.net/u013182762/article/details/53021374
一开始使用安装环境配置一些东西 ，后来发现太麻烦了 。 直接CDN 引入用自己的服务器跑起来
//cdn 引入地址：http://www.bootcdn.cn/
下面是 vue 配合 axios从后台获取数据 实现动态的数据绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<style>
*{
margin:0;
padding:0;
}
#main{
width:auto;
margin:0 auto;
text-align:center;
}
nav{
display:inline-block;
margin:60px auto 45px;
background-color:#5597b4;
box-shadow:0 1px 1px #ccc;
border-radius:2px;
}
nav a{
display:inline-block;
padding: 18px 30px;
color:#fff !important;
font-weight:bold;
font-size:16px;
text-decoration:none !important;
line-height:1;
background-color:transparent;
-webkit-transition:background-color 0.25s;
-moz-transition:background-color 0.25s;
transition:background-color 0.25s;
cursor:pointer;
}
p{
margin:0 auto;
}
b{
display:inline-block;
padding:5px 10px;
background-color:#c4d7e0;
border-radius:2px;
font-size:18px;
}
.show{
background-color:#e35885;
}
</style>
<script src="//cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<body>
<div id='main'>
<nav>
<a v-for="(item,index) in items" :class="{'show': item.active}" @click="makeActive(item,index)">{{item.NODE_NAME}}</a>
</nav>
<p>你选择的是: <b>{{active}}</b></p>
</div>
<script>
var vm = new Vue({
el:'#main',
data:{
active:'NULL',
items:{
},
},
methods: {
makeActive: function(item, index){
this.active = item.NODE_NAME;
for(var i=0; i<this.items.length;i++){
this.items[i].active = false;
}
this.items[index].active = true;
}
},
mounted: function () {
this.$nextTick(function () {
var self = this;
axios.get('http://localhost:8080/ipms-volte/Grazioso_Control.jsp?Page=Anals_Dim_Select&space_ids=1,2,3,4,5&0.7043697137851268')
.then(function(res){
console.log(res.data);
for(var i=0;i<res.data.XML.result_Select_data.Data.Row.length;i++){
res.data.XML.result_Select_data.Data.Row[i].active = false;
};
//this.$set(this, 'itms', res.data.XML.result_Select_data.Data.Row)
self.items = res.data.XML.result_Select_data.Data.Row
})
.catch(function(err){
console.log(err);
})
});
} });
</script>
</body>
</html>
// 下面是看到的实例
https://segmentfault.com/a/1190000006165434
// 从JQ模式 到MVVM 真的很难转过来 慢慢来吧。。。