vue.js 용법 과 특성 을 상세히 해석 하 다.

앞.  말.
최근 에 Vue.js 로 데이터 조회 플랫폼 을 만 들 었 고 퍼 즐 게임 도 했 는데 갑자기 vue 의 강 함 을 깊이 느 꼈 다.
Vue.js 는 사용자 인터페이스(user interface)를 구축 하 는 점진 적 인 프레임 워 크 입 니 다.다른 헤비급 프레임 워 크 와 달리 Vue 는 근본적으로 최소 비용,점진 적 인 증 가 량(incrementally adoptable)의 디자인 을 사용한다.Vue 의 핵심 라 이브 러 리 는 그림 층 에 만 집중 되 고 다른 제3자 라 이브 러 리 나 기 존 프로젝트 와 쉽게 통합 된다.다른 한편,단일 파일 구성 요소 와 Vue 생태계 가 지원 하 는 라 이브 러 리 와 결합 하여 사용 할 때 Vue 도 복잡 한 단일 페이지 응용 프로그램 에 강력 한 구동 을 제공 할 수 있다.
Vue.js 는 현재 2.x 로 업데이트 되 었 고 기능 과 문법 에 있어 어느 정도 업그레이드 되 고 수정 되 었 으 며 본 고 는 먼저 기초 내용 을 소개 한다.
1.초보 자 가이드
vue 의 사용 은 매우 간단 합 니 다.vue.js 나 vue.min.js 를 다운로드 하여 직접 가 져 오 면 사용 할 수 있 습 니 다.
  2.vue 초보 입문
2.1 사 운 드 렌 더 링
Vue.js 의 핵심 은 간결 한 템 플 릿 문법 으로 데 이 터 를 DOM 으로 렌 더 링 할 수 있다 는 것 입 니 다.

<div id="app">
 {{ message }}
</div>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

이렇게 입력:Hello Vue!
저희 가 첫 번 째 Vue 앱 을 만 들 었 습 니 다!이것 은 문자열 템 플 릿 을 렌 더 링 하 는 것 과 매우 유사 해 보이 지만 Vue 는 뒤에서 많은 작업 을 했 습 니 다.현재 데이터 와 DOM 은 이미 연결 되 어 있 으 며,모든 데이터 와 DOM 은 응답 식 이다.우 리 는 어떻게 이 모든 것 에 대해 분명하게 이해 합 니까?브 라 우 저의 JavaScript 콘 솔(현재,현재 페이지 에서 열 림)을 열 고 app.message 의 값 을 설정 하면 위의 예제 에 표 시 된 DOM 요 소 를 볼 수 있 습 니 다.
텍스트 플러그 인(text interpolation)을 제외 하고 우 리 는 이러한 방식 으로 DOM 요소 속성 을 연결 할 수 있 습 니 다.

<div id="app-2">
 <span v-bind:title="message">
         ，
             title！
 </span>
</div>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '      ' + new Date().toLocaleString()  }
})

마 우 스 를 몇 초 동안 멈 추 면 동적 인 힌트 를 볼 수 있다.
여기 서 우 리 는 새로운 내용 을 만 났 다.당신 이 본 v-bind 속성 을 명령 이 라 고 합 니 다.명령 은 접두사 v-를 가지 고 있 으 며,Vue 가 제공 하 는 전용 속성 을 표시 합 니 다.렌 더 링 된 DOM 에서 전문 적 인 응답 식 행동 을 할 것 이라는 것 을 이미 알 고 있 을 것 이다.한 마디 로 하면 이 명령 의 역할 은"이 요소 의 title 속성 을 Vue 인 스 턴 스 의 message 속성 과 연결 하여 업데이트 하 는 것"입 니 다.
브 라 우 저의 JavaScript 콘 솔 을 다시 열 고 app 2.message='새로운 message'를 입력 하면 title 속성 을 연결 한 HTML 이 업데이트 되 었 음 을 다시 볼 수 있 습 니 다.
2.1 조건 과 순환
원 소 를 전환 하 는 디 스 플레이 를 제어 하 는 것 도 상당히 간단 합 니 다.

<div id="app-3">
 <p v-if="seen">        </p>
</div>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

콘 솔 에 app 3.seen=false 를 계속 입력 하면 span 이 사라 지 는 것 을 볼 수 있 을 것 입 니 다.
이 예제 에 따 르 면 우 리 는 데 이 터 를 텍스트 와 속성 에 연결 할 수 있 을 뿐만 아니 라 데 이 터 를 DOM 구조 에 연결 할 수도 있다.그리고 Vue 는 Vue 가 요 소 를 삽입/업데이트/삭제 할 때 과도 효 과 를 자동 으로 사용 할 수 있 는 강력 한 과도 효과 시스템 을 제공 합 니 다.
또 다른 명령 도 있 는데,각각 다른 특수 기능 을 가지 고 있다.예 를 들 어 v-for 명령 은 배열 의 데 이 터 를 사용 하여 항목 목록 을 보 여줄 수 있 습 니 다.

