Vue 인터뷰에 대한 지식 포인트

이번에는 Vue 인터뷰에 대한 지식 포인트를 알려드리겠습니다. 필요한 친구들은 관심을 갖고 편집자를 따라가서 살펴보세요.

[관련 추천: vue 인터뷰 질문 (2020)]

1. vue 소개

vue는 사용자 인터페이스를 구축하기 위한 프레임워크입니다. 경량의 mvv 프레임워크로, 소위 양방향 데이터 바인딩, 데이터 기반 및 컴포넌트 기반 프런트 엔드 개발을 간단한 API를 통해 구현합니다. 사용하기 쉽고 컴팩트합니다.

2. Chrome에서 vue 디버깅을 용이하게 하기 위해 vue-devtools 플러그인을 설치합니다. 디버깅을 용이하게 하기 위해 vue-devtools가 코드를 확인할 수 있는지 여부를 구성합니다. vue.config.devtools = false;

vue.config.productionTip =false;프로덕션 메시지 시작을 방지합니다.

3. 자주 사용되는 명령.

v-model 양방향 데이터 바인딩, 일반적으로 양식 요소에 사용됩니다.

v-for는 배열이나 객체에 대해 루프 작업을 수행합니다. v-repeat 대신 v-for를 사용합니다.

v-on은 시간을 바인딩하는 데 사용됩니다. 사용법: v-on : time = 'function'

v-show/v-if는 요소를 표시하거나 숨기는 데 사용되며, v-show는 디스플레이를 통해 구현되며, v-if는 각 삭제 후에 생성됩니다.

4 이벤트 및 속성

v-on: click = " 약어 @click=""

$event 이벤트 소스, 시간 유형, 오프셋 등과 같은 이벤트 관련 정보를 포함하는 이벤트 개체.

이벤트 버블링, 기본 js 메서드는 다음에 따라 다름 이벤트 객체, vue 모드는 이벤트 버블링을 방지하기 위해 이벤트 객체인 @click.stop에 의존하지 않습니다.

키보드 이벤트: @keydown.13 또는 keydown.enter

이벤트 수정자 .stop은 event.stopPropagation을 호출합니다. );

v-bind는 속성 바인딩에 사용됩니다. v-bind: attribute="" 예 v-bind:src="" 약어: src=""

5 vue.js는 HTML을 사용합니다. Vue 인스턴스의 데이터 템플릿에 DOM을 바인딩하는 기반 템플릿 구문입니다. {{}}는 데이터를 바인딩하고 페이지에 표시하는 데 사용됩니다.

단일 항목 바인딩 {{}}는 깜박이는 문제를 일으킬 수도 있습니다. v-text v-html

다른 지침 v-once를 사용하여 v-pre가 변경되지 않고 그대로 표시되면 데이터를 바인딩할 수 있습니다.

6. 필터

는

을 표시하기 전에 모델 데이터를 필터링하고 데이터 쌍을 필터링하는 데 사용됩니다. 구문: {{data | filter (parameter) | filter (parameter)}}

내장 필터링 2.0 이후에는 브라우저가 삭제됩니다. 이를 사용하면 lodash data-fns, 날짜 형식, Accounting.js, 통화 형식 및 사용자 정의와 같은 타사 라이브러리를 사용할 수 있습니다. 7. Ajax 요청을 보냅니다.

vue 자체는 vue-resource axios와 같은 플러그인을 사용하여 Ajax 요청 전송을 지원하지 않습니다.

axios는 요청을 보내는 데 사용되는 약속 기반 http 요청 클라이언트입니다.

기본 사용법:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

참고: axios가 기본적으로 데이터를 보낼 때 데이터 형식은 요청 페이로드입니다. 침대 데이터 형식이므로 매개변수는 키-값 개체로 전달되어야 합니다

, 매개변수는 json 형식으로 전달될 수 없습니다

매개변수 전달 방법: 키-값 쌍을 직접 연결하고, 변환 요청을 사용하여 처리합니다. 요청을 보내기 전에 데이터를 요청하십시오. 변환하거나 변환을 위해 qs 모듈을 사용하십시오.

axios는 교차 도메인 요청을 지원하지 않습니다. vue-resource를 사용하여 교차 도메인 요청을 보낼 수 있습니다.

도메인 전체에 걸쳐 요청 보내기: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue 수명 주기

Vue 인스턴스의 생성부터 소멸까지의 과정이 생명주기가 됩니다

9. 계산된 속성

계산된 속성은 데이터를 저장하는 데에도 사용됩니다. 데이터를 논리적으로 처리할 수 있고 계산된 속성의 데이터를 모니터링할 수 있다는 두 가지 특성이 있습니다.

10.vue 인스턴스 속성 및 메서드

Property vm.$el vm.$data vm.$options vm.$refs

Method vm.$mount() vm.$destroy vm.$ nextTick(콜백) vm.$set(객체,키,vlaue) vm.$delete(객체,키) vm.$watch(data,callback)

11, 사용자 정의 명령

사용자 정의 전역 명령 vue. directive(directive id, 정의 객체)

12. Transition(animation)

vue는 업데이트나 DOM을 삽입할 때 프로세스를 적용하는 다양한 방법을 제공합니다. 핵심은 CSS 애니메이션을 사용하는 것입니다.

기본 사용법은 다음과 같습니다. : 전환 구성 요소를 사용하여 애니메이션할 요소를 수정된 구성 요소에 배치하세요

타사 애니메이션 라이브러리 animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13과 함께 사용하세요. Component

구성 요소는 가장 vue.Component의 강력한 기능은 HTML 요소와 결합하여 코드를 캡슐화하고 재사용할 수 있습니다.

컴포넌트 메소드를 정의하려면 먼저 컴포넌트 생성자를 생성한 다음 컴포넌트 생성자를 사용하여 컴포넌트를 생성합니다. b> 템플릿을 참조하기 위해

을 직접 생성합니다. 구성 요소 콘텐츠는 템플릿