집 > 기사 > 웹 프론트엔드 > Vuejs가 페이지 지역화를 작동하는 방법

Vuejs가 페이지 지역화를 작동하는 방법

php中世界最好的语言원래의: 2018-04-18 10:48:222030검색

이번에는 Vuejs를 사용하여 페이지 지역화를 수행하는 방법과 Vuejs가 페이지 지역화를 수행할 때 주의사항에 대해 설명하겠습니다.

구성 요소의 이점

Vue를 사용하여 페이지를 작성할 때 많은 양의 데이터 페이지가 렌더링되고, 메인 페이지의 코드 양을 단순화하기 위해 구성 요소가 도입됩니다. 코드 영역 블록이 거의 동일할 때 구성 요소 캡슐화를 사용하면 코드가 더욱 단순화됩니다. 구성 요소는 Vue.js의 가장 강력한 기능 중 하나입니다.

구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js 컴파일러가 특별한 기능을 추가하는 사용자 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소의 형태일 수도 있습니다.

소프트웨어 읽기에 사용하는 도서 목록의 예:

책 표시 페이지를 사용하여 이 페이지의 프런트 엔드 페이지를 구현한 다음 논리 기능을 구현하는 방법을 생각해 볼 수 있습니다. 사진에 보이는 '추천도서'와 '최근도서' 목록 표시는 동일하며, 반복되는 코드를 이용하여 이전에 작성했던 '추천도서'의 코드를 복사하여 '최신도서'를 쉽게 구현하실 수 있습니다.

페이지. 다른 페이지에도 이 표시가 필요하거나 코드를 더 간결하게 만들고 싶다면 구성 요소를 캡슐화하는 방법이 유용할 것입니다

간단한 페이지: 도서 목록 표시 페이지 - 도서 목록 구성 요소

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

기본적인 부분에 대해서는 Vue를 사용해 본 사람이라면 누구나 사용법을 알고 있다고 생각합니다. 바로 코드로 넘어가겠습니다.

구성 요소 만들기 - 구성 요소 등록 - 구성 요소 사용

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

Vue2.0에서는 컴포넌트를 도입할 때 Camel Case 명명을 사용하는 것이 좋습니다. 사용 시 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 인터페이스를 사용합니다. 사실 코드는 많지만 원리는 동일합니다. 좀 보세요

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

그런데

데이터 지연으로 인해 하위 구성 요소를 호출할 때 정의되지 않은 이벤트가 자주 발생합니다. this.$refs.contTimer.countTime(60)

但是

因为有数据的延迟经常会出现调用子组件的事件出现undefined的事情：

TypeError:

TypeError: 정의되지 않은 'countTime' 속성을 읽을 수 없습니다

해결책은

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!