How Vuejs operates page regionalization-JS Tutorial-php.cn

This time I will show you how to use Vuejs to operate page regionalization. What are the precautions for Vuejs to operate page regionalization? The following is a practical case, let’s take a look.

Benefits of components

When I use vue to write pages, a large amount of data pages are rendered, and components are introduced to simplify the code amount of the main page. When the code area blocks are almost the same, component encapsulation will simplify the code even more. Components are one of the most powerful features of Vue.js.

Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a custom element to which Vue.js's compiler adds special functionality. In some cases, components can also be in the form of native HTML elements, extended with the is attribute.

I use a book list example from a reading software:

Book display page. You can think about how to use vue to implement the front-end page of this page, and then implement the logical function;

The list display of 'recommended books' and 'latest books' shown in the picture is the same. You can use repeated code to copy the code of 'recommended books' that you have written before and you can easily realize the 'latest books' page.

If other pages also need this display, or I want the code to be more concise, then how to encapsulate the components will come into play

Brief page: Book list display page - Book list component

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

Copy after login

For the basic part, I believe everyone who has used vue knows how to use it. I will go directly to the code:

Create a component - Register component - Use component

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

Copy after login

Vue2.0 stipulates that when introducing components, it is recommended to use camel case naming. Use - to separate them when using them, so that Vue can better identify them

The code that has not been encapsulated before will not be uploaded. Just upload the code:

Book list page - 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>

Copy after login

I am simulating data. During the development process, I use the API interface to get the data. In fact, they are all the same. There are a lot of codes, but the principles are the same. You can also learn about json by taking a look at it

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

Copy after login

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

Copy after login

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

Copy after login

|- Component - BookList.vue - html

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

Copy after login

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

Copy after login

All the code is here. You can carefully find that component encapsulation is actually the same as our previous JavaScript function encapsulation. It passes parameters, receives parameters, renders data, and reuses it. You can directly copy the code and run it to take a look. There are explanations in the comments. La.

小干物

The parent component calls the child component method:

Write a name on the subcomponent such as:

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

Copy after login

Calling method: this.$refs.contTimer.countTime(60)

but

Because of data delay, undefined events often occur when calling subcomponents:

TypeError: Cannot read property 'countTime' of undefined

The solution is

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!