1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <script src="js/vue.js"></script>
  4.     <script src="js/axios.min.js" charset="utf-8"></script>
  5.     <style type="text/css">
  6.         .red{color: #f00;font-weight: bold;}
  7.     </style>
  8.     <body>
  9.         <div id="app">
  10.             <ul v-for="(item,index) in items" v-if="index<=5" v-bind:class="{red:index % 2 !=0}">
  11.  
  12.                 <li>{{item.pname}}</li>
  13.                 <li>{{item.pid}}</li>
  14.             </ul>
  15.         </div>
  16.  
  17.         <script type="text/javascript">
  18.             var app = new Vue({
  19.                 el:"#app",
  20.                 data:{
  21.                     items:"wwwww"
  22.                 },
  23.                 created:function(){ //此函数先执行
  24.                     var that = this;
  25.                     axios.get("1.json")
  26.                      .then(function(res){
  27.                          that.items = res.data;
  28.                          console.log(this.items)
  29.                      });
  30.                 }
  31.  
  32.             });
  33.         </script>
  34.     </body>
  35. </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. LeetCode Missing Number （简单题）

    题意: 给一个含有n个整数的数组,数组中的元素应该是0-n.现在缺了其中某1个,找出缺少的那个整数? 思路: 0-n的总和是可以直接计算的,而缺少的那个就是sum减去数组的和. int missing ...

  2. Dll注入：注册表注入

    在系统中每一个进程加载User32.dll时,会受到DLL_PROCESS_ATTACH通知,当User32.dll对其进行处理时,会取得注册表键值HKEY_LOCAL_MACHINE\Softwar ...

  3. C语言的一小步—————— 一些小项目及解析

    ——-------- 仅以此献给东半球第二优秀的C语言老师,黑锤李某鸽,希望总有那么一天我们的知识可以像他的丰臀一样渊博! bug跟蚊子的相似之处: 1.不知道藏在哪里. 2.不知道有多少. 3.总是 ...

  4. 写在Github被微软收购之际 - Github的那些另类用法

    这几天朋友圈被微软75亿美元收购Github的新闻刷屏了.Jerry也来贡献一篇和Github相关的文章. 这篇文章包含了Jerry平时对于Github的一些另类用法.目录如下: 1. 部署HTML应 ...

  5. JavaScript: apply ， call 方法

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  6. 2018.5.29 Oracle连接到空闲例程

    解决方法如下: 1.通过cmd命令窗启动Oracle:(最好是以管理员身份启动) C:\Users\Administrator>sqlplus /nolog SQL>conn /as sy ...

  7. python_38_try-except异常处理语句及raise的使用

    # i=10 # print(30/(i-10)) # #程序将会出现以下报错信息 # # Traceback (most recent call last): # # File "C:/U ...

  8. vue-cli npm run build 打包问题 webpack@3.6

    1, vue-router 路由 有两个模式 (mode) hash (默认模式) 使用URL来模拟一个完整的URL 但是没个URL都会带上 "#/'' 支持所有浏览器 这个模式使用 red ...

  9. AngularJS1.X版本双向绑定九问

    前言 由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理.话不多说,进入正题. 1.双向绑定的原理是什么? Angual ...

  10. LOJ#6342. 跳一跳(期望)

    题意 $n \leqslant 10^5$ Sol 随便推一推就好了吧.. $f[i] = \frac{f[i] + f[i +1] + \dots f[n]}{n - i + 1} + 1$ 移一下 ...