文档章节

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

mellen
 mellen
发布于 2017/04/27 16:20
字数 217
阅读 421
收藏 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
博文 116
码字总数 69257
作品 1
南京
部门经理
干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

wdlhao
09/17
0
0
vue2 + koa2 + webpack4 的SSR之旅

前言 因为自己的博客完全的前后端分离写的,在 这一块也没考虑过,于是乎,便开始了本次的之旅 技术栈 vue2 + koa2 + webpack4 + mongodb 因为webpack也已经到了 的版本了,所以顺带把迁移到...

大灰狼的小绵羊哥哥
前天
0
0
vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

大灰狼的小绵羊哥哥
09/18
0
0
OpenDigg前端开源项目月报201704

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

OpenDigg
2017/04/12
0
0
利用prerender-spa-plugin提升单页面应用的体验

作者:汪楠 目前 、 在前端界混的风生水起,它们的开发思想使得我们能真正做到前后端分离、解耦。单页面的使用给用户带来了更好体验。不过对于 和 React 这种框架来说, 的思路在首屏加载慢、...

京东设计中心JDC
10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HTTP get、post 中请求json与map传参格式

import java.io.IOException;import java.net.URI;import java.net.URISyntaxException;import java.nio.charset.Charset;import java.util.ArrayList;import java.util.List;im......

寒风中的独狼
24分钟前
0
0
IDEA中tomcat启动慢 耗时10分钟

用idea中的tomcat以debug模式启动,会非常的慢,而正常启动没啥问题;原因是debug模式中View Breakpoints断点代码,断点的是jar包,而现在启动由于jar包发生变化,导致启动时一直处于等待中。...

GoodMarver
35分钟前
2
0
Linux学习-10月18(awk)

9.6/9.7 awk 一、awk简介   1. awk是一种编程语言,用于对文本和数据进行处理的   2. 具有强大的文本格式化能力   3. 利用命令awk,可以将一些文本整理成为我们想要的样子   4. 命令awk...

wxy丶
37分钟前
0
0
「ThinkPHP开发者周刊」第3期——官宣:5.1版本发布LTS版本

[ 本周读数 ] 70——还剩70天,PHP5.6年底不再提供支持 PHP5.6的安全支持将于2018年12月31日终止。即两个多月后,使用 PHP 5.6 版本的网站将不再收到安全漏洞或错误更新。 较新的 PHP7.0在今...

流年
45分钟前
1
0
Spring IOC 之 注册 BeanDefinition

获取 Document 对象后,会根据该对象和 Resource 资源对象调用 registerBeanDefinitions() 方法,开始注册 BeanDefinitions 首先调用 createBeanDefinitionDocumentReader() 方法实例化 Bean...

职业搬砖20年
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部