Vuejs によるページのリージョナライゼーションの運用方法

今回は、Vuejs を使用してページのリージョナライゼーションを操作する方法と、Vuejs でページのリージョナライゼーションを操作するための 注意事項 について説明します。実際のケースを見てみましょう。

コンポーネントの利点

Vue を使用してページを作成する場合、大量のデータ ページがレンダリングされ、メイン ページのコード量を簡略化するためにコンポーネントが導入されます。コード領域のブロックがほぼ同じ場合、コンポーネントのカプセル化によりコードがさらに簡素化されます。コンポーネントは、Vue.js の最も強力な機能の 1 つです。

コンポーネントは

HTML 要素を拡張して、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式にすることもできます。

私が読書ソフトウェアに使用する書籍リストの例:

ブック表示ページ。vue を使用してこのページのフロントエンド ページを実装する方法を考えてから、論理関数を実装します。 画像の「おすすめの本」と「最新の本」の一覧表示は同じです。以前に書いた「おすすめの本」のコードをコピーすることで、簡単に「最新の本」を実現できます。

のページ。 他のページでもこの表示が必要な場合、またはコードをより簡潔にしたい場合は、コンポーネントをカプセル化する方法が役に立ちます

概要ページ: 書籍リスト表示ページ - 書籍リストコンポーネント

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

基本的な部分については、Vue を使用したことがある人なら誰でもその使い方を知っていると思います。コードに直接進みます。 コンポーネントを作成する - コンポーネントを登録する - コンポーネントを使用する

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

Vue2.0 では、コンポーネントを導入するときは、Vue がコンポーネントをより適切に識別できるように、Use - を使用してコンポーネントを分離することを推奨します

。 コンポーネントをカプセル化するコードはこれまでにアップロードされていません。コードを直接アップロードしてください:

書籍リストページ - 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>

開発プロセスでは、API インターフェイスを使用してデータを取得します。実際には、多くのコードがありますが、原理は同じです。見てみてください

れぇぇぇぇぇぇ

コンポーネント - 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>

|- コンポーネント - BookList.vue - html

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

|- コンポーネント - BookList.vue - css

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

すべてのコードはここにあります。コンポーネントのカプセル化が実際には以前の JavaScript 関数のカプセル化と同じであることがわかります。コードを直接コピーして実行できます。コメントに説明があります。

ヒント

親コンポーネントは子コンポーネントのメソッドを呼び出します:

子コンポーネントに次のような名前を書きます:

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

呼び出し方法:

でも

データ遅延のため、サブコンポーネントを呼び出すときに未定義のイベントが頻繁に発生します: this.$refs.contTimer.countTime(60)

未定義のプロパティ 'countTime' を読み取れません

解決策は

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

です

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 TypeError:

推奨読書:

webpack2+Reactの使い方の詳しい説明

JQUERYは現在のタグ名を通して属性の値を取得します

以上がVuejs によるページのリージョナライゼーションの運用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。