Vue.js_Others의 기본 지식 요약

소개

vue.js는 웹 애플리케이션 인터페이스를 구축하는 데 사용되는 라이브러리입니다

기술적으로 Vue.js는 뷰와 데이터 바인딩 모델을 두 가지 방식으로 연결하는 MVVM 패턴의 ViewModel 레이어에 중점을 둡니다. 실제 DOM 조작 및 출력 형식은 지시어 및 필터로 추상화됩니다

철학 분야에서는 MVVM 데이터 바인딩 API를 최대한 간단하게 만들어 보세요. 모듈성과 결합성 또한 중요한 설계 고려 사항이었습니다. Vue는 포괄적인 프레임워크가 아니며 간단하고 유연하게 설계되었습니다. 신속한 프로토타이핑에 사용하거나 다른 라이브러리와 혼합하여 프런트엔드 스택을 정의할 수 있습니다.

뷰. Node.js API는 AngularJS, KnockoutJS Ractive.js Rivets.js를 의미합니다. 유사성에도 불구하고 저는 Vue.js가 기존 프레임워크 중 일부를 절충할 수 있는 가치를 제공한다고 믿습니다

이미 일부 용어에 익숙하더라도 다음 Vue.js에서는 이러한 용어에 대한 개념이 다를 수 있으므로 다음 개념 개요를 살펴보는 것이 좋습니다.

개념개요

뷰모델

모델과 뷰를 동기화하는 개체입니다. Vue.js에서 ViewModel은 인스턴스화된 Vue 또는 해당 하위 클래스의 생성자입니다

var vm = new Vue({ /* options */ })

이것은 Vue.js를 사용할 때 개발자로서 상호 작용하게 될 주요 개체입니다. 자세한 내용은 클래스: Vue를 참조하세요.

보기

사용자가 보는 실제 HTML/DOM

vm.$el // The View

Vue.js를 사용하는 경우 사용자 정의 지침을 제외하고는 DOM 작업을 거의 건드리지 않습니다. 데이터가 업데이트되면 뷰 업데이트가 각 testNode 노드에 대해 매우 정확할 수 있습니다. 일괄 처리하고 비동기식으로 실행하여 더 나은 성능을 제공합니다.

모델

약간 변형된 자바스크립트 객체입니다

vm.$data // The Model

Vue.js에서 모델은 단순한 Javascript 객체 및 데이터 객체일 뿐이며 해당 속성을 조작하고 모델을 보고 변경 사항을 관찰하고 알림을 받을 수 있습니다. Vue.js는 ES5 getter/setter를 사용하여 데이터 객체의 속성을 변환하므로 더티 검사 없이 직접 작업이 가능합니다.

데이터 개체는 적절한 경우 변경되므로 이를 수정하면 vm.$data를 참조로 수정하는 것과 동일한 효과가 있습니다. 이는 또한 여러 ViewModel 인스턴스가 동일한 데이터 조각을 관찰하는 것을 용이하게 합니다.

기술적인 세부정보는 인스턴스화 옵션: 데이터를 참조하세요.

지시문

비공개 HTML 속성은 Vue.js에 DOM에서 일부 처리를 수행하도록 지시합니다

<div v-text="message"></div>

여기서 div 요소에는 v-text 지시어가 있으며 값은 message입니다. 이는 Vue.js에 이 div 노드의 콘텐츠를 viewMode의 메시지 속성과 동기화되도록 지시하는 것을 의미합니다.

지시문은 모든 DOM 작업을 캡슐화할 수 있습니다. 예를 들어 v-attr은 속성 요소를 작동하고, v-repeat는 배열을 기반으로 요소를 복제하며, v-on은 이벤트 모니터링을 연결합니다.

콧수염 바인딩

텍스트와 속성 모두에서 콧수염 스타일 바인딩을 사용할 수도 있습니다. 이는 v-text v-attr 지시문으로 변환됩니다. 예:

<div id="person-{{id}}">Hello {{name}}!</div>

편리하지만 주의해야 할 사항이 몇 가지 있습니다.

이미지의 src 속성을 설정하면 HTTP 요청이 전송되기 때문에 처음 템플릿을 파싱하여 404가 나타날 때는 v-attr을 사용하는 것이 좋습니다

Internet Explorer는 HTML을 구문 분석할 때 유효하지 않은 내부 스타일 속성을 제거하므로 IE 바인딩 인라인 CSS를 지원하려면 항상 v-style을 사용합니다

v-html 내에서 세 개의 중괄호 {{{like this}}}를 사용하여 이스케이프되지 않은 HTML을 처리할 수 있지만 잠재적인 XSS 공격이 있을 수 있고 창을 열 수도 있으므로 절대적으로 안전하도록 권장됩니다. 데이터가 완료되면 사용자 정의 파이프라인 필터를 통해 신뢰할 수 없는 HTML을 정리합니다.

필터

뷰를 업데이트하기 전에 함수를 사용하여 이 원시 데이터를 처리할 수 있습니다. "파이프라인" 지시문이나 바인딩을 사용하고 있습니다.

<div>{{message | capitalize}}</div>

이제 div의 텍스트 콘텐츠가 업데이트되기 전에 이 메시지의 값이 대문자화 기능에 의해 처리됩니다. 자세한 내용은 심층 필터를 참조하세요.

구성품

Vue.js에서 컴포넌트는 Vue.comComponent(ID, 생성자)를 통해 등록되는 간단한 뷰 모델 생성자입니다. 다른 뷰 모델 템플릿의 v-Component 지시문은 연관된 ID를 통해 중첩될 수 있습니다. 이 간단한 메커니즘을 사용하면 최신 브라우저나 강력한 폴리필 없이도 선언적 뷰 모델을 웹 구성 요소와 유사한 방식으로 재사용하고 구성할 수 있습니다. 애플리케이션을 더 작은 구성 요소로 분할함으로써 결과적으로 고도로 분리되고 유지 관리가 가능한 코드 기반이 탄생합니다. 자세한 내용은 ViewModel 구성을 참조하세요.

빠른 예

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done &#63; 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>

 
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

대략적인 번역이니 오류 지적해주세요