Comment Vuejs opère la régionalisation des pages

Cette fois, je vais vous montrer comment opérer la régionalisation de page avec Vuejs. Quelles sont les précautions pour opérer la régionalisation de page avec Vuejs. Voici des cas pratiques, jetons un oeil.

Avantages des composants

Lorsque j'utilise Vue pour écrire des pages, une grande quantité de pages de données est rendue et des composants sont introduits pour simplifier la quantité de code de la page principale. Lorsque les blocs de zone de code sont presque les mêmes, l'encapsulation des composants simplifiera encore plus le code. Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js.

Les composants peuvent étendre l'élément HTML pour encapsuler du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également se présenter sous la forme d'éléments HTML natifs, étendus avec l'attribut is.

J'utilise un exemple de liste de livres provenant d'un logiciel de lecture :

Page d'affichage du livre. Vous pouvez réfléchir à la façon d'utiliser vue pour implémenter la page frontale de cette page, puis implémenter la fonction logique

; L'affichage de la liste des « livres recommandés » et des « derniers livres » présenté dans l'image est le même. Vous pouvez utiliser un code répété pour copier le code des « livres recommandés » que vous avez écrits auparavant et vous pouvez facilement réaliser les « derniers livres ».

Si d'autres pages ont également besoin de cet affichage, ou si je souhaite que le code soit plus concis, alors comment encapsuler les composants sera utile

Page de synthèse : Page d'affichage de la liste de livres - Composant Liste de livres

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

Pour la partie basique, je pense que tous ceux qui ont utilisé Vue savent comment l'utiliser, je vais passer directement au code :

. Créer un composant - enregistrer le composant - utiliser le composant

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

Vue2.0 stipule que lors de l'introduction des composants, il est recommandé d'utiliser la dénomination en cas de chameau Use - pour les séparer lors de leur utilisation, afin que Vue puisse mieux identifier

. Le code qui n'a pas été encapsulé auparavant ne sera pas téléchargé. Veuillez télécharger le code directement :

. Page de liste de livres - book.vue

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

Je simule des données. Pendant le processus de développement, j'utilise l'interface API pour obtenir les données. En fait, ils sont tous identiques, mais les principes sont les mêmes. j'y jette un oeil

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

Composant - BookList.vue

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

|- Composant - BookList.vue - html

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

|- Composant - BookList.vue - css

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

Tout le code est ici. Vous pouvez découvrir attentivement que l'encapsulation des composants est en fait la même que notre précédente encapsulation de fonctions JavaScript. Elle transmet les paramètres, reçoit les paramètres, restitue les données et les réutilise. Vous pouvez directement copier le code et l'exécuter pour l'avoir. un coup d'oeil. Il y a des explications dans les commentaires.

Conseils

Le composant parent appelle la méthode du composant enfant :

Écrivez un nom sur le sous-composant tel que :

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

Méthode d'appel : this.$refs.contTimer.countTime(60)

Mais

En raison du retard des données, des événements non définis se produisent souvent lors de l'appel de sous-composants :

TypeError: Impossible de lire la propriété 'countTime' de non défini

La solution est

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de webpack2+React

JQUERY obtient la valeur de l'attribut via le courant nom du tag

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!