소개

vue.js의 공부를 해 가끔 나오는 워드의 해설을 이 기사에 실어 둡니다.

SPA

SPA는 "Single Page Application"의 이니셜을 취한 웹 애플리케이션의 아키텍처입니다.

장점 단점

장점
1. 일반 웹 페이지에서는 실현할 수 없는 사용자 경험을 실현할 수 있다.
2. 고속 페이지 천이를 실현할 수 있다.
3. 네이티브 앱의 대안으로 제공될 수 있다.

단점
1. 구현 비용이 크게 증가합니다.
2. 초기 로딩에 걸리는 시간이 늘어난다.
3. 개발자가 적다.

SPA를 이용한 유명한 사례

Facebook

Google Map

나오는 도서관?과 지식

vue-router

router-link

HTML5 History 모드

vul에서 실현하기 위해

사용법
@tiwu_official 님
Vue.js, Vuex, vue-router 및 webpack에서 단일 파일 구성 요소로 TodoList를 만들었습니다.

표시 방법에 대해 $mount VS el

vuejs를 공부해 나가면 표시사에 「$mount」 vs 「el」의 2개의 기재가 존재합니다.

$mount의 경우

$mount 필요한 경우 Vue 인스턴스를 명시적으로 마운트할 수 있습니다.
페이지에 특정 요소가 있거나 비동기 프로세스가 완료될 때까지 인스턴스 마운트를 지연할 수 있습니다.
1초 후에 이미지를 표시하는 샘플을 만들어 보았으므로 확인해 보세요.

샘플 거동


소스 코드

index.html

<div id="todo"></div>

main.ts

import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})

setTimeout(() => {
  todo.$mount('#todo');
},1000)

Todo.vue

// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

el의 경우

로드된 순간에 tot 태그에 마운트됩니다.
정적인 것에 대해서는 이쪽의 처리로 대응해 나가야 할까 생각합니다.

index.html

<div id="todo"></div>

main.ts

import Todo from './Todo.vue'
import Vue from 'vue'

const todo = new Vue({
  el: '#todo',
  render: h => h(Todo)
})

Todo.vue

// テンプレートの作成
<template>
  <div class="home">
    <img alt="Vue logo" src="./assets/logo.png">
  </div>
</template>

// cssの作成

computed vs methods

vuejs를 공부함에 따라 "computed"와 "methods"가 나옵니다.

아이 같은 기사
Vue.js, Vuex, vue-router 및 webpack에서 단일 파일 구성 요소로 TodoList를 만들었습니다.

computed (연산 전용)

연산을 수행하기 위해
나중에 추가

methods(기능용)

기능용
나중에 추가

그 밖에 있으면...

나중에 추가

참고 사이트