ホームページ > 記事 > ウェブフロントエンド > Vueヘッダーコンポーネントの開発サンプルコード

Vueヘッダーコンポーネントの開発サンプルコード

小云云オリジナル: 2018-01-31 10:05:121662ブラウズ

この記事では主にVueヘッダーコンポーネント開発について詳しく解説していますので、ぜひ参考にしてVueコンポーネント開発について理解を深めていただければ幸いです。

1. ヘッダーコンポーネント開発におけるデータ送信

1. App.vue でコンポーネントを導入

import header from &#39;./components/header/header&#39;

2. コンポーネントを App.vue に登録します

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

説明: :sell="sellerObj"、ここでは、sell は関数パラメータと同様に仮パラメータとして扱われ、sellerObj は実際のパラメータです。したがって、親コンポーネントの実際のパラメータはどのように子コンポーネントに渡され、どのメソッド

4 . 親コンポーネントは子コンポーネントにデータを転送します

親コンポーネントでは、sellerObjをデータとしてエクスポートする必要があり、子コンポーネントはpropsを介して親コンポーネントからデータを取得する必要があります

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

概要:

子コンポーネントは、親コンポーネントから渡された値を受け取るためにpropsに属性を作成します

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

詳細:

support v-if ='sell.supports を追加します。 ' データをバインドするとき

理由: この場合、axios を通じてデータを取得する前に、親コンポーネントで空のオブジェクト sellObj が作成され、最初にデータが送信されない場合、アンダーファインエラーが報告されます。 v-if を付加すると、データを受信できない場合は解析されず、エラーが報告されます。

2. ヘッダーコンポーネントのポップアップレイヤー（詳細）

1. ポップアップマスクレイヤー

(1) 状態が表示または非表示を制御するかを設定します

<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>

data (){
 return {
 detailShow:false
 }
}

(2) クリックイベントをバインドし、メソッドメソッドを通じて状態を変更し、表示および非表示の効果を制御します

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

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

2. 星評価

(1) バインドクラス星のサイズの種類を制御します

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

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

(2) 星の数をトラバースします

コードをコピーします
コードは次のとおりです:

2f22a7dcfd81b6875c79da8a0ff0950f54bdf357c58b8a65c66d7c19c8e4d114

(3) 各スターのステータスを制御する定数を定義します

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

(4) 各スパンの型を計算により決定する

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

(5) クラスを動的にバインディングしてスパンにクラス名を追加する

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;   
 }
}

Vueヘッダーコンポーネントの開発サンプルコード

関連記事