文档章节

vue2 在页面加载的时候 获取http数据并显示

mellen
 mellen
发布于 2017/04/27 16:20
字数 217
阅读 417
收藏 0
点赞 1
评论 0

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>post交互</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>

        </style>
        <link rel="stylesheet" href="css/mui.min.css">
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/vue.min2.2.js"></script>
        <script type="text/javascript" src="js/axios.min.js"></script>
        <script type="text/javascript" src="js/public.js"></script>

        <link href="css/mystrap.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" type="text/css" href="css/app.css" />
    </head>


    <body>
        <div id="app" v-on:onfocus="reverseMessage()">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media" v-for="list in sites">
                    <a href="javascript:;">

                        <img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
                        <div class="mui-media-body">

                            <p class='mui-ellipsis'>{{list.Name}} {{list.Url}}</p>

                        </div>
                    </a>
                </li>
            </ul>

            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">反转字符串</button>

        </div>

        <script>
            window.onload=function(){
                //message ="";
    
            var vm = new Vue({
                el: '#app',
                data: {
                    message:"message",
                    sites:[]

                },

                methods: {
                    reverseMessage: function() {
                        var self = this;

                        axios.get('sites.php').then(function(response) {

                            self.sites = response.data.sites;
                            console.log(self.sites);

                            self.message = self.sites[1].Name;
                           console.log(sites[1].Name);
                        }).catch(function(error) {
                            console.log(error);
                        });

                    }
                }
            });
            
            vm.reverseMessage();
            
            }
        </script>
    </body>

</html>

© 著作权归作者所有

共有 人打赏支持
mellen
粉丝 9
博文 113
码字总数 69070
作品 1
南京
部门经理
OpenDigg前端开源项目月报201704

由OpenDigg 出品的前端开源项目月报第一期来啦。我们的前端开源月报集合了OpenDigg一个月来新收录的优质前端开源项目,方便前端开发人员便捷的找到自己需要的项目工具。 reactide React web...

OpenDigg ⋅ 2017/04/12 ⋅ 0

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704 ⋅ 2017/04/20 ⋅ 0

Vue 全家桶 + Express 实现的博客(后端API全部自己手写)

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 ...

AlloyTeamZy ⋅ 2017/07/05 ⋅ 0

AlloyTeamZy/vue2_blog

为什么学习并使用Vue 1.发展趋势 最近这几年的前端圈子,由于戏台一般精彩纷呈,从 MVC 到 MVVM,你刚唱罢我登场。 backbone,AngularJS 已成昨日黄花,reactjs 如日中天,同时另一更轻量的 ...

AlloyTeamZy ⋅ 2017/07/05 ⋅ 0

web前端Vue.js经典开源项目汇总

  Vue是什么?   Vue.js(读音/vju/,类似于view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易...

爱前端 ⋅ 2017/12/03 ⋅ 0

武侯/mui-vue2

mui-vue2 基于mui+vue2.x的H5 APP项目,页面视图全部都是html5页,不是嵌入app原生页面,项目可以直接运行在PC上调试,也可以在hbuilder上真机调试,可以直接下载安装点此链接APP下载。 项目文...

武侯 ⋅ 2017/12/30 ⋅ 0

倔强的网站数据抓取,关键时刻还需Webbrowser显身手

由于最近台风挺多,公司网站上需要挂上台风预报信息,就整了个抓取台风数据(至于抓数据的概念和实践手册我以前写的一篇博客里面有介绍:分享一套抓数据小程序,客户资料、实时新闻、股票数据...

台湾 ⋅ 2013/10/23 ⋅ 3

EasyUI的combotree设置值问题

如图,用EasyUI的combotree做了个树形下拉框。是异步的。点父节点加载子节点。取值的时候没有问题。 问题在下面 就是往表单里设置值的时候,如果值是根节点的,能正常显示文字,如果是子节点...

雨花石 ⋅ 2014/09/04 ⋅ 1

Vue2.x如何获取slot中编译前和编译后的内容

大家好,我在学习Vue.js的过程中遇到了一个问题: 在使用Vue2时,我需要获取slot中的源代码,比如有一个slot.name为title的slot: 我希望获取到slot中的内容为 ,我试了好多方法都获取不到(...

coper0519 ⋅ 2017/04/27 ⋅ 1

从零构建 vue2 开发环境到入门--vue2-demo

前言 vue2正式版已经发布将近一个月了, 国庆过后就用在了公司的两个正式项目上, 还有一个项目下个月也会采用vue2进行重构 选择它没什么理由,如果非要说一个理由 那就是它的中文文档远比r...

匿名 ⋅ 2016/11/09 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 19分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部