<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <script src="js/vue.js"></script>

    <script src="js/axios.min.js" charset="utf-8"></script>

    <style type="text/css">

        .red{color: #f00;font-weight: bold;}

    </style>

    <body>

        <div id="app">

            <ul v-for="(item,index) in items" v-if="index<=5" v-bind:class="{red:index % 2 !=0}">

                <li>{{item.pname}}</li>

                <li>{{item.pid}}</li>

            </ul>

        </div>

        <script type="text/javascript">

            var app = new Vue({

                el:"#app",

                data:{

                    items:"wwwww"

                },

                created:function(){ //此函数先执行

                    var that = this;

                    axios.get("1.json")

                     .then(function(res){

                         that.items = res.data;

                         console.log(this.items)

                     });

                }

            });

        </script>

    </body>

</html>

Vue声明渲染以及axios实例的更多相关文章

  1. vue 源码学习二 实例初始化和挂载过程

    vue 入口 从vue的构建过程可以知道,web环境下,入口文件在 src/platforms/web/entry-runtime-with-compiler.js(以Runtime + Compil ...

  2. day 87 Vue学习六之axios、vuex、脚手架中组件传值

      本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的使用 Axios 是一个基于 promise 的 HT ...

  3. 6. Vue - 声明周期

    一.官方vue生命周期流程图 二.vue声明周期介绍 beforeCreate执行时:data和el均未初始化,值为undefined created执行时:Vue 实例观察的数据对象data已经配置 ...

  4. day 84 Vue学习六之axios、vuex、脚手架中组件传值

    Vue学习六之axios.vuex.脚手架中组件传值   本节目录 一 axios的使用 二 vuex的使用 三 组件传值 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 axios的 ...

  5. 【前端】vue.js环境配置以及实例运行简明教程

    vue.js环境配置以及实例运行简明教程 声明:本文档编写参考如下两篇博客,是对它们的修改与补充,欢迎点击链接查看原文: 原文1:vue.js在windows本地下搭建环境和创建项目 原文2:Vue. ...

  6. vue项目中关于axios的简单使用

    axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 官方仓库:https://github.com/axios/axios 中文文档:htt ...

  7. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  8. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  9. vue 学前班002(创建一个实例)

    创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...

随机推荐

  1. Spring Boot概要

    1.Spring Boot使用“习惯优于配置”(项目中存在大量的配置,此外还内置了一个习惯性的配置)的理念,使用户的项目实现快速运行.通过学习Spring Boot中的配置文件application. ...

  2. iOS 当使用FD_FullscreenPopViewController的时候遇到scrollView右滑手势无法使用的解决

    当我们在ViewController中有scrollView的时候, 可能会遇到右滑无法响应返回手势, 有以下解决办法: 自定义scrollView, 实现该scrollView的以下方法即可: @i ...

  3. Tomcat Stack-8.0.35 (OpenLogic CentOS7.2)

       平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.20 mysql5.6.30 tomcat8.0.35 apache application server basic s ...

  4. map侧连接

    两个数据集中一个非常小,可以让小数据集存入缓存.在作业开始这些文件会被复制到运行task的节点上. 一开始,它的setup方法会检索缓存文件. 与reduce侧连接不同,Map侧连接需要等待参与连接的 ...

  5. PowerShell (407) Proxy Authentication Required

    $Client = New-Object -TypeName System.Net.WebClient $Client.Proxy.Credentials = [System.Net.Credenti ...

  6. Dll注入：X86/X64 远程线程CreateRemoteThread 注入

    远线程注入原理是利用Windows 系统中CreateRemoteThread()这个API,其中第4个参数是准备运行的线程,我们可以将LoadLibrary()填入其中,这样就可以执行远程进程中的L ...

  7. pta 编程题6 树的同构

    其它pta数据结构编程题请参见:pta 题目请参见:树的同构 因题目中左右子树是按照下标给出,因此用数组存放树是更好的方法. 判断两棵树是否同构:用递归的方法.如果当前两个结点都为空,则返回TRUE: ...

  8. 【BZOJ3994】[SDOI2015] 约数个数和（莫比乌斯反演）

    点此看题面 大致题意: 设\(d(x)\)为\(x\)的约数个数,求\(\sum_{i=1}^N\sum_{j=1}^Md(i·j)\). 莫比乌斯反演 这是一道莫比乌斯反演题. 一个重要的性质 首先 ...

  9. 小w的糖果

    题目连接 : https://ac.nowcoder.com/acm/contest/923/C 算是一道找规律的题了,因为后一个人会比前一个人多,可以理解成后一个人要继承前一个人,sum为当前糖果数 ...

  10. solr 近实时搜索

    摘要: Solr的近实时搜索NRT(Near Real Time Searching)意味着文档可以在索引以后马上可以被查询到. Solr不会因为本次提交而阻塞更新操作,不会等待后台合并操作(merg ...