vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定

 更新时间:2018年09月14日 10:51:48   作者:nDos   我要评论

这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识,本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下

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

首先美化一下界面 - 相关的界面代码不粘贴,可从我的 github 分支中看到。下面最终的实现效果图:

改造下 data 中的 navs 属性 ( navs 数组每个元素都是 包含 active 和 data 属性的对象 ):

created: function () {
 fetch('https://www.apiopen.top/journalismApi')
  .then(v => v.json())
  .then(v => {
  this.tts = v.data.toutiao
  this.navs = v.data
  console.log(this.navs);
  Reflect.ownKeys(v.data).forEach((key, index) => {
   this.navs[key] = {
   active: key === 'toutiao',
   data: this.navs[key]
   }
  })
  })
 }

其中的 active 用来标识 button,data 是新闻资讯的数据。

改造 <div class="nav"> 标签:

<div class="nav">
  <div v-for="(value, key, index) in navs"
  :key="index"
  :class="{ active: value.active }"
  @click="changeNav(key)"
  >
  {{key}}
  </div>
</div>

其中加入 :class="{ active: value.active }" ,当前 button 是激活时,增加 .active。@click="changeNav(key)",当点击 button 执行组件中定义的 changeNav 函数,并传入 key 作为参数。

 methods: {
 changeNav: function(akey){
  Reflect.ownKeys(this.navs).forEach((key, index) => {
  this.navs[key].active = akey === key && (this.tts = this.navs[key].data);
  })
 }
 },

以上是组件中定义的 changeNav 方法。 代码中仅仅改变了 navs 数组中每个 avtive 的值,便可以切换 button 的选中状态;而 this.tts = this.navs[key].data 则是当 button 选中时替换组件 tts 属性指向的对象。

以上,介绍了方法定义、指令、class 绑定的内容,也介绍了如何动态的渲染和切换。

插值技术这里仅仅用到 {{ 组件属性 }} 的方式,还有很多其他的方式;计算属性是根据组件已有的属性,计算出来的“属性”,也不是高深的内容;事件处理仅介绍简单的函数执行,还有事件修饰符;这些内容请参阅 vue 官方教程学习。

关于条件渲染和列表渲染通过两篇文章的学习,应该掌握基本的用法。v-show 和 v-if 的区别也要注意 ( 性能上有差别 );列表渲染也有注意地方,还有列表过滤;这些内容请参阅 vue 官方教程学习。

总结

以上所述是小编给大家介绍的vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue 页面状态保持页面间数据传输的一种方法(推荐)

    Vue 页面状态保持页面间数据传输的一种方法(推荐)

    vue router给我们提供了两种页面间传递参数的方式,一种是动态路由匹配,一种是编程式导航,接下来通过本文给大家介绍Vue 页面状态保持页面间数据传输的一种方法,需要的朋友可以参考下
    2018-11-11
  • vue打包使用Nginx代理解决跨域问题

    vue打包使用Nginx代理解决跨域问题

    这篇文章主要介绍了vue打包使用Nginx代理解决跨域问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue通过路由实现页面刷新的方法

    vue通过路由实现页面刷新的方法

    本篇文章主要介绍了vue通过路由实现页面刷新的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue header组件开发详解

    Vue header组件开发详解

    本篇文章主要介绍了Vue header组件开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 利用vue + element实现表格分页和前端搜索的方法

    利用vue + element实现表格分页和前端搜索的方法

    众所周知Element 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。下面这篇文章主要给大家介绍了关于利用vue + element实现表格分页和前端搜索的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-12-12
  • vue-cli启动本地服务局域网不能访问的原因分析

    vue-cli启动本地服务局域网不能访问的原因分析

    这篇文章主要介绍了vue-cli启动本地服务,局域网下访问不到的原因分析,在文中还给大家介绍了vue-cli起的webpack项目 用localhost可以访问,但是切换到ip就不可以访问 的原因,本文给大家介绍的非常详细,需要的朋友参考下
    2018-01-01
  • vue 组件的封装之基于axios的ajax请求方法

    vue 组件的封装之基于axios的ajax请求方法

    今天小编就为大家分享一篇vue 组件的封装之基于axios的ajax请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 什么是Vue.js框架 为什么选择它?(第一课)

    什么是Vue.js框架 为什么选择它?(第一课)

    Vue.js框架是什么,为什么要选择它?这篇文章为大家介绍目前前端技术使用的趋势,以及Vue.js的优点和适用场景等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue webuploader 文件上传组件开发

    vue webuploader 文件上传组件开发

    本篇文章主要介绍了vue webuploader 文件上传组件开发,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue 页面加载进度条组件实例

    vue 页面加载进度条组件实例

    下面小编就为大家分享一篇vue 页面加载进度条组件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论