zoukankan      html  css  js  c++  java
  • vue-自带vue-resource插件实现http请求

    安装

    本地环境安装路由插件vue-resource:    cnpm install vue-resource --save-dev  

     *没有安装淘宝镜像的可以将 cnpm 替换成 npm

    想要安装的可以看这篇文章http://www.cnblogs.com/padding1015/p/7162024.html,(打开搜索  镜像  即可跳转到对应位置)

     

    配置

    1.引用

    main.js中用import引入进来:

    import VueResource from 'vue-resource'

    * 注意这里VueResource是自定义的名字。下边注册的时候会用到

    2.注册

    同样,main.js中注册,同vue-router

    Vue.use(VueResource)
    

      

    3.配置

    直接在对应页面的created钩子函数配置即可:

    created() {
    	this.$http.get("http://jsonplaceholder.typicode.com/todos")
    	.then((data) => {
    		// console.log(data)
    		this.arrs = data.body;
    })
    

      链接是数据接口的地址,arrs是在本页面的data函数中定义的空对象,data.body是拿到的数据存放的地方。

    4. 使用数据

    根据拿到的数据结构和内容对应渲染

    页面中直接渲染使用:

    <li v-for="item in arrs" v-on:click="item.completed = ! item.completed">
    	<!-- {{item}} -->
    	<span class="id">{{item.userId}} </span>
    	<span class="title">{{item.title}}</span>
    	<span class="completed" v-show="item.completed">选中</span>
    </li>
    

      

    用到vue-resource的页面代码参考:

     1 <template>
     2     <div class="app-cont">
     3             <div class="vue-resource">
     4             <h3>获取其他地址里的json数据并进遍历</h3>
     5             <ul>
     6                 <li v-for="item in arrs" v-on:click="item.completed = ! item.completed">
     7                     <!-- {{item}} -->
     8                     <span class="id">{{item.userId}} </span>
     9                     <span class="title">{{item.title}}</span>
    10                     <span class="completed" v-show="item.completed">选中</span>
    11                 </li>
    12             </ul>
    13         </div>
    14     </div>
    15 </template>
    16 <script>
    17     export default{
    18         name: "app-cont",
    19         data () {
    20             return {
    21                 arrs:{}
    22             }
    23         },
    24         methods: {
    25         },
    26         // 页面加载之前,用created钩子函数-获取网页数据
    27         created() {
    28             this.$http.get("http://jsonplaceholder.typicode.com/todos")
    29             .then((data) => {
    30                 // console.log(data)
    31                 this.arrs = data.body;
    32             })
    33         }
    34     }
    35 </script>
    36 <style scoped>
    37     h2{
    38         margin: 0;
    39         padding: 10px 0;
    40         background: #f5f5f5;
    41     }
    42     ul{
    43         display: flex;
    44         flex-wrap: wrap;
    45         margin: 0 auto; 
    46         padding: 10px 0;
    47     }
    48     li{
    49         position: relative;
    50         flex-grow: 1;
    51         flex-basis: 200px;
    52         text-align: center;
    53         padding: 30px;
    54         margin: 5px;
    55         border: 2px solid Lightgreen;
    56     }
    57     li:hover{
    58         background: Lightgreen;
    59         cursor: pointer;
    60     }
    61     span{
    62         color: #333;
    63         font-weight: bold;
    64     }
    65     .vue-resource{
    66         margin: 20px 40px;
    67         border: 1px solid Lightgreen;
    68         background: #eee;
    69     }
    70     span{
    71         display: block;
    72     }
    73     span.id{
    74          75%;
    75         margin: 0 auto 20px;
    76         padding: 10px 0;
    77         border-bottom: 1px solid Lightgreen;
    78     }
    79     
    80     span.completed{
    81         position: absolute;
    82     top: -6px;
    83     right: 10px;
    84         z-index: 999;
    85      20px;
    86     height: 45px;
    87     padding-top: 5px;
    88     color: #90ee90;
    89     background: #000;
    90     }
    91 </style>
    View Code

    声明:

      请尊重博客园原创精神,转载或使用图片请注明:

      博主:xing.org1^

      出处:http://www.cnblogs.com/padding1015/

  • 相关阅读:
    关于《注意力模型--Attention注意力机制》的学习
    神经网络参数计算
    FPN(feature pyramid networks)算法讲解
    RetinaNet-focal loss
    论文阅读: RetinaNet
    CNN+LSTM:看图说话
    非极大值抑制-NMS
    python IO文件操作 file文件操作
    软件测试定义 分类
    软件生命周期
  • 原文地址:https://www.cnblogs.com/padding1015/p/7885025.html
Copyright © 2011-2022 走看看