Vue 전역 구성 요소 와 부분 구성 요소 의 차이 점 에 대한 설명

7417 단어 Vue전체 국면구성 요소국부
1.구성 요소 설명

<!--       father   -->
<template id="father">
  <div>
     <h3>  {{name}}</h1>
     <div>
       <p>  {{data}}</p>
     </div>
  </div>
</template>
var FATHER = {
  template: "#father",
  data: function() {
     return {
       name: "      -  -",
       data: "  ：18892087118"
     }
   }
 };
2.구성 요소 등록
Vue.component('father', FATHER);
3.구성 요소 마 운 트
전역 구성 요소 1


4.구성 요소 인 스 턴 스

<!DOCTYPE html>
<html>
<head>
  <title>vue2.0 ---          </title>
</head>
 
<body>
  <h3>vue2.0         </h3>
 
  <div id='app'>
    <h5>    </h5>
    <fatherlocal></fatherlocal>
    <hr>
 
    <h5>    1</h5>
    <father></father>
    <hr>
 
    <h5>    2</h5>
    <child :fromfather='giveData'></child>
  </div>
 
  <!--       fatherlocal -->
  <template id="father-local">
    <div>
      <h3>  {{name}}</h1>
      <div>
        <p>  {{data}}</p>
      </div>
    </div>
  </template>
 
  <!--       father -->
  <template id="father">
    <div>
      <h3>  {{name}}</h1>
      <div>
        <p>  {{data}}</p>
      </div>
    </div>
  </template>
 
  <template id="child">
    <div>
      <h3>  {{name}}</h3>
      <div>
        <p>{{cmsgtwo}}</p>
        <p>{{cmsg}}</p>
        <p>{{fromfather}}</p>
        <p>{{fromfather.fmsg}}</p>
        <p><input type="button" value="  " @click=" "></p>
      </div>
    </div>
  </template>
 
  <script src="vue_2.2.2_vue.min.js"></script>
  <script type="text/javascript">
    //     
    var FATHER = {
      template: "#father",
      data: function() {
        return {
          name: "      -  -",
          data: "  ：18892087118"
        }
      }
    };
 
    var CHILD = {
      template: "#child",
      data: function() {
        return {
          name: "   ",
          cmsg: "          ",
          cmsgtwo: "          "
        }
      },
      methods: {
        change: function() {
          this.fromfather.fmsg = "         "
        }
      },
      mounted: function() {
        this.cmsg = this.fromfather;
      },
      props: ["fromfather"],
    };
 
    //     
    Vue.component('father', FATHER);
    Vue.component("child", CHILD);
 
    var vm = new Vue({
      data: {
        fmsg: "data    ",
        giveData: {
          fmsg: "         "
        }
      },
      methods: {},
      //     fatherlocal
      components: {
        'fatherlocal': {
          template: '#father-local',
          data: function() {
            return {
              name: "  -   ",
              data: "  -       "
            }
          }
        }
      }
    }).$mount('#app');
  </script>
</body>
</html>
6、특별한 속성 is
DOM 을 템 플 릿 으로 사용 할 때(예 를 들 어 엘 옵션 을 존재 하 는 요소 에 마 운 트 합 니 다)HTML 의 일부 제한 을 받 을 수 있 습 니 다.Vue 는 브 라 우 저 에서 HTML 을 분석 하고 표준화 한 후에 만 템 플 릿 내용 을 가 져 올 수 있 기 때 문 입 니 다.특히 이러한 요소 들 은
    ,
      ,,
Powershell 은 OpenFileDialog 를 사용 하여 파일 예제 를 엽 니 다.
VUE 는 wx-open-launch-app 구성 요 소 를 사용 하여 위 챗 을 개발 하여 앱 기능 을 엽 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage