Wie Vuejs die Seitenregionalisierung durchführt

Dieses Mal zeige ich Ihnen, wie Sie die Seitenregionalisierung mit Vuejs durchführen.

Vorteile von Komponenten

Wenn ich Vue zum Schreiben von Seiten verwende, werden viele Datenseiten gerendert und Komponenten eingeführt, um die Codemenge der Hauptseite zu vereinfachen. Wenn die Codebereichsblöcke fast gleich sind, wird der Code durch die Komponentenkapselung noch mehr vereinfacht. Komponenten sind eine der leistungsstärksten Funktionen von Vue.js.

Komponenten können das

HTML-Element

erweitern, um wiederverwendbaren Code zu kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form von nativen HTML-Elementen vorliegen, erweitert um das Attribut is. Ich verwende ein Buchlistenbeispiel aus einer Lesesoftware:

Sie können darüber nachdenken, wie Sie die Front-End-Seite dieser Seite mit Vue implementieren und dann die logische Funktion implementieren Die im Bild gezeigte Listenanzeige der „empfohlenen Bücher“ und „neuesten Bücher“ ist dieselbe. Sie können wiederholten Code verwenden, um den Code der „empfohlenen Bücher“, den Sie zuvor geschrieben haben, zu kopieren und die „neuesten Bücher“ leicht zu erkennen. Seite.

Wenn andere Seiten diese Anzeige ebenfalls benötigen oder ich möchte, dass der Code prägnanter ist, ist die Kapselung der Komponenten hilfreich

Kurzseite: Seite zur Anzeige der Buchliste – Buchlistenkomponente

Für den grundlegenden Teil glaube ich, dass jeder, der Vue verwendet hat, weiß, wie man es verwendet. Ich werde direkt zum Code gehen:

|- book.vue // 图书展示页面
 |-- BookList.vue // 图书列列表组件

Erstellen Sie eine Komponente – registrieren Sie die Komponente – verwenden Sie die Komponente

Vue2.0 schreibt vor, dass bei der Einführung von Komponenten die Benennung von Kamelfällen empfohlen wird, um sie bei der Verwendung zu trennen, damit Vue sie besser identifizieren kann

Der Code, der zuvor nicht gekapselt wurde, wird nicht hochgeladen. Bitte laden Sie den Code direkt hoch:

// 引入组件
import BookList from '../../components/bookList/BookList.vue';
// 注册组件
components:{
 BookList,
},
// 使用组件
<book-list></book-list>

Buchlistenseite – book.vue

Während des Entwicklungsprozesses verwende ich die API-Schnittstelle, um die Daten abzurufen. Es gibt viele dieselben Codes, aber die Prinzipien sind dieselben Schauen Sie es sich an

|- book.vue - html 页面
 <template> 
  <p>
  <h2>欢迎来到波波图书馆!</h2>
     
  <!-- 推荐读书 -->
  <section class="box recommend-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="recommendArray" heading="推荐图书"></book-list>
  </section>
  <!-- 最新图书 -->
  <section class="box update-book">
   <!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
   <book-list :books="updateBookArray" heading="最新图书"></book-list>
  </section>
  </p>
 </template>

Komponente – BookList.vue

|- book.vue - js 
<script>
 import BookList from '../../components/bookList/BookList.vue';
 export default({
  data(){
    return {
    // 推荐图书
    recommendArray:[
     {
      id:1,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-1',
      book_author:'liangfengbo',
     },
     {
      id:2,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-2',
      book_author:'liangfengbo',
     },
     {
      id:3,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-3',
      book_author:'liangfengbo',
     },
    ],
    // 最新图书
    updateBookArray:[
     {
      id:5,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-5',
      book_author:'liangfengbo',
     },
     {
      id:6,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-6',
      book_author:'liangfengbo',
     },
     {
      id:7,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-7',
      book_author:'liangfengbo',
     },
    ],
   }
  },
  // 引入组件
  components:{
   BookList,
  },
  methods : {
     
  },
 })
</script>

|- book.vue - css
<style>
 *{
  margin: 0;
  padding: 0;
 }
 li{
  list-style:none;
 }
  .box{
  height: auto;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px 0;
 }
</style>

|- Komponente – BookList.vue – html

|- 组件 - BookList.vue - html
<template>
 <p>
  <!-- 头部 -->
  <!--这个是页面传来的标题 -->
  <h3 class="heading">{{heading}}</h3>
  <!-- 列表 -->
  <article class="book-list">
   <!-- 遍历图书数据 -->
   <li v-for="book in books">
    <router-link :to="{ name:&#39;BookDetail&#39;,params:{ id: book.id }}">
     ![](book.img_url) <!-- 图书图片 -->
     {{book.book_name}} <!-- 图书名字 -->
    </router-link>
   </li>   
   </article>
 </p>
</template>

|- Komponente – BookList.vue – CSS

<script>
 export default({
  // props 数据传递的意思
  props:[
   'heading',//标题
   'books',//图书对象数组
  ],
  data(){
   return {
  
   }
  },
  methods : {
     
  },
 })
</script>

Der gesamte Code ist hier, um herauszufinden, dass die Komponentenkapselung tatsächlich mit unserer vorherigen JavaScript-Funktionskapselung übereinstimmt. Sie übergibt Parameter, empfängt Parameter, rendert Daten und verwendet sie direkt Ein Blick. Es gibt Erklärungen in den Kommentaren.

<style scoped>
  /*图书列表*/
 .book-list {
  width:100%;
  height:128px;
  display: flex;
  justify-content: space-around;
 }
 .heading {
  border-left: 4px solid #333;
  margin: 10px 0;
  padding-left: 4px;
 }
 .book-list li {
  width:80px;
  height: 100%;
  flex:1;
  margin:0 10px;
 }
 .book-list li img{
  height: 100px;
  width: 100%;
 }
 .book-list li a{
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
 }
</style>

Tipps

Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf: Schreiben Sie einen Namen auf die Unterkomponente, z. B.:

Aufrufmethode:

<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>

Aber

this.$refs.contTimer.countTime(60) Aufgrund der Datenverzögerung treten beim Aufruf von Unterkomponenten häufig undefinierte Ereignisse auf:

Die Eigenschaft „countTime“ von undefiniert kann nicht gelesen werden

Die Lösung ist

TypeError:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

// 调用时加一个定时器
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)

Detaillierte Erläuterung der Verwendung von webpack2+React

JQUERY ruft den Wert des Attributs über den Strom ab Tag-Name

Das obige ist der detaillierte Inhalt vonWie Vuejs die Seitenregionalisierung durchführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!