Vue.js 소개:구성 요소

Vue 소개js

Vue.js는 Evan You가 만들어 2014년 발표한 경량급 MVVM 프레임워크다.구성 요소 기반 프레임워크입니다.이 정의는 Vue의 구조를 나타냅니다.js 응용 프로그램, 그 중에서 끼워 넣은 구성 요소가 서로 간에 데이터를 전달하여 응용 프로그램의 기능을 실현한다.본 소개에서 우리는 기본 구성 요소를 어떻게 만들고 가져오는지, 구성 요소의 '템플릿' 부분에서 어떻게 작동하는지, 그리고 v-bind, v-for, v-on 명령을 어떻게 사용하는지 이해할 것이다.다음 글은 구성 요소의 '스크립트' 부분이 어떻게 작동하는지, v-model 명령이 어떻게 작동하는지, '$emit' 방법으로 데이터를 보여주고 전달하는지, '마운트' 생명주기를 어떻게 사용하는지 알아보겠습니다.먼저 Vue 구성 요소입니다.

예제 응용 프로그램 정보

이 예에서는 두 개의 Vue로 구성된 매우 간단한 애플리케이션을 보여 줍니다.js 구성 요소, 응용 프로그램.vue 및 PlantSearch.vue.응용 프로그램.vue는 사용자의 검색 입력을 캡처하는 PlantSearch 구성 요소를 템플릿에 표시합니다.제출할 때,searchPlant 함수를 호출합니다. 이 함수는 우리express 서버에 요청을 보내고,express 서버는trefle에서plant 대상 그룹을 보냅니다.io API.이러한 정보는 순차적으로 응용 프로그램에 나타난다.템플릿

Vue의 구성 요소

관례에 따르면, Vue.js 파일 및 어셈블리는 PascalCase 이름에 따라 각 단어의 첫 글자를 대문자로 지정합니다.Vue의 단일 파일 구성 요소는 세 부분으로 구성됩니다.js;템플릿, 스크립트 및 스타일PlantSearch의 PlantSearch 어셈블리에서 사용할 예입니다.vue 파일.PlantSearch 어셈블리의 기능에 대해 자세히 알아보겠습니다.현재, 우리는 단지 이 구성 요소의 가장 기본적인 기본 기능을 설명하고 싶을 뿐이다.

<template>
  <div class="search">
    <form @submit.prevent="handleSubmit">
      <label>Search A Plant</label>
      <input v-model="plant"/>
      <button>Submit Search</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'plant-search',
    data () {
      return {
        plant: ''
      }
    },
    methods: {
      handleSubmit(){
        this.$emit('search:plant', this.plant);
      }
    }
  }
</script>
<style>
  .search {
    color: blue
  }

</style>

HTML, 특히 검색 양식이 포함된 템플릿이 먼저 나타납니다.어셈블리를 렌더링하면 다음 내용이 표시됩니다.스크립트 태그 사이에 export 문구가 있습니다. 이 예에는 구성 요소의 내보내기 이름, 데이터 (React.js의 상태와 유사), methods 대상의handleSubmit 방법이 포함되어 있습니다.스크립트 태그에서 대부분의 JavaScript가 삭제됩니다.우리가 잠시 후에 응용 프로그램 구성 요소를 볼 때, 이 점은 분명해진다.
단일 페이지 PlantSearch 구성 요소의 마지막 부분은 스타일 레이블입니다.이것이 바로 템플릿 요소와 관련된 CSS를 배치하는 곳입니다.이 예에서, 우리는 텍스트를 파란색으로 바꾸는 상당히 간단한 지령을 내렸다.

DOM에 어셈블리 첨부

Vue의 루트 인스턴스에 하나 이상의 단일 파일 어셈블리를 첨부해야 합니다.js.이 루트 인스턴스는 순차적으로 색인에 있는 DOM 요소에 첨부됩니다.html.우리의 예시에서, 색인에 명시된 루트 실례이다.js 파일

import Vue from 'vue'
import App from './app.vue'

new Vue({
  el: '#app',
  render: create => create(App),
})

