首頁 >web前端 >js教程 >Vuejs怎麼操作頁面區域化

Vuejs怎麼操作頁面區域化

php中世界最好的语言原創: 2018-04-18 10:48:222136瀏覽

這次帶給大家Vuejs怎麼操作頁面區域化，Vuejs操作頁面區域化的注意事項有哪些，下面就是實戰案例，一起來看一下。

元件的好處

# 當我用vue寫頁面的時候，大量的資料頁面渲染，引入元件簡化主頁面的程式碼量，當程式碼區域區塊程式碼差不多相同時，元件封裝會更簡化程式碼。元件是Vue.js最強大的功能之一。

元件可以擴充HTML元素，封裝可重複使用的程式碼。在較高層面上，元件是自訂的元素，Vue.js的編譯器為它添加特殊功能。在某些情況下，元件也可以是原生HTML元素的形式，以is特性擴充。

我用一個讀書軟體的圖書列表範例：

圖書展示頁大家可以想想用vue如何實現這個頁面的前端頁面實現，再來實現邏輯功能；

# 圖片顯示的'推薦圖書' 和'最新圖書' 的列表展示是一樣的，開始可以用重複的代碼把先寫好的'推薦圖書' 的代碼複製一份就可以輕輕鬆松實現'最新圖書' 頁面

如果其他頁面也需要這個展示，或是我想程式碼更簡潔一點，那麼來元件如何封裝就派上場啦

# 簡要頁：圖書清單展示頁 - 圖書清單元件

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

基礎部分相信使用過vue的伙計都知道如何使用，我直接上程式碼：

建立一個元件 - 註冊元件 - 使用元件

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

vue2.0 規定引入組件建議使用駝峰命名，使用時用 - 分開，vue才更好識別

# 之前沒封裝元件的程式碼就不上傳了，直接上程式碼：

# 圖書列表頁 - 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介面拿數據的，其實都一樣，程式碼有點多，原理都一樣，大家看一下也可以了解一下json的知識

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

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

|- 元件 - BookList.vue - html

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

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

全部的程式碼就在這裡啦，大家可以細心發現，元件封裝，其實就向我們之前JavaScript函數封裝一樣，傳遞參數，接收參數，渲染數據，重複利用，大家可以直接複製程式碼運行看一下，註解有解釋啦。

小乾貨

# 父元件呼叫子元件方法為：

在子元件上寫上名字如：

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

呼叫方法：this.$refs.contTimer.countTime(60)

# 但是

因為有資料的延遲常常會出現呼叫子元件的事件出現undefined的事情：

TypeError: Cannot read property 'countTime' of undefined

解決方法是

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！