Vue.js의 충성스러운 사용자로서, 나는이 아름다운 언어를 칭찬하기 위해 몇 가지 기사를 써야한다고 생각합니다. 그것에 대한 나의 전반적인 평가는 "간단하지만 우아하지만 작지만 재능있는 사람들은 부족하지 않습니다"입니다. 다음은 vue.js에 대한 관심을 자극하기를 희망 하면서이 문장 주위에 vue.js를 소개합니다.
vue.js 소개
Vue.js의 저자는 Google Creative Lab에서 일하는 Evan You (You Yuxi)입니다. Vue는 개인 프로젝트이지만 개인적으로 개발 전망 측면에서 Google AngularJ보다 열등하지 않다고 생각합니다. Vue (Angular 1.0+ 버전)와 간단한 비교를 할 것입니다.
VUE의 주요 기능은 공식 웹 사이트 (http://cn.vuejs.org/)에 소개됩니다.
(1) 간결한 (2) 경량 (3) 빠른 (4) 데이터 드라이버 (5) 모듈 친화적 인 (6) 구성 요소화
단순한
다음은 양방향 바인딩을 구현하기위한 Angular 코드입니다.
// html <body ng-app = "myapp"> <div ng-controller = "myctrl"> <p> {{note}} </p> <입력 유형 = "text"ng-model = "note"> </div> // jsvar myModule = angular.module ( 'myapp', []); myModule.controller ( 'myctrl', [ '$ scopp', function ($ scope) {$ scope.note = '';]);그런 다음 Vue 코드를보십시오
//
이에 비해 개인적으로 Vue의 코드 작문 스타일은 더 간결하고 이해하기 쉽다고 생각합니다.
우아함이 없습니다
VUE는 비교적 가벼운 프레임 워크이지만 간단하고 가볍고 사용자 친화적입니다. 그것이 제공하는 API는 또한 이해하기 쉽고 매우 편리한 지침과 속성을 제공합니다.
예를 들어:
(1) 클릭 이벤트를 묶습니다
<a v-on : 클릭 = "dosomething"> </a>
다음과 같이 축약 할 수 있습니다.
<a @click = "dosomething"> </a>
(2) 동적 속성을 바인딩합니다
<a v-bind : href = "url"> </a>
다음과 같이 축약 할 수 있습니다.
<a : href = "url"> </a>
(3) 편리한 수정 자
<!-거품의 클릭 이벤트 방지->
<a @click.stop = "dosomething"> </a>
<!-이벤트는 Enter 키를 눌렀을 때만 트리거됩니다->
<input @keyup.enter = "제출">
(4) 실제 매개 변수 특성
<!-디오 케이스는 최소 지연을 설정합니다->
<입력 v-model = "note"debounce = "500">
<!-"입력"이벤트 대신 "change"에서 데이터를 업데이트합니다->
<입력 v-model = "msg"Lazy>
어때요, 그렇게 우아하다고 느끼나요?
작은
작은 것에 대해 말하면, 우리는 먼저 VUE의 소스 코드 크기에주의를 기울여야합니다. VUE의 프로덕션 버전 (즉, 최소 버전)의 소스 코드는 72.9KB에 불과합니다. 공식 웹 사이트에 따르면 GZIP는 압축 후 25.11kB에 불과하며 Angular의 144KB보다 절반이 작습니다.
소형의 장점 중 하나는 사용자가 해당 솔루션을보다 자유롭게 선택할 수 있고 다른 라이브러리와 일치하는 측면에서 더 많은 공간을 제공한다는 것입니다.
예를 들어 VUE의 핵심에는 기본적으로 라우팅 및 Ajax 기능이 포함되지 않지만 프로젝트에서 라우팅 및 Ajax가 필요한 경우 VUE에서 제공하는 공식 라이브러리 VUE-Router 및 타사 플러그인 VUE RESOURCE를 직접 사용할 수 있습니다. 동시에 JQuery의 Ajax 등과 같은 다른 라이브러리 나 플러그인을 사용할 수도 있습니다.
매우 유연하다고 느끼지 않습니까?
위대한 주인이 많이 있습니다
Vue는 작지만 "참새는 작고 모든 내부 장기가 있습니다"이며 대규모 응용 프로그램을 쉽게 구축 할 수 있습니다.
(1) 모듈 식
CommonJS, 요구 사항 또는 SEAJS와 같은 일부 타사 모듈 빌딩 도구와 결합하여 코드 모듈화를 쉽게 달성 할 수 있습니다.
그러나 여기서는 위에서 언급 한 건축 도구를 사용하지 않는 것이 좋습니다. 현재 ES6의 모듈 식 기능을 직접 사용한 다음 웹 팩과 함께 패키지하는 것이 가장 인기있는 솔루션입니다.
ES6 모듈의 함수를 이해하지 못하면 http://es6.ruanyifeng.com/#docs/module을 참조하십시오.
향후 기사에서는 웹 팩의 구성을 포함하여 소개합니다.
(2) 구성 요소
Vue의 구성 요소화 기능은 그 하이라이트입니다. 페이지의 특정 구성 요소의 HTML, CSS 및 JS 코드를 관리를위한 .Vue 파일에 넣으면 코드의 유지 관리가 크게 향상 될 수 있습니다.
예를 들어:
// app.vue<emplate> <div v-text = "note"> </div> </템플릿> <cript> 내보내기 기본값 {data () {return {note : '이것은 구성 요소의 HTML 템플릿입니다! '}}} </script> <Style Scoped> .box {color : #000;} </style>
구성 요소에 일부 전처리 언어를 쓸 수도 있습니다.
// app.vue <template lang = 'jade'> div (class = "box"v-text = "text") </템플릿> <cript> 내보내기 기본값 {data () {return {참고 : '이것은 구성 요소의 html 템플릿입니다! '}}} </script> <Style lang = "Styles">. Box Color : #000 </style>물론 Webpack을 통해 패키지해야합니다. WebPack + Vue-Loader를 사용하고 동시에 ES6 구문을 사용하는 것이 좋습니다. 변환하려면 바벨을 설치해야합니다. 이 기사는 vue.js에 대한 간단한 토론이기 때문에 여기에서 심도있는 소개를하지 않을 것입니다.
(3) 라우팅
Angular와 마찬가지로 Vue에는 라우팅 기능이 있습니다. 라우팅 기능을 통해 각 구성 요소의 주문형로드를 실현하고 단일 페이지 응용 프로그램을 쉽게 구축 할 수 있습니다. 간단한 라우팅 구성 파일은 다음과 같습니다.
// router.jsuse strict'export default function (router) {router.map ({ '/': {component : function (resolve)) {require ([ './ components/foo.vue'], resolve)}, '/foo': {component : function (resolve)) {components/foo.) }}, '/bar': {component : function (resolve) {require ([ './ components/bar.vue'], resolve)}}})}특정 라우팅 구성 및 사용법을 보려면 http://vuejs.github.io/vue-router/zh-cn/index.html에 의해 제공된 공식 문서를 방문하십시오.
요약
나는 개인적으로 일부 프론트 엔드 기술이 통합되어 있다고 믿습니다. 언어 나 프레임 워크 자체를 배우는 것은 기술을 배우는 것이 아닙니다. 가장 중요한 것은 그 생각을 배우는 것입니다. 사고 수준 만 확장되며 다른 기술을 쉽게 배우기가 쉽습니다. Vue가 우리에게 가져 오는 것은 문제를 해결하기 위해 프론트 엔드에 대한 새로운 생각입니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.