인덱스에서 id가 "app"인 DOM 요소에 자신을 추가합니다.html.이것은 에 의해 지정되고 옵션 객체의 키 "el"의 값을 새 Vue에 지정합니다.이 파일 가져오기와 루트 실례는 우리의 첫 번째 구성 요소인 App을 보여 줍니다. 이것은 앞에서 언급한 PlantSearch 구성 요소를 반대로 보여 줍니다.우리 이 앱을 좀 봅시다.vue 파일.
응용 프로그램을 고려하다.vue 파일이 상당히 길기 때문에 우리는 절에 따라 그것을 소개할 것이다.읽기 편리하도록 템플릿 뒤에 스크립트 뒤에 스타일을 따라가세요.

응용 프로그램.vue: 템플릿

<template>
  <div class="divclass">
    <plant-search v-on:search:plant="searchPlant"/>
    <ul v-for="(p, index) in plants" v-bind:key="index">
      <div>
      <li>{{p.common_name}}</li>
          <div>
            {{p.scientific_name}}
          </div>
          <img v-bind:src="p.image_url"/>
      </div>
    </ul>
  </div>
</template>

여기서 우리는 우리의 첫 번째 지령인 v-on, v-for, v-bind를 소개할 것이다.

v-on

v-on은 DOM 이벤트를 수신하고 이벤트가 발생할 때 JavaScript를 실행하는 명령어입니다.이 예에서 v-on은 우리가 가져오고 응용 프로그램에 나타난plant search 구성 요소에 나타납니다.템플릿검색을 제출하면 해당 메서드 검색 플랜트가 응용 프로그램에서 표시됩니다.vue 스크립트 부분이 실행되었습니다.plant search 구성 요소가 search Plant에 데이터를 전달하는 정확한 방법은 PlantSearch의 $emit 방법과 관련이 있으며 다음 글에서 토론할 것입니다.문법

v-on:search:plant="searchPlant"

v-on입니다. Plant Search'search:plant'에서 내보낸handle Submit 함수 이름과 Appl의 함수입니다.vue, searchPlant, 검색을 제출할 때 실행하기를 원합니다.

대표

v-for는 대체로 Vue에 해당한다.js 버전의 순환입니다.부모 템플릿 요소에서 v-for를 사용할 때 값을 하위 요소에 전달할 수 있습니다. 위와 같습니다.문법

v-for="(p, index) in plants"

그 중에서'식물 중의 p'는 아래의'각본'부분에서'식물'수조 중의 모든 식물을 가리킨다.v-for는 원생 매핑 함수와 같이 두 번째 인자 인덱스를 추가로 제공할 수 있습니다.이것은 모든 항목 v에 유일한 키를 연결하는 데 도움이 됩니다.v-for를 사용하면 'plants' 그룹의 모든 plant에 유일한 plant 항목을 만들고 DOM에 나타냅니다.

v형 귀속

v-bind는 스타일이나 클래스를 호출하는 모든 요소에 연결합니다.위의 템플릿에서, 우리는 모든 과장된 식물 v에 유일한 키를 연결합니다

<script>
import axios from 'axios';
import PlantSearch from './components/PlantSearch.vue'

const API_URL = "http://localhost:8000/";

export default {
  name: "App",
  components: {
    PlantSearch,
  },
  data: function () {
    return {
      plants: []
    };
  },
  mounted() {
    axios.get(API_URL).then((plantInfo) => {
      this.plants = plantInfo.data;
    }).catch(err => console.log(err));
  },
  methods: {
    searchPlant(plant){
      axios.get("http://localhost:8000/search", {
        params: plant
      }).then((plantInfo) => {
        this.plants = plantInfo.data
      })
    }
  }
};
</script>

결론

다음 주에 우리는 응용 프로그램 '스크립트' 부분의 세부 사항을 깊이 이해할 것이다.vue.우리는 '데이터' 기능과 데이터가 어떻게 업데이트되었는지, 그리고 PlantSearch와 응용 프로그램 구성 요소 사이에서 어떻게 전달되었는지 이해할 것이다.현재, 우리는 이미 단일 파일 구성 요소와 몇 가지 기본 명령을 기본적으로 이해했다.