So entwickeln Sie über die Header-Komponente in Vue (ausführliches Tutorial)

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Entwicklung von Vue-Header-Komponenten vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

1. Datenübertragung für die Entwicklung von Header-Komponenten

1. Komponenten in App.vue registrieren

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

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

3. Verwenden Sie die Komponente

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

Erläuterung: :sell="sellerObj", hier wird es als formaler Parameter behandelt, genau wie eine Funktion, die Parameter übergibt, sellerObj ist der eigentliche Parameter, dann die übergeordnete Komponente tatsächlicher Parameter Wie wird er an die untergeordnete Komponente übergeben und über welche Methode

4 Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente

In der übergeordneten Komponente muss sellerObj als Daten exportiert werden. und die untergeordnete Komponente erhält sie von der übergeordneten Komponente über props. Erhalten Sie Daten in und geben Sie den Datentyp an.

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

Zusammenfassung:

1. Die untergeordnete Komponente erstellt eine Eigenschaft in props Erhalten Sie den von der übergeordneten Komponente übergebenen Wert

2. Registrieren Sie die Unterkomponente in der übergeordneten Komponente

3. Fügen Sie die in den Unterkomponenten-Requisiten erstellten Eigenschaften zur Unterkomponente hinzu Tag

4. Weisen Sie dem Attribut den Wert zu, der an die Unterkomponente übergeben werden muss

5. Aufrufen von Daten

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

Details:

Support-Bindung v-if ='sell.supports' hinzufügen

Grund für Daten: Bevor wir die Daten über Axios erhalten, erstellen wir ein leeres Objekt sellerObj in der übergeordneten Komponente und übergeben es Wenn zunächst keine Daten gesendet werden, wird ein unterdefinierter Fehler gemeldet. Wenn die Daten nicht empfangen werden können, wird kein Fehler gemeldet.

2. Popup-Ebene der Kopfzeile (Details)

1. Popup-Maskenebene

(1 ) Legen Sie einen Status fest, bestimmen Sie den Status zur Steuerung der Anzeige und des Ausblendens

data (){
 return {
 detailShow:false
 }
}

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

(2) Binden Sie das Klickereignis, ändern Sie den Status über die Methodenmethode und steuern Sie den sichtbaren und ausgeblendeten Effekt

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

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

2. Sternebewertung

(1) Bindeklasse zur Steuerung der Art der Sterngröße

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

rrree

(2) Durchlaufe die Anzahl der Sterne

Code kopieren Der Code lautet wie folgt:

c02682dc90da8519640948331dabf54a54bdf357c58b8a65c66d7c19c8e4d114

(3) Definieren Sie Konstanten, um den Status jedes Sterns zu steuern

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

(4) Bestimmen Sie den Typ jeder Spanne durch Berechnung

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

(5) Klasse dynamisch an einen Klassennamen binden

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Projektentwicklung reagieren

Verwendung von Vue zur Implementierung der sekundären Routeneinstellungsmethode

Verwenden Sie mint-ui, um den dreistufigen Verknüpfungseffekt von Provinzen und Gemeinden zu erzielen

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie über die Header-Komponente in Vue (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!