Vue 진급 구조 속성 상세 정보

3362 단어 vue진급 구조 속성

1. Directive 사용자 정의 명령


Vue 프레임워크 아래의 코드에서 원본 DOM 조작을 사용하는 경우는 드물다. 그것은 Vue에서 원본 DOM 조작을 모두 명령으로 봉인했기 때문이다. 예를 들어 우리가 앞에서 본 명령은 다음과 같다.
div.innerText = xxx;//물론 이곳의 div는 얻을 수 있는 DOM 요소입니다.
Vue는 원본 DOM 작업을 명령어로 봉인합니다. 그 요소는 이 명령을 사용하려면 HTML 템플릿의 요소 라벨에서 속성으로 직접 사용하면 됩니다. 소개가 편리하고 중복을 줄일 수 있습니다.
그러나 Vue는 모든 DOM 작업 상황을 미리 고려하여 대응 명령으로 봉인할 수 없기 때문에 일부 DOM 작업은 개발자가 실제에서 사용해야 알 수 있기 때문에 Vue는 사용자 정의 명령을 제공하는 방식을 다음과 같은 두 가지로 나눈다.
사용자 정의 명령은 사용자 정의 구성 요소와 유사하며 전역과 부분으로 나뉩니다. 다음은 인쇄 문자 y 의 명령 v-y 을 사용자 정의하는 예입니다.
전역 명령
글로벌 속성은 Vue에서 제공하는 특정 함수에 등록됩니다.

Vue.directive("y", {
  inserted: function(el) {
    el.addEventListener("click", () => console.log("y"));
  }
});
로컬 명령
이 명령을 정의하는template에만 사용할 수 있습니다
전체 버전의template 속성에서
main.js

new Vue({
  template:`
    <div v-y>
      <button> </button>
    </div>
  `,
  directives:{
    'y':{
      inserted: function(el) {
        el.addEventListener("click", () => console.log("y"));
      }
    }
  }
}).$mount("#app");
아니면 비완전판.vue 파일의 export default {}
app.vue

<template>
    <div>
      <button v-y> </button>
    </div>
</template>
<script>
    export default {
      directives:{
        'y':{
          inserted: function(el) {
            el.addEventListener("click", () => console.log("y"));
          }
        }
      }
    };
</script>
directiveOptions
명령 대상에 5개의 함수 속성이 있습니다

{
    bind: function (el,info,vnode,oldVnode) {}, // 
    inserted: function ( ) {}, // 
    update: function ( ) {}, 
    componentUpdated: function ( ) {}, 
    unbind: function ( ) {} // 
}
함수 속성의 매개 변수 중el은 이 명령을 호출하는 요소를 가리키며 info는 모든 정보를 포함하고 필요할 때 info에서 찾습니다

2, Mixin 혼입


혼입의 주요 목적은 구조 옵션의 중복을 줄이기 위해 중복된 구조 옵션의 부분을 분리하여 하나의 단독 *에 놓을 수 있다.js 파일에서 import로 가져오고 구조 옵션에서mixins 속성을 통해 혼입합니다.
minxin은 스마트 혼합으로 추가된 혼합과 현재 옵션에 따라 스마트 혼합을 합니다. 단순한 복제가 아닙니다.

3. Extends 상속


계승과minxin의 기능은 차이가 많지 않지만 extend는 추상적이다. 양자 모두 구조 옵션의 중복을 간소화한다. extend는 기존의 Vue의 빈 껍질에 자신의 정의 속성을 추가하여 고정 속성으로 하고 Vue 대상을 만들 때 Vue를 계승한 자체 정의 클래스인 Mybue를 만들 수 있다.
MyVue.js

const MyVue = Vue.extend({
    minxins: [log]
});

export default MyVue;

4,provide 및 inject


부모 세대가 공용 데이터나 방법을 제공하다

{
    //...
    provide(){
        return {
            xx: this.changexx,
            yy: this.changeyy
        }
    },
    methods:{
        changexx(){
            //...
        },
        changeyy(){
            //...
        }
    }
}
후대 주입 물건 데이터 수정

{
    inject: ["changexx", "changeyy"]
}
그리고sync 수식자의 작용은 약간 비슷하지만, 비.sync는 광범위해야 합니다.
다음은 Vue 진급 구조 속성에 대한 상세한 내용입니다. Vue 진급 구조 속성에 대한 더 많은 자료는 저희 기타 관련 글을 주목해 주십시오!
백준 14500 테트로미노
[프로그래머스] 섬 연결하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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