Vue.js 2.5 새로운 기능 소개(추천)
TypeScript 는 마이크로소프트 가 개발 한 자유 와 오픈 소스 의 프로 그래 밍 언어 이다.이것 은 JavaScript 의 초 집합 이 며,본질 적 으로 이 언어 에 선택 할 수 있 는 정적 유형 과 클래스 기반 대상 프로 그래 밍 을 추가 합 니 다.2012 년 10 월 에 마이크로소프트 는 첫 번 째 공개 버 전의 TypeScript 를 발 표 했 고 2013 년 6 월 19 일 에 마이크로소프트 는 TypeScript 0.9 의 정식 버 전 을 발 표 했 으 며 지금까지 TypeScript 는 2.x 버 전 으로 발전 했다.
TypeScript 설치
TypeScript 를 설치 하 는 데 는 주로 두 가지 방법 이 있 습 니 다.
npm 방식 으로 설치(Node.js 패키지 관리자)
TypeScript 의 Visual Studio 플러그 인 설치
설명:Visual Studio 2016 과 Visual Studio 2013 업데이트 2 는 기본적으로 TypeScript 를 포함 합 니 다.npm 설치 명령 은 다음 과 같 습 니 다:
npm install -g typescript
TypeScript 파일 생 성
편집기 에 greeter.ts 파일 을 새로 만 들 고 다음 자 바스 크 립 트 코드 를 입력 하 십시오.
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
document.body.innerHTML = greeter(user); 컴 파일 코드
명령 줄 에서 TypeScript 컴 파 일 러 를 실행 하면 코드 를 컴 파일 할 수 있 습 니 다:
tsc greeter.tsTypeScript 웹 프로그램 실행현재 greeter.html 에 다음 코드 를 입력 하 십시오:
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>Vue.js 2.5 새로운 기능
Vue 2.5 Level E 가 발표 되 었 고 원래 2.x 를 바탕 으로 해당 하 는 개선 과 bug 에 대한 복 구 를 많이 했 습 니 다.현재 2.5 시리즈 의 최신 버 전 은 2.5.2 입 니 다.독자 가 Vue 2.5 의 내용 을 전면적으로 이해 하 기 를 원한 다 면 보기Vue 2.5 발표 설명를 통 해 상세 한 소 개 를 받 을 수 있다.정부의 소개 와 인터넷 에서 수집 한 자료 에 대해 이번 2.5 버 전 은 주로 다음 과 같은 몇 가지 개선 을 했다.
더 좋 은 TypeScript 통합
더 좋 은 오류 처리
단일 파일 구성 요소 의 기능 구성 요 소 를 더 잘 지원 합 니 다.
환경 과 무관 한 서버 렌 더 링
독 자 는 아래 의 링크 를 통 해 원문 소 개 를 볼 수 있다.
TypeScript 성명 개선
further improve Vue type declarations for canonical usage (#6391) db138e2
오류 처리 및 보고
improve error handling with new errorCaptured hook b3cd9bc [Details]
improve template expression error message e38d006 , closes #6771
improve option type checks b7105ae
기능 구성 요소
compiled templates for functional component support ea0d227
scoped CSS support for functional components 050bb33
서버 엔 드 렌 더 링
renderToString now returns a Promise if no callback is passed f881dd1 , closes #6160
add shouldPrefetch option (same signature as shouldPreload) 7bc899c , closes #5964
auto-remove initial state embed script if in production (#6763 ) 2d32b5d , closes #6761
now ships an environment-agnostic build of the server renderer in vue-server-renderer/basic.js c5d0fa0 Details
TypeScript 개선
Vue 2.0 발표 이후 개발 자 들 이 TypeScript 를 더 잘 통합 하 기 를 요청 해 왔 습 니 다.그때 부터 우 리 는 대부분의 핵심 라 이브 러 리(vue,vue-routervuex)에 공식 TypeScript 형식 성명 을 추가 했다.그러나 상 자 를 열 고 바로 사용 하 는 Vue API 를 사용 할 때 현재 의 통합 은 부족 하 다.예 를 들 어 TypeScript 는 Vue 가 사용 하 는 기본 대상 기반 API 의 this 형식 을 쉽게 추정 할 수 없습니다.Vue 코드 와 TypeScript 가 잘 작 동 하도록 vue-class-component 장식 기 를 사용 해 야 합 니 다.클래스 기반 문법 으로 Vue 구성 요 소 를 쓸 수 있 도록 해 줍 니 다.
클래스 기반 API 를 좋아 하 는 사용자 에 게 는 좋 을 수 있 지만 부족 합 니 다.유형 판단 을 위해 서 만 사용 자 는 서로 다른 API 를 사용 해 야 합 니 다.기 존의 Vue 코드 라 이브 러 리 를 TypeScript 로 옮 기 는 것 도 어렵 습 니 다.
올해 초 에 TypeScript 는 새로운 기능 을 도입 하여 TypeScript 가 대상 글자 에 기반 한 API 를 잘 이해 할 수 있 도록 하 였 으 며,이 는 Vue 의 유형 성명 을 개선 하 는 데 더욱 가능 하 게 하 였 다.TypeScript 팀 에서 온 Daniel Rosenwasser 는 야심 찬 PR 계획 을 세 웠 다.TypeScript 를 사용 하면 다음 과 같은 장점 이 있 습 니 다.
기본 Vue API 를 사용 할 때 this 의 정확 한 유형 을 추정 합 니 다.단일 파일 구성 요소 에서 도 유효 합 니 다!
구성 요소 의 props 설정 을 기반 으로 한 props 형식 추정
더 중요 한 것 은 이러한 개선 도 원생 자 바스 크 립 트 사용자 에 게 혜택 을 줄 수 있다 는 것 입 니 다!만약 당신 이 VSCode 를 사용 하고 우수한 Vetur 확장 자 를 설치 하고 있다 면,Vue 구성 요소 에서 네 이 티 브 자 바스 크 립 트 를 사용 할 때,당신 은 매우 완벽 한 자동 완성 알림 이나 유형 알림 을 얻 을 수 있 습 니 다!vue-language-server 때 문 입 니 다.이 Vue 구성 요소 의 내부 패 키 지 를 분석 하면 TypeScript 컴 파일 러 를 이용 하여 코드 에 대한 더 많은 정 보 를 추출 할 수 있 습 니 다.또한 언어 서비스 프로 토 콜 을 지원 하 는 모든 편집 기 는 vue-language-server 를 이용 하여 유사 한 기능 을 제공 할 수 있다.
설명:주의:TypeScript 사용 자 는 다음 패 키 지 를 최신 버 전 으로 업데이트 하여 형식 설명 을 호 환 해 야 합 니 다:vue-router,vuex,vuex-router-sync 와 vue-class-component.
오류 알림
2.4 및 더 빠 른 버 전에 서 는 일반적으로 전역 config.error Handleroption 을 사용 하여 프로그램의 예상 치 못 한 오 류 를 처리 합 니 다.물론 렌 더 링 함수 의 오 류 를 처리 하기 위해 renderError 구성 요소 옵션 을 사용 할 수도 있 습 니 다.
새 버 전에 서 vue 는 error Captured 갈 고 리 를 도 입 했 습 니 다.이 갈 고 리 를 가 진 구성 요 소 는 하위 구성 요소 트 리(자신 포함 하지 않 음)의 모든 오 류 를 캡 처 합 니 다.이것 은 React 의 사상 과 일치한다.
error Caputerd 를 이용 하려 면 유 니 버 설 구성 요 소 를 패키지 하여 다른 업무 구성 요 소 를 포함 하여 업무 구성 요소 의 이상 을 포착 하고 해당 하 는 전시 처 리 를 할 수 있 습 니 다.다른 업무 구성 요소(another component)의 이상 을 포함 하고 처리 하기 위해 공식 적 으로 제공 하 는 간단 한 예 시 를 보 여 줍 니 다.
Vue.component('ErrorBoundary', {
data: () => ({ error: null }),
errorCaptured (err, vm, info) {
this.error = `${err.stack}
found in ${info} of component`
return false
},
render (h) {
if (this.error) {
return h('pre', { style: { color: 'red' }}, this.error)
}
// ignoring edge cases for the sake of demonstration
return this.$slots.default[0]
}
})
<error-boundary>
<another-component />
</error-boundary>전역 의 error Handler 를 정의 하면 모든 이상 이 error Hadnler 에 전 달 됩 니 다.정의 가 없 으 면
error Handler,이러한 이상 은 단독 분석 서비스 에 보고 할 수 있 습 니 다.
한 구성 요소 에서 계승 이나 부모 구성 요 소 를 통 해 여러 개의 error Capured 갈고리 함 수 를 정의 하면 이 갈고리 함수 들 은 똑 같은 이상 정 보 를 받 을 수 있 습 니 다.
error Capured 갈고리 에서 return false 를 사용 하여 이상 전 파 를 막 을 수 있 습 니 다.이 이상 은 이미 처리 되 었 으 므 로 무시 할 수 있 습 니 다.그리고 다른 error Capured 갈고리 함수 와 전역 의 error Handler 함수 가 이 이상 을 촉발 하 는 것 을 막 을 수 있 습 니 다.
SFC 함수 식 구성 요소
vue-loader v 13.3.0 이상 버 전 을 통 해 단일 파일 구성 요소 에서'함수 식 구성 요소'를 정의 할 수 있 고 템 플 릿 컴 파일,역할 영역 CSS 와 열 배치 등 기능 을 지원 합 니 다.
함수 식 구성 요소 의 정 의 는 template 탭 에서 functional 속성 을 정의 하여 설명 해 야 합 니 다.또한 템 플 릿 에 있 는 표현 식 의 실행 컨 텍스트 는 함수 식 성명 컨 텍스트 이기 때문에 구성 요소 의 속성 에 접근 하려 면 props.xxx 를 사용 하여 가 져 와 야 합 니 다.예 를 들 면 다음 과 같다.
<template functional>
<div>{{ props.msg }}</div>
</template>vue-server-render 를 사용 하여 SSR 응용 프로그램 을 구축 할 때 기본 값 은 Node.js 환경 이 필요 합 니 다.phop-v8js 나 Nashorn 같은 자바 스 크 립 트 실행 환경 에서 실행 할 수 없습니다.v 2.5 에서 이 를 보완 하여 상기 환경 에서 SSR 응용 을 정상적으로 실행 할 수 있 도록 했다.
php-v8js 와 Nashorn 에서 환경의 준비 단계 에서 global 과 process 전역 대상 을 모 의 하고 process 의 환경 변 수 를 따로 설정 해 야 합 니 다.process.env.VUE 를 설정 해 야 합 니 다.ENV 를"server"로 설정 하고 process.env.NODEENV 는'development'또는'production'이다.
또 Nashorn 에 서 는 자바 원생 timers 로 Promise 와 settimeout 에 poly fill 을 제공 해 야 한다.공식 적 으로 php-v8js 에서 의 사용 예 시 를 제시 했다.다음 과 같다.
<?php
$vue_source = file_get_contents('/path/to/vue.js');
$renderer_source = file_get_contents('/path/to/vue-server-renderer/basic.js');
$app_source = file_get_contents('/path/to/app.js');
$v8 = new V8Js();
$v8->executeString('var process = { env: { VUE_ENV: "server", NODE_ENV: "production" }}; this.global = { process: process };');
$v8->executeString($vue_source);
$v8->executeString($renderer_source);
$v8->executeString($app_source);
?>
// app.js
var vm = new Vue({
template: `<div>{{ msg }}</div>`,
data: {
msg: 'hello'
}
})
// exposed by vue-server-renderer/basic.js
renderVueComponentToString(vm, (err, res) => {
print(res)
})v-on 수식 부호
키 키 자동 수정자
Vue v 2.5 이전 버 전에 서 는 v-on 에서 별명 이 내 장 된 키보드 키 값 을 사용 하려 면 키 코드 를 수정자(@keyup.13="foo")로 직접 사용 하거나 config.keyCodes 를 사용 하여 키 값 에 별명 을 등록 해 야 합 니 다.v 2.5 에 서 는 합 법 적 인 키 키 값 key 값(MDN 의 Keyboard Event.key 참조)을 수정자 로 연결 하여 사용 할 수 있 습 니 다.다음 과 같다.
<input @keyup.page-down="onPageDown"> $event.key === ‘PageDown' 때 만 호출 된다.메모:기 존 키 수식 자 는 여전히 사용 할 수 있 습 니 다.IE9 에서 일부 키 값(.esc 와 방향 키 의 key)은 일치 하 는 값 이 아 닙 니 다.IE9 를 호 환 하려 면 IE9 에 내 장 된 별명 으로 처리 해 야 합 니 다.
.exact 수정자
.exact 수식 자 를 추가 하 였 습 니 다.이 수식 자 는 다른 시스템 수식 자(.ctrl,.alt,.shift and.meta)와 결합 하여 사용 해 야 합 니 다.강제 여러 개의 수식 자 를 구분 하여 누 르 면 이벤트 처리 함 수 를 촉발 할 수 있 습 니 다.다음 과 같다.
<!-- Alt Shift -->
<button @click.ctrl="onClick">A</button>
<!-- Ctrl ， -->
<button @click.ctrl.exact="onCtrlClick">A</button>이전에 template 탭 에서 scope 속성 을 사용 하여 scoped slot 를 정의 하려 면 아래 와 같이 정의 할 수 있 습 니 다.
<comp>
<template scope="props">
<div>{{ props.msg }}</div>
</template>
</comp>
<comp>
<div slot-scope="props">
{{ props.msg }}
</div>
</comp>기본 값 옵션 추가
이번 조정 에서 Injections 는 선택 가능 한 설정 으로 사용 할 수 있 으 며 기본 값 을 설명 할 수 있 습 니 다.from 으로 원 속성 을 표시 할 수도 있 습 니 다.
export default {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
export default {
inject: {
foo: {
from: 'bar',
default: () => [1, 2, 3]
}
}
}위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Vue.js 2.5 의 새로운 특성 소개 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue 2.5 Level E 발표:새로운 기능 특성 일람Vue 2.5 Level E 의 발 표를 발표 하 게 되 어 기 쁩 니 다!이번 발 표 는 여러 가지 기능 향상 을 포함 하고 우 리 는 발표 설명 을 조회 하여 완전한 상세 한 정 보 를 얻 는 것 을 추천 합 니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
