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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php 读取shell管道传输过来的内容
2010/03/01 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
redis+php实现微博(二)发布与关注功能详解
2019/09/23 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
COS美国官网:知名服装品牌
2019/04/08 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
运动会入场解说词300字
2014/01/25 职场文书
和解协议书
2014/04/16 职场文书
施工安全责任书范本
2014/07/24 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
幼儿园个人总结
2015/02/28 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
Python图片验证码降噪和8邻域降噪
2021/08/30 Python