vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造


Posted in Javascript onSeptember 14, 2018

我的 github 地址 - vue3.0Study - 阶段学习成果都会建立分支。

helloworld.vue 都挪到 about 路由当中。

<template><div class="about"><HelloWorld msg="vue 官方相关资料的链接"/></div></template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default { name: 'about', components: { HelloWorld } }
</script>

下面我们开始整理玩转 home.vue,后台数据使用 https://www.apiopen.top/journalismApi

先贴出 script 代码:

export default {
 name: 'home',
 data: function (){
 return {
  navs: {},
  tts:[]
 }
 },
 created: function (){
 fetch('https://www.apiopen.top/journalismApi')
 .then(v=>v.json())
 .then(v=>{
  console.log(v.data);
  this.tts = v.data.toutiao;
  this.navs = v.data;
 });
 }
}

home.vue 组件有了两个属性:navs 和 tts 属性。在 template 中使用如下代码:

<template>
 <div class="home">
 <div class="nav">
  <div v-for="(value, key, index) in navs" :key="index">
  {{key}}
  </div>
 </div>
 <ul>
  <li v-for="(tt,index) in tts" :key="index">
  {{tt.title}}
  </li>
 </ul>
 </div>
</template>

这个改造过程比较简单,就不多介绍。也建立一个 git 分支上传。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript进阶教程(第四课第一部分)
Apr 05 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
js实现百度登录窗口拖拽效果
Mar 19 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 #Javascript
node中的session的具体使用
Sep 14 #Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 #Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
Sep 14 #Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 #Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 #Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 #Javascript
You might like
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
详解Python中for循环的使用方法
2015/05/14 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
python编程开发之日期操作实例分析
2015/11/13 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python实现彩色图转换成灰度图
2019/01/15 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python自定义时钟类、定时任务类
2021/02/22 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
纪伊国屋新加坡网上书店:Kinokuniya新加坡
2017/12/29 全球购物
政府门卫岗位职责
2014/04/29 职场文书
单位承诺书格式
2014/05/21 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
体育教师个人工作总结
2015/02/09 职场文书
话题作文之自信作文
2019/11/15 职场文书