목차
참고: 책의 지식 포인트 페이지는 괄호 안에 있습니다.
1. 객관식 질문
1. vue에서 mvvm의 패턴 디자인에 대해 어떻게 생각하시나요? (9)
mvvm 디자인 패턴에서 사용하는 양방향 바인딩은 뷰가 변경되면 그에 따라 모델이 변경되고, 모델도 변경되고 뷰도 동기화됩니다. 따라서 dom의 작동과 코드의 결합이 줄어듭니다. 또한 더 좋습니다.
2. Vue 기능 및 장점 (13)
Vue의 핵심 아이디어: Vue의 두 가지 핵심 아이디어는 데이터 기반 및 구성 요소화입니다.
vue의 두 가지 주요 기능: 반응형 프로그래밍 및 컴포넌트화
뷰의 장점:
- 양방향 데이터 바인딩, 컴포넌트화, 데이터와 구조의 분리, 가상 DOM, 빠른 실행 속도
- Vue는 단일 페이지 애플리케이션이고 페이지가 부분적으로 새로 고쳐지며 페이지가 이동할 때마다 모든 데이터와 DOM을 요청할 필요가 없습니다.
3. 개발 도구: vscode, hbuider, subline, webstorm
4. 현재 세 가지 주요 프레임워크는 모두 자체 라우팅 구현을 가지고 있습니다 .
Angular-ngRouter
React의 ReactRouter
Vue적vue-router
5. 수식어의 효과(27, 45, 64-66)
이벤트 바인딩 수정자: .prevent는 기본 이벤트를 방지합니다(27).
.lazy,.number,.trim (45)
.stop은 버블링 방지, .capture 이벤트 캡처, .self 이벤트 트리거, .once 일회성 바인딩(64-66)
6. 양식
7.vue-router 동적 라우팅
프런트 엔드 라우팅의 핵심 : URL을 변경하지만 페이지가 전체적으로 새로 고쳐지지 않습니다.
예: 다음 옵션 중 라우팅 점프가 허용되지 않습니다. D
가.푸시()
B.대체()
C. 경로 링크
디점프()
예: 아래에서 얻은 동적 라우팅 { path: '/user/:id' }에서 id의 올바른 값은 다음과 같습니다.
A.this.$route.params.id
B.this.route.params.id
C.this.$router.params.id
D.this.router.params.id
8. 교차 도메인(181, 329)
1. Front-end Proxy(181) Same-Origin 정책: 동일한 프로토콜, 도메인 이름, 포트를 참조하며, 둘 중 하나라도 다르면 교차 도메인이 발생합니다.
2. 백엔드 Cors 도메인 간 구성(329)
9. 계산된 속성(95-99)
계산된 속성의 초점은 단어 속성입니다.첫 번째는 속성이고 두 번째는 이 속성에 계산 기능이 있습니다.여기서 계산은 함수입니다. 간단히 말해서 캐시로 상상할 수 있는 계산 결과를 캐시(행동을 정적 속성으로 변환)할 수 있는 속성입니다.
설명하다:
methods: 메서드를 정의하고 괄호로 메서드를 호출합니다.
computed: 계산된 속성을 정의합니다. 이는 속성이기 때문에 호출에 괄호가 필요하지 않습니다.
결론: 메소드를 호출할 때 매번 계산을 해야 한다 계산 과정이 있기 때문에 시스템 오버헤드가 발생해야 한다 결과가 자주 바뀌지 않는다면? 이때 결과를 캐싱하는 것을 고려해 볼 수 있다. 계산 속성은 매우 빠를 수 있습니다.이를 편리하게 수행하기 위해 계산 속성의 주요 기능은 시스템 오버 헤드를 절약하기 위해 자주 변경되지 않는 계산 결과를 캐시하는 것입니다.
10. 계산과 시계의 차이점
compute는 결과를 계산하고 반환하며, 계산된 값이 변경될 때만 트리거합니다.
Watch는 특정 값을 모니터링하고 모니터링 값이 변경되면 해당 작업을 수행합니다.
computed와의 차이점은 watch는 특정 값의 변화를 모니터링하고 백그라운드 인터페이스 요청 등과 같은 해당 작업을 수행하는 데 더 적합하고 computed는 기존 값을 계산하고 결과를 반환하는 데 적합하다는 것입니다.
11. vue의 수명 주기, 실행 순서는 다음과 같습니다. D
A. beforeCreate -> init->create->mount->destory
B. mount-> init->beforeCreate->create->destory
C.beforeCreate->create->init->mount->destory
D.init->beforeCreate->create->init->destory
12. DOM 이벤트를 수신하기 위한 명령은 다음과 같습니다.
Av-on Bv-모델 Cv-바인드 Dv-html
13.css 및 js 이해
14. Vue 구성 요소 이해(82)
구성 요소 사용의 이점:
개발 효율성을 개선하고, 재사용을 촉진하고, 디버깅 단계를 간소화하고, 전체 프로젝트의 유지 관리성을 개선하고, 공동 개발을 촉진합니다.
글로벌 등록(83) 및 로컬 등록(86)
Vue 구성 요소의 데이터 값은 객체가 될 수 없으며 이유(84), 데이터는 함수여야 하며 반환을 사용하여 데이터를 반환합니다.
1. 구성 소품(89)
자식 컴포넌트가 부모 컴포넌트의 데이터를 사용하게 하려면 자식 컴포넌트의 props 옵션을 통해 구현하고 v-bind를 사용하여 실제 값을 전달해야 합니다.
2.$방출(100)
Parent-to-child: 부모 컴포넌트는 v-bind를 통해 속성을 바인딩하고, 자식 컴포넌트는 props를 통해 부모 컴포넌트에서 바인딩된 속성을 받아들입니다.
자식에서 부모로 전달: 자식 컴포넌트는 브로드캐스트 $emit를 통해 부모 컴포넌트로 값을 전달하고, 부모 컴포넌트는 함수를 사용하여 자식 컴포넌트에서 전달된 값을 수락합니다.
3.$ 자녀/$ 부모
생성된 인스턴스의 부모 인스턴스를 지정하고 둘 사이의 부모-자식 관계를 설정합니다. 자식 인스턴스는 this.$parent를 사용하여 부모 인스턴스에 액세스할 수 있으며 자식 인스턴스는 부모 인스턴스의 $children 배열로 푸시됩니다.
$children의 값은 배열이고 $parent는 객체입니다.
vue 컴포넌트 캡슐화의 장점:
구성 요소는 vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 구성 요소는 전체 프로젝트의 개발 효율성을 향상시킬 수 있는 재사용 가능한 vue 인스턴스 구성 요소입니다.
페이지를 상대적으로 독립적인 여러 모듈로 추상화하여 기존 프로젝트 개발의 낮은 효율성, 어려운 유지 관리 및 낮은 재사용성 문제를 해결할 수 있습니다.
15. vuex의 다섯 가지 핵심 개념
상태: 데이터 저장
변형: 데이터 업데이트 방법
작업: 상태 데이터를 업데이트하기 위해 mutations 메서드를 호출합니다.
게터: 상태의 데이터 전처리
모듈: 모듈식 vuex
예: 다음 옵션은 vuex의 속성이 아닙니까? 디.
A. 상태
B.getters
C.액션
D.초기화
16. Vue 수명 주기 단계
생성이 완료되기 전에 beforeCreate가 생성되었습니다.
beforeMount 렌더링이 마운트 렌더링 전에 완료되었습니다.
업데이트 업데이트가 완료되기 전에 beforeUpdate 데이터 업데이트
Destory 인스턴스가 소멸되기 전에 beforeDestory 인스턴스가 소멸됩니다.
17. 계산된 속성과 시계의 차이점
계산된 속성은 값이 다른 값에 종속됨을 선언적으로 설명하는 데 사용됩니다. 데이터를 템플릿의 계산된 속성에 바인딩하면 Vue는 의존하는 값으로 인해 계산된 속성이 변경될 때 DOM을 업데이트합니다. 이 기능은 매우 강력하며 코드를 보다 선언적이고 데이터 중심적이며 유지 관리하기 쉽게 만들 수 있습니다.
시계는 정의한 변수를 수신하고 정의한 변수의 값이 변경되면 해당 메서드가 호출됩니다.
div에 표현식 이름을 쓰고, 데이터에 num과 lastname, firstname을 쓰고, watch에서 num의 값이 변경되면 num의 메서드가 호출되고, 메서드의 공식 매개변수는 num의 새 값에 해당하고 이전 값,
계산된 속성은 이름이 의존하는 값을 계산하며, 데이터에 정의된 변수는 계산할 수 없습니다.
둘, 빈칸 채우기
1. 비계이해기능 설치(141)
스캐폴딩 및 SPA: vue 스캐폴딩은 vue-cli로 작성되었으며 엔지니어링 프로젝트에서 사용되는 템플릿은 webpack입니다.
2. 경로 지연 로드(158)
레이지 로딩은 레이지 로딩이라고도 하는데, 필요할 때 로딩하고, 필요에 따라 로딩하는 방식으로, 단일 페이지 애플리케이션에서 레이지 로딩이 없으면 웹팩으로 패키징된 파일이 비정상적으로 커지므로 홈페이지 진입 시 로드 너무 많은 콘텐츠와 너무 긴 지연은 사용자 경험에 도움이 되지 않습니다.
지연 로딩을 사용하면 페이지를 분할하고 필요에 따라 페이지를 로드할 수 있으므로 홈페이지의 로딩 압력을 공유하고 로딩 시간을 줄일 수 있습니다.
지연 로딩 방법:
(1) Vue의 비동기 컴포넌트와 Webpack의 코드 분석을 결합합니다.
(2) AMD 문구
(3) ES6에는 Vue 비동기 구성 요소와 Webpack의 코드 분할을 구성하는 더 간단한 방법이 있습니다.
3. springboot 구성 파일 yml 파일 및 속성 기능 (235)
springboot 프로젝트에서 기본적으로 생성되는 application.properties 파일을 자주 볼 수 있는데, 실제로 yml 파일은 그것과 동일한 기능을 가지고 있으며 모두 일부 기본 구성 값을 수정하는 데 사용됩니다. Mysql 사용자 이름, 비밀번호 등
yml 작성 방법:
1) 각 수준은 콜론으로 구분하고 그 뒤에 빈 줄을 띄우고 여백의 들여쓰기는 계층적 관계를 제어하는 데 사용한다.여백의 수는 중요하지 않으며 탭 기호를 사용할 수 없음에 유의한다. 속성 파일의 각 지점은 레벨입니다.
2) 콜론 뒤에 값이 있는 경우 공백으로 구분해야 합니다.
1. yml은 들여쓰기를 통해 부모-자식 관계를 제어합니다.
2. 속성과 값은 반각 콜론 + 공백으로 구분됩니다(각 k의 콜론 뒤에 공백을 추가해야 합니다.)
3. 속성 파일에서는 "."로 구분되며, yml에서는 ":"로 구분됩니다.
예:
application.properties
eureka.instance.hostname=localhost
eureka.client.registerWithEureka=false
eureka.client.fetchRegistry=false
application.yml
유레카:
고객:
가져오기 레지스트리: 거짓
registerWithEureka: 거짓
사례:
호스트 이름: localhost
읽기 순서: Springboot 프로젝트에 properties와 yml이 모두 존재할 경우 properties 파일을 먼저 읽습니다.
일반적인 상황은 먼저 yml을 로드한 다음 속성 파일을 로드하는 것입니다. 두 파일에 동일한 구성이 존재하는 경우. 마지막으로 속성의 구성이 사용됩니다. 마지막으로 읽은 우선순위 세트가 가장 높습니다.
두 구성 파일의 포트 번호가 다른 경우 속성의 포트 번호를 읽습니다.
로드 순서 yml>yaml>속성, 우선순위 속성>yaml>yml, 즉 속성은 다른 두 개를 포함합니다.
로딩 순서와 우선 순위가 반대입니다.일반적인 로딩 순서는 yml>properties이지만 나중에 로딩하면 첫 번째 로딩을 덮어 쓰기 때문에 두 파일이 모두 사용 가능할 때 속성 실행과 yml 실행을 볼 수 있습니다. 이므로 우선순위는 properties>yml입니다.
4. Springboot 예외 처리(250-255)
@ExceptionHandler 주석을 사용하여 로컬 예외 처리
@ControllerAdvice 주석을 사용하여 전역 예외 처리
예외를 처리하도록 SimpleMappingExceptionResolver 클래스 구성
5. 스프링 부트 보안 프레임워크(333-350)
Spring Security의 기본 사용자 이름은 user이며 Spring Security가 시작되면 기본 비밀번호가 생성되며 시작 로그에서 볼 수 있습니다.
6. Springboot 통합 데이터베이스(288)
Redis는 구성 파일의 데이터베이스를 통해 기본 데이터베이스 수를 수정할 수 있습니다.Redis는 사용자 지정 데이터베이스 이름을 지원하지 않습니다.Redis의 여러 데이터베이스는 완전히 격리되지 않습니다.flushall 명령은 모든 데이터베이스의 데이터를 지웁니다.
7. 인터페이스 테스트 도구 포스트맨(285)
8. 타이머(266)
간단한 타이밍 작업은 Spring과 함께 제공되는 작업을 통해 직접 구현할 수 있으며 복잡한 타이밍 작업은 통합 Quartz를 통해 구현할 수 있습니다 .
9. Springboot는 mysql을 통합합니다(310).
JdbcTemplate: 데이터베이스에 연결하기 위한 JDBC 도구 클래스입니다.
10springboot 패키징: 프로젝트 배포, jar로 패키징, 전쟁(351)
Spring Boot 프로젝트는 Servlet 컨테이너에 내장할 수 있어 배포가 매우 편리하며 실행 가능한 Jar 패키지로 직접 패키징하여 Java 운영 환경이 있는 서버에 배포하거나 War 패키지로 패키징하여 배포할 수 있습니다. 외부 Tomcat 서버 등
11. 전단과 후단의 분리
핵심 아이디어는 프런트 엔드 HTML 페이지가 Ajax를 통해 백엔드 RESTful API를 호출하고 JSON 데이터와 상호 작용한다는 것입니다. (354)
핫 배포는 프로젝트를 다시 시작하지 않고 프로젝트가 실행되는 동안 코드를 수정하는 것입니다. (282) 4
백엔드의 경우 백엔드는 프런트엔드의 레이아웃을 고려할 필요가 없지만 백엔드 데이터의 정확성만 고려하면 되므로 백엔드 테스트에서 반환된 JSON 데이터의 정확성은 Postman 도구와 분리할 수 없습니다. (282)
프런트 엔드와 리어 엔드의 분리:
애플리케이션의 프런트엔드 코드와 백엔드 코드를 별도로 작성합니다.
프런트 엔드는 클라이언트 코드만 독립적으로 작성하면 되고, 백 엔드는 데이터 인터페이스를 제공하기 위해 서버 코드만 독립적으로 작성하면 됩니다.
프런트 엔드는 Ajax 요청을 통해 백엔드의 데이터 인터페이스에 액세스하고 보기에 모델을 표시합니다.
프론트엔드와 프론트엔드 개발자는 미리 인터페이스 문서(URL, 매개변수, 데이터 유형...)에 동의하고 독립적으로 개발하면 됩니다. 끝내고 마침내 프론트 엔드와 백엔드 통합 완료 그게 다야, 프론트 엔드와 백엔드 애플리케이션의 분리가 실현되어 개발 효율성이 크게 향상됩니다.
모노머: 프론트엔드 애플리케이션 + 백엔드 애플리케이션, 프론트엔드는 HTML을 작성하고 Ajax를 통해 백엔드 RESTful 데이터 인터페이스를 요청합니다.
프런트 엔드 애플리케이션: 데이터 표시 및 사용자 상호 작용을 담당합니다.
백엔드 애플리케이션: 데이터 처리 인터페이스 제공을 담당합니다.
앞끝과 뒷끝을 분리하는 방법을 사용하지 않는다면 어떤 문제가 있습니까?
전통적인 Java 웹 개발에서 프론트엔드는 JSP를 사용하여 개발되며 JSP는 백엔드 개발자가 독립적으로 완성하지 않습니다.
프론트엔드 개발은 HTML 정적 페이지를 작성하고 백엔드 개발은 JSP를 작성합니다.이러한 개발 방법은 매우 비효율적입니다.
구현 기술: Spring Boot + Vue, 백엔드 애플리케이션 개발에 Spring Boot 사용, 프론트엔드 애플리케이션 개발에 Vue 사용
3. 단답형
1. 핫 전개의 원리(283)
깊은 원칙은 두 개의 ClassLoader를 사용하는 것입니다. 하나의 ClassLoader는 변경되지 않는 클래스(타사 Jar 패키지)를 로드하고 다른 ClassLoader는 변경될 클래스를 로드합니다(Restart ClassLoader라고 함). restart ClassLoader는 폐기되고, restart ClassLoader가 다시 생성되며, 로드할 클래스가 적기 때문에 재시작 시간이 빨라집니다.
2. 뷰 라우팅(158)
SPA(단일 페이지 애플리케이션): 하나의 완전한 페이지만 있는 단일 페이지 애플리케이션으로, 페이지를 로드할 때 전체 페이지를 로드하지 않고 지정된 컨테이너의 콘텐츠만 업데이트합니다. 단일 페이지 애플리케이션(SPA)의 핵심 중 하나는 페이지를 다시 요청하지 않고 뷰를 업데이트하는 것, vue-router는 단일 페이지 프런트 엔드 라우팅을 구현할 때 두 가지 모드를 제공하고 모드에 따라 사용할 방법을 결정합니다. 매개변수
3. 조건부 렌더링 지침은 무엇이며 차이점은 무엇입니까? ( 56)
v-if v-쇼
필수 메서드 간의 차이점: vue-show는 본질적으로 레이블 표시를 없음으로 설정하여 숨김을 제어합니다. vue-if는 동적으로 DOM 요소를 DOM 트리에 추가하거나 삭제합니다.
컴파일 차이점: v-show는 css를 제어하고 v-if 스위칭에는 부분 컴파일/언로드 프로세스가 있으며 내부 이벤트 리스너 및 하위 구성 요소는 스위칭 프로세스 중에 적절하게 파괴 및 재구축됩니다.
컴파일 조건: v-show가 컴파일됩니다. 초기 값은 false이지만 디스플레이는 없음으로 설정되지만 컴파일됩니다. v-if의 초기 값이 false로 설정되면 컴파일되지 않습니다.
성능: v-show는 한 번만 컴파일 가능하며 후자는 실제로 css를 제어하기 위한 것이고 v-if는 지속적으로 파괴되고 생성됩니다.자주 사용해야 하는 경우 v-show를 사용하는 것이 좋습니다. 실행 중 조건이 거의 변경되지 않으므로 v-if를 사용하는 것이 좋습니다.
4. Vue 단일 항목 데이터 흐름(95-99)
단방향 데이터 흐름: 부모 소품의 업데이트는 자식 구성 요소로 내려갑니다.부모 구성 요소가 업데이트될 때마다 자식 구성 요소의 모든 소품이 최신 값으로 새로 고쳐집니다.데이터는 단방향이며, 부모 구성 요소의 데이터는 하위 구성 요소로 전달되며 단일 항목에만 바인딩할 수 있으며 상위 구성 요소의 데이터는 하위 구성 요소에서 수정할 수 없습니다.양방향 데이터 바인딩: 데이터 및 페이지는 서로 영향을 미치기 위해 두 방향으로 제본됩니다.
5. v-for를 사용할 때 키 속성을 추가해야 하는 이유는 무엇입니까?
vue는 dom을 업데이트하고 렌더링할 때 이전 및 새 dom 번호를 비교하기 때문에 키를 사용하여 각 노드에 대한 고유 식별을 만듭니다.
6. vue의 router-link와 a의 차이점
a 태그: 현재 페이지에서 다른 페이지로 이동하려면 a 태그를 클릭하면 웹 페이지를 여는 것과 같은 페이지가 다시 로드됩니다.
라우터 링크: 다시 렌더링해야 하는 태그와 달리 새 페이지로 이동하지 않고 다시 렌더링하지 않아 DOM 성능 손실을 줄입니다.
7. Vue 부모 구성 요소와 자식 구성 요소 간에 매개 변수를 전달하는 방법은 무엇입니까?
상위 구성 요소에서 하위 구성 요소로 값 전달:
1) 자식 구성 요소는 부모 구성 요소에서 전달된 값을 받기 위해 props에 속성을 만듭니다.
2) 부모 구성 요소에 자식 구성 요소를 등록합니다.
3) 하위 구성 요소 소품에서 생성된 속성을 하위 구성 요소 태그에 추가합니다.
4) 자식 구성 요소에 전달해야 하는 값을 속성에 할당합니다.
하위 구성 요소는 상위 구성 요소에 값을 전달합니다.
1) 사용자 지정 이벤트는 하위 구성 요소에서 특정 방식(예: 클릭 이벤트)으로 트리거되어야 합니다.
2) $emit의 두 번째 매개변수로 전달할 값을 사용하고, 이 값은 이벤트에 응답하는 메소드에 실제 매개변수로 전달됩니다.
3) 부모 컴포넌트에 자식 컴포넌트를 등록하고 자식 컴포넌트 레이블에 커스텀 이벤트 리스너를 바인딩합니다.
네, vue 클래식 케이스
1. 말등
<body>
<div id='app'>
<button @click="start">浪起来</button>
<button @click="stop">低调</button>
<h3>{
{title}}</h3>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:{
title:"不要浪，别团",
Interva: null
},
methods: {
start(){
clearInterval(this.Interva)
console.log(this.title.substr(0,1));
console.log(this.title.substring(0, 1));
this.Interva = setInterval(()=>{
this.title = this.title.substr(1) + this.title.substring(0,1);
},300)
},
stop(){
clearInterval(this.Interva);
}
}
})
</script>2. 간단한 계산기
<body>
<div id="app">
<input type="text" v-model='num1'>
<select v-model='opration'>
<option value="+">+</option>
<option value="-" selected>-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="num2">
<button @click="calc">=</button>
<span style="background-color: aqua;">{
{sum}}</span>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
opration: "-",
num2: 0,
sum: 0
},
methods: {
calc() {
this.num1 = Number(this.num1);
switch (this.opration) {
case "+":
this.sum = this.num1 + this.num2;
break;
case "-":
this.sum = this.num1 - this.num2;
break;
case "*":
this.sum = this.num1 * this.num2;
break;
case "/":
this.sum = this.num1 / this.num2;
break; }
} }
})
</script>3. 루프에서 다음 데이터를 렌더링하고 데이터 이름을 표시합니다. 이 -- 라인을 클릭하면 데이터 이름을 알 수 있습니다. 상단에 검색창이 있고 후면에 검색버튼이 있으며 검색버튼을 클릭하면 입력내용에 따라 목록을 불러옵니다.
<div id="app">
{
{title}}
<ul>
<!-- i为索引 item为内容 -->
<input type="text" v-model="item1">
<button @click="search">检索</button>
<li v-for="(item,i) in list" @click="show(item.name)" v-show="flag">id：{
{item.id}} ----值：{
{item.name}}</li>
</ul>
<ul>
<li v-for="(item,i) in list1">id：{
{item.id}} ----值：{
{item.name}} </li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: "#app",
data: {
list: [{ id: 3, name: "张三丰" },
{ id: 5, name: "张⽆忌" },
{ id: 13, name: "杨逍" },
{ id: 33, name: "殷天正" },
{ id: 12, name: "赵敏" },
{ id: 97, name: "周芷若" }],
list1: [],
item1: null,
flag:true
},
methods: {
show(name) {
alert(name);
},
search() {
this.list1 = this.list.filter(item => {
return item.name == this.item1;
})
if(this.list1.length==0){
this.flag = true;
}else{
this.flag = false; }
} }
})
</script>책 펴기, 라디오 20점(30점), 빈칸 채우기 26점(26점), 문답 3점(18점), 프로그래밍 1점(26점)
포괄적이지 않은 오픈북 시험 후 요약에 지식 포인트를 기록하십시오.