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 相关文章推荐
js停止输出代码
Jul 20 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
jQuery实现类似滑动门切换效果的层切换
Sep 23 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
react路由配置方式详解
Aug 07 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
PHP微信分享开发详解
2017/01/14 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
element中的$confirm的使用
2020/04/26 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python向企业微信发送文字和图片消息的示例
2020/09/28 Python
Linux操作面试题
2015/02/11 面试题
大学毕业生通用自我评价
2014/01/05 职场文书
八年级物理教学反思
2014/01/19 职场文书
设计大赛策划方案
2014/06/13 职场文书
2014年团支部工作总结
2014/11/17 职场文书
运动会100米广播稿
2015/08/19 职场文书
员工工作心得体会
2019/05/07 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书