Vue.js 소개

사용자 인터페이스의 클라이언트 측면(Javascirpt) 프레임워크를 구축하기 위해
MVC의 파생종으로 GUI 라이브러리에 적합한 MVM(Model-View-ViewModel)을 설계 기반으로 채택하고 구축한다.
MVM(Model-View-ViewModel) 요약 요약

[주의]

공식 참고서에 전제로 몇 가지 지식이 중등 수준을 필요로 한다고 기재되어 있다.

HTML

CSS

JavaScript

정부는 이런 지식이 없으면 직접 입문하는 것을 추천하지 않는다.
그럼에도 불구하고 다른 프레임 사용 경험은 필수가 아니므로 최소한 3개 정도는 중간 수준으로 생각하고 도전해보자.

Vue.js의 매력과 특징

피쳐는 다음 6개입니다.

Simple
HTML·CSS·JS를 쓰고 JSON을 잡고 View 모델, Vue를 만든다.js 코드 사용
쓸 때 필요한 일은 이것밖에 없어요

Fast
DOM 총괄 조작을 통해 적당한 시간에 비동기 업데이트를 통해 고속 동작을 실현한다

Composable
의존하지 않는 재사용 가능한 구성 요소를 만들고 조합할 수 있습니다

Powerful
HTML에 적힌 공식과 유형 속성 계산(Computed property) 의존적인 속성 (변수) 을 자동으로 추적하고 추적하는 등 사용자에게 번거로운 동작을 많이 대체했다.

Module Friendly
모듈 반도라에서 자신이 좋아하는 모듈 관리 메커니즘을 이용할 수 있다.

browserify
참조 사이트: 그것은 리퀴어()의 마법 지팡이를 사용하기 위한 것이다

webpack
참조 사이트: 웹 페이지 4 시작

rollup
참조 사이트: 롤업이 딱 좋은 것 같아요.

매력.

모든 규모의 웹 애플리케이션에 쉽게 도입할 수 있습니다.

기존 항목을 중도에 가져오는 것도 간단합니다

낮은 학습 비용

Vue.js 개요

렌더링 선언

Vue.js의 핵심은 간단한 템플릿 문법을 사용하여 데이터를 DOM에 선언적으로 반영할 수 있는 시스템이다.
HTML 섹션

<div id="app">
  {{ message }}
</div>

JavaScript 섹션

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

결실

Hello Vue!

언뜻 보면 그림만 그리는 것 같아, 푸.js는 내부에서 많은 작업을 진행하고 있습니다.
데이터는 DOM과 연결되어 있고 모두 다시 활성화로 변한다.

} 요소의 속성을 속박(귀속)할 수도 있습니다.

}탭에서 {{{}처럼 기호법으로 쓸 수 없습니다
부분

<div id="app-2" v-bind:style="message">
  Hello Vue!
</div>

JavaScript 섹션

let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'color: red'
  }
})

결실

※テキストの色が赤色に変化しています。
Hello Vue!

html 태그 속성 Vue 실례(app2)의 메시지 속성을 통해 텍스트(Hello Vue 33;)빨간색으로 업데이트하여 저장합니다.

지시성

디렉터리는 v-로 시작하는 특수 속성입니다.
directive (명령) 라는 이름처럼 Vue.js에 지시 좀 해주세요.
대표적 지시

v-bind

v-if

v-show

v-for

v-on

v-model

※ 여기서는 조건부 분기를 대표로 설명

조건부 브랜치 v-if

유무 요소는 간단하게 전환할 수 있다.
html

<div id="app-3">
  <p v-if="seen"> Now you see me </p>
</div>

JavaScript 섹션

let app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

하면, 만약, 만약...

 Now you see me 

브라우저의 개발자 도구 Constore에서 seen을 가짜로 만들기
console

app3.seen = false

세은이는 가짜입니다.

이 예는 데이터가 텍스트를 데이터에 연결할 수 있을 뿐만 아니라 데이터를DOM의 구조에 연결할 수 있음을 나타낸다.

구성 요소 구성

구성 요소 시스템는 Vue입니다.js의 또 다른 중요한 추상적 개념.
'경량, 자완결, (다수의 경우) 재사용 가능한 구성 요소'를 조합함으로써 대규모 응용을 구축할 수 있다.
웹 페이지를 고려하면 거의 모든 구성 요소 트리가 추상화될 수 있다.

후기

뷰, js가 어려운 게 아니라는 걸 알리기 위해 뷰를 알아봤다.js 핵심의 기본 기능을 간략하게 소개했다.

참고 자료

Vue.Js 공식 참조
Vue.js 개요?
Vue.간단하게 js 이해해주세요.