<!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. Hyper-V 2016 配置管理系列（准备篇）

    2.1 推荐软硬件配置 2.2 Hyper主机前提准备 前提条件: 具有二级地址转换(SLAT)的64位处理器.要安装Hyper-V虚拟化组件(如Windows管理程序),处理器必须具有SLAT 足够 ...

  2. display：table的几个用法(元素平分宽度，垂直居中)

    DIV+CSS的布局已经让表格布局几乎很少用到,除非表格语义性很强的情况. display:table解决了一部分需要使用表格特性但又不需要表格语义的情况, 尤其是DIV+CSS很不方便解决的问题,比 ...

  3. 关于docker容器内核参数修改问题

    以下内容截取自docker官方文档 地址:https://docs.docker.com/edge/engine/reference/commandline/run/#configure-namesp ...

  4. Python爬虫实战：爬糗事百科的段子

    一个偶然的机会接触了Python,感觉很好用,但是一直在看c++啥的,也没系统学习.用过之后也荒废了许久.之前想建个公众号自动爬糗事百科的段子,但是没能建起来,真是尴尬,代码上传的服务器上之后,不能正 ...

  5. Python风格规范-FYI

    Python风格规范 分号 Tip 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 Tip 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Py ...

  6. hdu-1874 畅通工程续---模板题

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1874 题目大意: 求起点到终点的最短距离 解题思路: 注意重边,其他的就是模板 #include&l ...

  7. 解决linux系统CentOS下调整home和根分区大小《转》

    转自http://www.php114.net/2013/1019/637.html 目标:将VolGroup-lv_home缩小到20G,并将剩余的空间添加给VolGroup-lv_root   1 ...

  8. fast rcnn训练自己数据小结

    1.http://blog.csdn.net/hao529good/article/details/46544163   我用的训练好的模型参数是data/fast_rcnn__models/vgg_ ...

  9. CPP-基础：C_C++变量命名规则

    C_C++变量命名规则 变量命名规则是为了增强代码的可读性和容易维护性.以下为C++必须遵守的变量命名规则: 1. 变量名只能是字母(A-Z,a-z)和数字(0-9)或者下划线(_)组成. 2. 第一 ...

  10. pymysql 简单操作数据库

    #!/usr/bin/env python #-*- coding:utf-8 -*- # author:leo # datetime:2019/4/24 15:22 # software: PyCh ...