[Vue.js 입문] Vue의 특징.

5503 단어 Vue.js
Vue.js의 특징
  • 점진적으로 확장할 수 있습니다.
  • 한 줄씩(1페이지에서 n페이지까지 세그먼트 제작 가능)
  • 구성 요소 분할
  • 서비스 용이
  • SPA 제작 가능
  • 사용자 성능 향상
  • 설치(CDN)
    CDN 링크
    여기에 2.6.11을 헤드에 저장하도록 지정합니다.
    Hello Vue!성공하다
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{ message }}
          </div>
    
          <script>
            let app = new Vue({
                el: '#app',
                data(){
                    return{
                        message:'Hello Vue!'
                    }
                }
              })
          </script>
    </body>
    </html>
    
    API(el 및 데이터)
  • Vue를 실례화할 때의el이나 데이터 등을 API라고 한다.
  • API 목록
  • 
    <div id="app"> //elで指定した仮想DOMの範囲
        {{ message }} //dataで指定したkeyをマスタッシュで囲む。
     </div>
     <script>
        let app = new Vue({
            el: '#app', //仮想DOMの範囲を指定する。
            data(){ //elで指定した仮想DOMの範囲でオブジェクト形式でデータをセットする。
                return{
                    message:'Hello Vue!'
                }
            }
            })
      </script>
    
    가상 DOM
  • DOM(Dockument Object Model)
  • 프로그램을 통해 HTML을 조작할 수 있는 구조
  • DOM은 트리 구조입니다.
  • 다음은 검증 도구를 통해서도 확인할 수 있습니다.
     const html = document.querySelector('html')
     console.dir(html)
    
  • 가상 DOM
  • 이전 DOM(변경 전)과 새 DOM(변경 후)의 DOM을 비교하고 변경 후의 차이점만 실제 DOM에 반영한다.
  • 빠른 처리의 장점이 있습니다.
  • 참고 자료
    [Vue.js2 & Vue.js3 대응] 기초부터 [Vuetify]의 응용까지!슈퍼 초보자에서 최단거리로 승급
    vue.Js 공식 참조

    좋은 웹페이지 즐겨찾기