Home > Web Front-end > JS Tutorial > body text

Vue header component development example code

小云云
Release: 2018-01-31 10:05:12
Original
1708 people have browsed it

This article mainly introduces you to the detailed explanation of Vue header component development and gives you a reference. I hope you will have a deeper understanding of Vue component development.

1. Data transmission in header component development

1. App.vue introduces components


##

import header from './components/header/header'
Copy after login

2. Register the component in App.vue


 export default {
   components:{
     v-header:header
   }
 }
Copy after login

3. Use the component


<v-header :sell="sellerObj"></v-header>
Copy after login

Explanation:: sell="sellerObj", here it is treated as a formal parameter just like a function parameter, sellerObj is the actual parameter, so how are the actual parameters of the parent component passed to the child component, and through what method

4. Parent Component passes data to sub-component

In the parent component, sellerObj needs to be exported as data. The sub-component obtains data from the parent component through props and the data type must be specified


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

Summary:

  1. The child component creates a property in props to receive the value passed by the parent component

  2. Parent Register the subcomponent in the component

  3. Add the attribute created in the subcomponent props to the subcomponent tag

  4. Pass the value that needs to be passed to the subcomponent Assign this attribute

5. Call data


<p class="logo">
 <img :src="sell.avatar" alt="" width=&#39;64&#39; height=&#39;64&#39;/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
  {{sell.description + &#39;/&#39; + sell.deliveryTime + &#39;分钟送达&#39;}}
</p>
Copy after login

Details:

support When binding data Reason for adding v-if ='sell.supports'

: Before we get the data through axios, we create an empty object sellerObj in the parent component and pass it to the child component first. If no data is sent at first, an error will be reported. Underfined, plus v-if, will not parse if it cannot receive data, and no error will be reported.

2. Header component pop-up layer (details)

1. Pop-up mask layer

(1) Set one State, determine the state to control display and hide


data (){
 return {
 detailShow:false
 }
}
Copy after login


<p v-if="detailShow" class="detail"></p>
Copy after login

(2) Bind the click event, change the state through the methods method, and control the display Invisible effect


<p class="bulletin-wrapper" @click="showDetails()" ></p>
<p class="detail-close" v-if="sell.supports">
  <i class="icon-close" @click="hideDetail()"></i>
</p>
Copy after login


methods:{
 showDetails () {
  this.detailShow=true
 },
 hideDetail () {
 this.detailShow=false
 }
}
Copy after login

2. Star rating

(1) Binding class The type that controls the star size


// 利用 computed 属性
<p class="star" :class="starSizeType"></p>
Copy after login


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

(2) Traverse the number of stars

Copy Code The code is as follows:



(3) Define constants to control the status of each star


// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = &#39;on&#39; // 全星
const CLS_HALF = &#39;half&#39; // 半星
const CLS_OFF = &#39;off&#39;// 空星
Copy after login

(4) Judge each star through calculation The type of 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;   
 }
}
Copy after login

(5) Add a class name to span by dynamically binding class


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

Related Recommended:


Detailed explanation of jQuery setting request information instance in header

Detailed explanation of php sending custom data through header

Summary of usage of php header

The above is the detailed content of Vue header component development example code. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!