1. Vue.js 소개
1. VUE의 주요 특징 : (1) 간결한 (2) 경량 (3) 빠른 (4) 데이터 드라이버 (5) 모듈 친화적 인 (6) 구성 요소화
(1) 간결합니다
다음은 양방향 바인딩을 구현하기위한 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의 코드 작문 스타일은 더 간결하고 이해하기 쉽다고 생각합니다.
(2) 우아함이없는 것이 아닙니다
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) 실제 매개 변수 특성
<! -DeDcakes 최소 지연 설정-> <입력 v-model = "note"debounce = "500"> <!-"입력"이벤트 대신 "change"에서 데이터를 업데이트합니다-> <input v-model = "msg"lazy>
어때요, 그렇게 우아하다고 느끼나요?
(3) 작은 팁
작은 것에 대해 말하면, 우리는 먼저 VUE의 소스 코드 크기에주의를 기울여야합니다. VUE의 프로덕션 버전 (즉, 최소 버전)의 소스 코드는 72.9KB에 불과합니다. 공식 웹 사이트에 따르면 GZIP는 압축 후 25.11kB에 불과하며 Angular의 144KB보다 절반이 작습니다.
소형의 장점 중 하나는 사용자가 해당 솔루션을보다 자유롭게 선택할 수 있고 다른 라이브러리와 일치하는 측면에서 더 많은 공간을 제공한다는 것입니다.
예를 들어 VUE의 핵심에는 기본적으로 라우팅 및 Ajax 기능이 포함되지 않지만 프로젝트에서 라우팅 및 Ajax가 필요한 경우 VUE에서 제공하는 공식 라이브러리 VUE-Router 및 타사 플러그인 VUE RESOURCE를 직접 사용할 수 있습니다. 동시에 JQuery의 Ajax 등과 같은 다른 라이브러리 나 플러그인을 사용할 수도 있습니다.
매우 유연하다고 느끼지 않습니까?
(4) 많은 위대한 주인이 있습니다
Vue는 작지만 "참새는 작고 모든 내부 장기가 있습니다"이며 대규모 응용 프로그램을 쉽게 구축 할 수 있습니다.
1) 모듈 식
CommonJS, 요구 사항 또는 SEAJS와 같은 일부 타사 모듈 빌딩 도구와 결합하여 코드 모듈화를 쉽게 달성 할 수 있습니다.
그러나 여기서는 위에서 언급 한 건축 도구를 사용하지 않는 것이 좋습니다. 현재 ES6의 모듈 식 기능을 직접 사용한 다음 웹 팩과 함께 패키지하는 것이 가장 인기있는 솔루션입니다.
ES6 모듈의 기능을 이해하지 못하면 자세한 내용은 링크 주소를 참조하십시오.
향후 기사에서는 웹 팩의 구성을 포함하여 소개합니다.
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)}}})}2. 부트 페이지 구성 요소 소개
실제로, 그것은 고급 구성 요소가 아닙니다. 반대로, 그것은 실제로 간단한 테이블 페이징 구성 요소 일뿐입니다. 최근 프로젝트에서 테이블 페이징 구성 요소가 필요하기 때문입니다. VUE 공식 구성 요소 라이브러리 페이지 매김 구성 요소는 나에게 너무 강력하거나 적합하지 않으므로 직접 썼습니다. 나와 같은 사람은 간단한 페이징 기능을 구현하기 위해 간단한 페이징 구성 요소가 필요할 것입니다. 나는 여기서 그것을 공유 할 것이고, 모두가 구덩이를 채울 것입니다.
고급 구성 요소가 필요한 경우 공식 VUE 구성 요소 라이브러리로 이동할 수 있습니다.
(1) 사용 방법
.Vue 구성 요소 파일에서 이와 같은 템플릿, 즉 HTML 코드를 작성합니다.
<TABLE> <THEAD> <TR> <th> ID </th> <th> 이름 </th> <th> 내용 </th> <th> 컨텐츠 </th> <th> 비고 </th> </th> </th> </thead> <tbody> <ttr v-for = "tableList"> <td v-text = "data.num"> </td> <td> <td>. v-text = "data.contents"> </td> <td v-text = "data.remark"> </td> </tbody> <tfoot> <td> <td colspan = "4"> <div> <boot-page : async = "false": data ": lens ="enarr "> pagelen ="pagelen = "pagelen = </td> </tr> </tfoot> </table>
<boot-page> tag async에서 서버 쪽에서 데이터를 얻을 것인지, 거짓은 아니오; 데이터는 정적 테이블 데이터 배열입니다. 렌즈는 페이지 당 표시되는 행의 배열입니다. Page-Len은 표시 할 수있는 페이지 수입니다.
정적 데이터를 사용하는 자바 스크립트 코드, 즉 스크립트 태그의 내용은 다음과 같습니다.
<cript> 부팅 페이지에서 './components/bootpage.vue'내보내기 기본값 {data () {return {lenarr : [10, 50, 100], // pagelen 당 디스플레이 길이 : 5, // 표시 될 수있는 페이지 수 : [{num : 1, author : 'luozh', contents : : 'bootpage'} 'luozh', 내용 : '123', 비고 : 'bootpage'}, {num : 1, 저자 : 'luozh', contents : '123', '123', 'bootpage'}, {num : 1, 저자 : 'luozh', 목차 : '123', 'bootpage', '{123', ','123 ',', ',', '123' 'bootpage'}], // 테이블 원시 데이터, 서버 데이터를 사용할 때 TableList를 사용할 필요가 없습니다 : [] // Pagination Component}}}, 구성 요소 : {bootPage}, 이벤트 : {// pagination 'data'(data) {this.tablist = data}}}일반적으로 정적 표 형 데이터를 거의 사용하지 않으며 대부분의 응용 프로그램 데이터는 서버 측에서 얻어 지므로 서버 페이지 매김 데이터를 얻는 방법이 있습니다.
서버 데이터를 사용하는 구성 요소 HTML은 다음과 같습니다.
<boot-page : async = "true": lens = "lenarr": url = "url": page-len = "pagelen": param = "param"> </boot-page>
여기서 URL은 서버의 요청 주소입니다. Param은 서버로 전송 해야하는 매개 변수 객체입니다.
서버 데이터 JavaScript를 사용하는 코드는 다음과 같습니다.
<components/bootpage.vue 'export default {data () {return {lenarr : [10, 50, 100], [10, 50, 100], // pagelen 당 디스플레이 길이 : 5, // url을 표시 할 수있는 페이지 수 :'/bootpage/', // request path param : // databeter parameter tabler tabler the server : [] Pagination Component}}, Methods : {refresh () {this. $ broadcast ( 'freforme') // 테이블 새로 고침 기능이 제공됩니다}}, 구성 요소 : {bootpage}, 이벤트 : {// Pagination 구성 요소가 반환 한 테이블 데이터 (여기서 서버에서 반환하는 데이터) '데이터'(데이터) {this.tablist =}}}}}}}}}}}}}}참고 : 구성 요소 테이블에 전달 된 배열 컨텐츠 외에도 서버는 Page_num이라는 총 페이지 수의 키 이름도 필요합니다.
(2) 구성 요소 소스 코드
Pagination의 구현은 여기에 소스 코드가 표시되지 않습니다. 모든 소스 코드를 내 github, 주소에 업로드했습니다.
미리 상기시켜 드리겠습니다.이 구성 요소를 몰아내는 데 몇 시간이 걸렸으므로 VUE 구성 요소의 형식과 사양에 부적절했고 완전히 독립적이지 않았기 때문에 의식적으로 구덩이를 채 웁니다. 나는 여기서만 공유 할 것입니다.
물론 프로젝트 사용에 맞게 구성 요소의 코드를 의지 할 수도 있습니다. 결국, 크고 완전한 페이징 구성 요소를 구현하는 것은 매우 복잡합니다.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 자습서"로 편집되었으며 모두가 배우고 읽을 수 있습니다.
vue.js 구성 요소에 대한 튜토리얼은 특수 주제 vue.js 구성 요소 학습 자습서를 클릭하여 학습하십시오.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.