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 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
Jan 06 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 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 分页原理分析,大家可以看看
2009/12/21 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
js添加table的行和列 具体实现方法
2013/07/22 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
2014/08/27 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
js实现数字滚动特效
2019/12/16 Javascript
解决Antd Table表头加Icon和气泡提示的坑
2020/11/17 Javascript
对python中raw_input()和input()的用法详解
2018/04/22 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
django下创建多个app并设置urls方法
2020/08/02 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
法国珠宝店:CLEOR
2017/01/29 全球购物
国际贸易专业个人求职信格式
2014/02/02 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
新学期教师寄语
2014/04/02 职场文书
物理课外活动总结
2014/08/27 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
工作态度不好检讨书
2015/05/06 职场文书
结婚幸福感言
2015/08/01 职场文书
初一数学教学反思
2016/02/17 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers