Vue.js

vue.js 의 전체적인 평가"간단 하면 서도 우아 함 을 잃 지 않 고 작고 장인 이 적지 않다"
Vue.js 안내
Vue.js 의 저 자 는 Evan You(유 우 계)로 구 글 크 리 에이 티 브 랩 에서 근무 하고 있 습 니 다.Vue 는 개인 프로젝트 이지 만 발전 전망 에 있어 서 개인 적 으로 구 글 의 AngularJs 에 뒤지 지 않 는 다 고 생각 합 니 다.다음은 Vue 와 Angular(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>
    <input type="text" ng-model="note">
  </div>
</body>

// js
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
  $scope.note = '';
]);

그리고 Vue 코드 를 다시 한 번 볼 게 요.


// html
<body>
  <div id="app">
    <p>{{ note }}</p>
    <input type="text" v-model="note">
  </div>
</body>

// js
var vm = new Vue({
  el: '#app',
  data: {
    note: ''
  }
})

비교 해 보면 저 는 개인 적 으로 Vue 의 코드 작성 스타일 이 더욱 간결 하고 알 기 쉽다 고 생각 합 니 다.
우아 함 을 잃 지 않다
Vue 는 비교적 경량급 의 구조 이지 만 간단 하고 가 벼 운 동시에 매우 인성 화 되 었 고 API 도 쉽게 이해 할 수 있 으 며 편리 한 명령 과 속성 도 제공 했다.
예 를 들 면:
(1)귀속 클릭 이벤트<a v-on:click="doSomething"></a>다음 과 같이 간략하게 쓸 수 있다.<a @click="doSomething"></a>(2)귀속 동적 속성<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>다음 과 같이 간략하게 쓸 수 있다.<a :href="url" rel="external nofollow" rel="external nofollow" ></a>(3)편리 한 장식 부적


<!--          -->
<a @click.stop="doSomething"></a>

<!--                -->
<input @keyup.enter="submit">

(4)실 용적 인 매개 변수 특성


<!-- debounce           -->
<input v-model="note" debounce="500">

<!--   "change"     "input"         -->
<input v-model="msg" lazy>

어 때,너무 우아 하지 않 아?
깜찍 하 다
깜찍 하 다 면 먼저 Vue 의 소스 크기 를 주목 해 야 한다.Vue 의 생산 버 전(즉 min 버 전)소스 코드 는 72.9kb 에 불과 하고 홈 페이지 에 서 는 gzip 압축 후 25.11kb 에 불과 하 며 Angular 의 144 kb 에 비해 절반 으로 줄 었 다.
작은 장점 중 하 나 는 사용자 가 해당 하 는 해결 방안 을 더욱 자 유 롭 게 선택 할 수 있 고 다른 라 이브 러 리 에 맞 춰 사용자 에 게 더 큰 공간 을 주 는 것 이다.
예 를 들 어 Vue 의 핵심 은 기본적으로 경로 와 Ajax 기능 을 포함 하지 않 습 니 다.그러나 프로젝트 에 경로 와 AJAX 가 필요 하 다 면 Vue 가 제공 하 는 공식 라 이브 러 리 Vue-router 및 제3자 플러그 인 vue-resource 를 직접 사용 할 수 있 습 니 다.또한 jQuery 의 AJAX 등 다른 라 이브 러 리 나 플러그 인 을 사용 할 수 있 습 니 다.
너무 유연 한 것 같 지 않 아 요?
훌륭 한 장인 이 적지 않다.
Vue 는 작고 깜찍 하지만'참 새 는 작 지만 오장 이 다 갖 춰 져 있다'며 대형 애플 리 케 이 션 을 구축 할 때 도 손 에 잡 혔 다.
(1)모듈 화
일부 제3자 모듈 구축 도구,예 를 들 어 CommonJS,RequireJS 또는 SeaJS 를 결합 하면 코드 의 모듈 화 를 쉽게 실현 할 수 있다.
그러나 여기 서 소 편 은 상기 구축 도 구 를 사용 하지 않 고 ES6 의 모듈 화 기능 을 직접 사용 한 다음 에 웹 팩 과 결합 하여 해당 포장 을 하 는 것 이 현재 가장 핫 한 방안 이다.
앞으로 의 글 에서 도 웹 팩 의 설정 을 포함 하여 소개 하 겠 습 니 다.
(2)구성 요소 화
Vue 의 구성 요소 화 기능 은 큰 하 이 라이트 라 고 할 수 있 습 니 다.페이지 에 있 는 한 구성 요소 의 html,CSS,js 코드 를 하나의 vue 파일 에 넣 어 관리 하면 코드 의 유지 성 을 크게 향상 시 킬 수 있 습 니 다.
예 를 들 면:


// App.vue
<template>
  <div class="box" v-text="note"></div>
</template>
<script>
export default {
  data () {
    return {
      note: '       html  ！'
    }
  }
}
</script>
<style scoped>
.box {
  color: #000;
  }
</style>

우 리 는 또한 구성 요소 에 예비 처리 언어 를 쓸 수 있다.


// App.vue
<template lang='jade'>
  div(class="box" v-text="text")
</template>
<script>
export default {
  data () {
    return {
      note: '       html  ！'
    }
  }
}
</script>
<style lang="stylus">
.box color: #000
</style>

물론 이렇게 쓰 면 웹 팩 을 통 해 포장 해 야 합 니 다.웹 팩+vue-loader 를 사용 하 는 방식 을 추천 하 며 ES6 문법 을 사용 하여 babel 을 설치 하여 전환 해 야 합 니 다.글 은 Vue.js 에 대한 간단 한 설명 이기 때문에 여기 서 는 깊이 있 는 소 개 를 하지 않 습 니 다.
(3)경로
Angular 와 마찬가지 로 Vue 도 경로 기능 을 가지 고 있다.경로 기능 을 통 해 우 리 는 각 구성 요소 의 필요 에 따라 불 러 오고 단일 페이지 응용 을 쉽게 구축 할 수 있 습 니 다.다음은 간단 한 경로 설정 파일 입 니 다.


// router.js
'use strict'
export default function(router) {
  router.map({
     '/': {
       component: function (resolve) {
         require(['./components/Foo.vue'], resolve)
       }
     },
     '/foo': {
       component: function (resolve) {
         require(['./components/Foo.vue'], resolve)
       }
     },
     '/bar': {
       component: function (resolve) {
         require(['./components/Bar.vue'], resolve)
       }
     }
  })
}

구체 적 인 경로 설정 과 사용 을 보 려 면 공식 적 으로 제공 하 는 문 서 를 이동 하 십시오.http://vuejs.github.io/vue-router/zh-cn/index.html
총결산
개인 적 으로 전단 의 일부 기술 은 모두 융합 되 고 관통 된다 고 생각 합 니 다.하나의 언어 나 구조 자 체 를 배 우 는 것 은 그의 기술 을 배우 기 위해 서가 아니 라 가장 중요 한 것 은 그의 사 고 를 배 우 는 것 입 니 다.사고 차원 만 연장 되 고 다른 기술 을 배 울 때 뜻 대로 되 는 것 을 발견 할 수 있 습 니 다.Vue 가 우리 에 게 준 것 은 전단 의 문 제 를 해결 하 는 새로운 사고 이다.
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기

v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Vue.js

좋은 웹페이지 즐겨찾기