//vue 环境安装
http://blog.csdn.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 真的很难转过来  慢慢来吧。。。

vueJS 获取后台数据 绑定data的更多相关文章

  1. 用ajax获取后台数据，返回json数据，怎么在前台使用？

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  2. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  3. 前台通过ajax获取后台数据，PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  4. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  5. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

  6. Java获取后台数据，动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  7. easyui panel异步获取后台数据在前台显示

    我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...

  8. js 获取后台数据分页

    页面创建一个存放内容的容器,以及分页的容器: <div id="content"></div> <div id="pager"&g ...

  9. Echarts 获取后台数据 使用后台数据展示 柱形图

    后台数据要以json格式返回 页面:引用echarts.js , 然后data以ajax的数据请求并返回 <%@ page language="java" import=&q ...

随机推荐

  1. PHP接入芝麻信用续。

    前面,做好了,PHP查询芝麻信用. 客户又要求说,芝麻官方,发来邮件,还需要提交网站的数据给芝麻, 就是说接入芝麻SDK,还有一步,就是数据反馈. 大概芝麻分就是根据这些反馈的数据来计算的吧. 不多说 ...

  2. java的位运算符

    1.与运算&,同为1为1,否则为0: 例如:10001(二进制)&10000(二进制)=10000(二进制) 2.或运算|,只要有1就是1: 例如:10001(二进制)&100 ...

  3. 记一次阿里云Linux服务器安装.net core sdk的问题以及解决方法

    因为公司领导要求新的项目能跨平台部署,也就是说能部署到Linux服务器上,故新的项目采用了Asp.net mvc core 1.1 进行开发.开发过程一切都比较顺利,然后在之前申请试用的一台微软Azu ...

  4. linux之sed的常用操作

    Sed命令: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patter ...

  5. EntityFramewok Core 1.1连接MSSql数据库详解

    最近在研究ASP.NET Core,其中就用到了Entity Framework Core,对于Entity Framework Core连接SqlServer数据库,使用Code Frist创建数据 ...

  6. Centos更换yum源

    Centos更换yum源 步骤如下: 备份原始源 cd /etc/yum.repos.d/ mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/ ...

  7. STM32F4的FPU单元讲解

    搞STM32F407单片机的时候 看见的关于STM32F4系列的FPU 单元讲解 比较精彩的博客  于是特意转载 和大家分享 转自:http://blog.renren.com/blog/256814 ...

  8. 以setTimeout来聊聊Event Loop

    平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setT ...

  9. 基于Blod的ajax进度条下载实现

    普通的浏览器下载 在web开发中,如果要实现下载功能,往往都是使用新开web页面或者是使用iframe的形式.实现起来其实很简单: <a target="_blank" hr ...

  10. iOS仿微博客户端一条微博的布局

    前言 做一个微博客户端的第三方是自学的第一个实践的项目,自从从事iOS工作之后,就把这个项目给搁置了.趁现在过年回来有些空闲时间,再次修改(总觉得项目就是不停地修改).并且记录一点东西,以后可再回头看 ...