<div id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</div>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '   JavaScript' },
  { text: '   Vue' },
  { text: '         ' }
 ]
 }
})

3.vue 인 스 턴 스
모든 Vue 프로그램 은 Vue 함 수 를 통 해 새로운 Vue 인 스 턴 스 를 만 들 기 시 작 했 습 니 다.

var vm = new Vue({
 //   
})

MVVM 모델 을 완전히 따 르 지 는 않 았 지만 Vue 의 디자인 은 여전히 시사 점 을 받 았 다.약속 으로 저 희 는 보통 변수 vm(ViewModel 의 약칭)을 사용 하여 Vue 인 스 턴 스 를 표시 합 니 다.
3.1 data 와 methods
Vue 인 스 턴 스 를 만 들 때 data 대상 에서 찾 은 모든 속성 을 Vue 응답 시스템 에 추가 합 니 다.이러한 속성의 값 이 변 할 때마다 보 기 는'즉시 응답'하고 해당 하 는 새 값 을 업데이트 합 니 다.

// data   
var data = { a: 1 }
//          Vue    
var vm = new Vue({
 data: data
})
//           ！
vm.a === data.a // => true
//         ，
//         
vm.a = 2
data.a // => 2
// ...     
data.a = 3
vm.a // => 3

data 대상 이 변 할 때마다 보 기 를 다시 렌 더 링 합 니 다.주의해 야 할 것 은 인 스 턴 스 가 만 들 어 졌 다 면 data 에 존재 하 는 속성 만 이 응답 식 입 니 다.즉,인 스 턴 스 를 만 든 후에 새로운 속성 을 추가 합 니 다.예 를 들 어:

vm.b = 'hi'

그리고 수정 b 는 어떠한 보기 업데이트 도 촉발 하지 않 습 니 다.미리 알 고 있 으 면 시작 이 비어 있 거나 존재 하지 않 는 속성 을 사용 할 것 입 니 다.초기 값 을 미리 설정 해 야 합 니 다.예 를 들 면:

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

data 속성 을 제외 하고 Vue 인 스 턴 스 는 유용 한 인 스 턴 스 속성 과 방법 도 드 러 냈 다.이 속성 과 방법 은 사용자 정의(user-defined)의 속성 과 구분 할 수 있 도록 접두사$를 가지 고 있 습 니 다.예 를 들 면:

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch        
vm.$watch('a', function (newValue, oldValue) {
 //         `vm.a`      
})

3.2vue 인 스 턴 스 의 성명 주기
vue 실례 의 성명 주 기 는 매우 중요 한 개념 으로 이해 한 후에 이 를 통 해 많은 기능 을 실현 할 수 있다.
이 코드 좀 보 세 요.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="container">      ，    ！</div>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //       vm         
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('  vue   ',this);
   },
   created: function(){
    showData('  vue   ',this);
   },
   beforeMount:function(){
    showData('   dom ',this);
   },
   mounted: function(){
    showData('   dom ',this);
   },
   beforeUpdate:function(){
    showData('       ',this);
   },
   updated:function(){
    showData('       ',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue     ',this);
   },
   destroyed:function(){
    showData('vue     ',this);
   }
  });
  function realDom(){
   console.log('  dom  ：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data   ：' + obj.test)
   console.log('     ：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

효과 도 한번 볼 게 요.

콘 솔 의 인쇄 효 과 를 통 해 알 수 있 듯 이 예화 vue 대상 은 크게 vue 인 스 턴 스 를 만 들 고 dom 에 마 운 트 하 며 데이터 변화 업데이트,vue 인 스 턴 스 를 없 애 는 4 단계 로 나 뉘 는데 모든 단계 에 해당 하 는 갈고리 가 있 음 을 주의 하 십시오.우 리 는 이 갈고리 들 을 조작 하여 일부 기능 을 달성 할 수 있 습 니 다.초보 자 들 이 잘 쓰 지 는 못 하지만 미리 알 아 보 는 것 이 좋 습 니 다.그 때 는 실제 기능 에 부 딪 히 면 생명주기 의 갈 고 리 를 얻 을 수 있어 야 합 니 다.
총결산
이상 에서 말 한 것 은 여러분 이 소개 한 vue.js 용법 과 특성 을 상세 하 게 설명 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다!