Vue header组件开发详解


Posted in Javascript onJanuary 26, 2018

一、 header 组件开发 之数据的传递

1. App.vue 引入组件

import header from './components/header/header'

2. App.vue 中注册组件

export default {
   components:{
     v-header:header
   }
 }

3. 使用组件

<v-header :sell="sellerObj"></v-header>

解释::sell="sellerObj",这里就像一个函数传参一样把sell当成形参,sellerObj就是实参,那么父组件实参是怎么传给子组件的,通过什么传

4. 父组件向子组件传递数据

在父组件中需要将sellerObj作为数据导出,子组件通过props从父组件中获得数据,且要指定数据类型

export default {
 props:{ // 子组件获取 父组件 数据
 sell:{
  type:Object // 传递的类型 
 }
 }
 }

小结:

  1. 子组件在props中创建一个属性,用以接收父组件传过来的值
  2. 父组件中注册子组件
  3. 在子组件标签中添加子组件props中创建的属性
  4. 把需要传给子组件的值赋给该属性

5. 调用数据

<div class="logo">
 <img :src="sell.avatar" alt="" width='64' height='64'/>
</div>
<span class="name">{{sell.name}}</span>
<div class="description">
  {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</div>

细节问题:

support 绑定数据时 加 v-if ='sell.supports'

理由 : 在我们通过axios获取数据前在父组件中创建了一个空的对象sellerObj 先传给子组件,开始 没有数据传送过去就会报错 underfined,加上 v-if ,接受不到数据就不会解析,也就不会报错。

二、 header 组件弹出层(详情)

1.弹出遮罩层

(1) 设置一个状态,判断该状态控制显示隐藏

data (){
 return {
 detailShow:false
 }
}
<div v-if="detailShow" class="detail"></div>

(2) 绑定点击事件,通过methods 方法改变 状态,控制显隐效果

<div class="bulletin-wrapper" @click="showDetails()" ></div>
<div class="detail-close" v-if="sell.supports">
  <i class="icon-close" @click="hideDetail()"></i>
</div>
methods:{
 showDetails () {
  this.detailShow=true
 },
 hideDetail () {
 this.detailShow=false
 }
}

2. 星级评分

(1) 绑定class 控制星级大小的类型

// 利用 computed 属性
<div class="star" :class="starSizeType"></div>

computed: {
 starSizeType() { // 返回 星级的大小类型 48/36/24
  return 'star-' + this.size;
 }
}

(2) 遍历星星的数量

<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>

(3) 定义常量 控制 每个星的状态

// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = 'on' // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星

(4) 通过计算 判断每个span 的类型

itemClasses () { // 返回一个数组为每个span 的类名 (遍历)
  let spanClassList=[];
  // 利用 实参评分来判断 有几颗全星,半星,空星
 let scores=( Math.floor(this.score * 2) ) / 2 
 let intNum= Math.floor(scores); // 全星个数 
 let HashalfNum= scores % 1 !== 0  // 半星
 for(var i=0;i<intNum;i++){ // 遍历全星的span
 spanClassList.push(CLS_ON)
 }
 if(HashalfNum){ // 如果有半星 加类名
 spanClassList.push(CLS_HALF)
 }
 while(spanClassList.length<LENGTH){// 判断 是否有空星 及个数
 spanClassList.push(CLS_OFF)
 }
  return spanClassList;   
 }
}

(5) 通过 动态绑定class 来 给span 加类名

<div class="star" :class="starSizeType">
 <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
Angular设置别名alias的方法
Nov 08 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
Vue shopCart 组件开发详解
Jan 26 #Javascript
jquery写出PC端轮播图实例
Jan 26 #jQuery
深入理解vue中slot与slot-scope的具体使用
Jan 26 #Javascript
从零开始最小实现react服务器渲染详解
Jan 26 #Javascript
微信小程序模版渲染详解
Jan 26 #Javascript
微信小程序如何获取用户信息
Jan 26 #Javascript
vue实现前进刷新后退不刷新效果
Jan 26 #Javascript
You might like
深入apache host的配置详解
2013/06/09 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
jquery 将disabled的元素置为enabled的三种方法
2009/07/25 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python 实现取多维数组第n维的前几位
2019/11/26 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
python 发送get请求接口详解
2020/11/17 Python
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
创业计划书中包含的9个方面
2013/12/26 职场文书
应届生求职自荐信
2014/07/04 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
volatile保证可见性及重排序方法
2022/08/05 Java/Android