vue 기본세팅

router 구조

URL이 변하는 링크를 구현
하나의 페이지에서 화면을 구성
경로에서 @ 표시는 /src 폴더
Single Page Application 구현

0. public/index.html 기본 바탕 html
1. src/main.js 불러오고 import, 실행 mount
2. src/App.vue 메인 기본 구조
3. src/router/index.js 각 링크의 vue 가져오고 url 경로도 설정
4. src/views/AboutView.vue & src/views/HomeView.vue router에서 불러온 각 페이지

router 에서 'name' key는 고유값

웹브라우저 개발자도구 소스 보면 컴파일해서 올리면 필요한 기반 파일들은 chunk-vendors.js 로 묶어서 변환되서 올라감
실제 코딩한 파일은 app.js, about.js, *.js 등으로 생성

eslint - prettier fix

vue의 eslint 하고 vscode의 prettier 와 충돌날 수 있음
루트에 .prettierc 생성해서 기본 세팅 수정 (.prettierrc options)
코딩 스타일 만들때 기본 설정은 맞추는게 좋으니까
이건 그 4시간짜리 유튜브에 있는거

{
  "semi": false, // 세미콜론 ; 사용
  "bracketSpacing": true, // 함수 한칸 띄우기 
  "singleQuote": true, // 홑따옴표 쓰기
  "useTabs": false, // 들여쓰기는 tab키
  "trailingComma": "none", // 쉼표 , 사용 방식
  "printWidth": 100 // 한 줄에 몇글자까지
}

package.json

  "eslintConfig": {
	"rules" : { "space-before-function-paren" : "off" } // 함수-괄호parenthesis-앞에-공백
  },

router prefetch option

webpackPrefetch:true

pre : 먼저
fetch : 가져온다
안열린 페이지를 미리 가져온다

src/router/index.js

component: () =>
	import(/* webpackChunkName: "about", webpackPrefetch:true \*/ '../views/AboutView.vue')

요걸 추가하면 실제 화면 head에 이런 것이 추가된다
http://localhost:8080/

<link rel="prefetch" as="script" href="/js/about.js">

data binding (단방향, 양방향)

• vetur 설치하면 vue IDE 작동
• vue 파일 내부에서는 function 생략해도 된다
• vue 파일 내 HTML / Script / Style 분리 (vue 특징)
• template 내에 묶는 root element 필요
• vue는 단방향 / 양방향 binding 가능
• 데이터 변동 -> 화면 표시 변동 (단방향)
• 사용자 입력값 변동 -> 데이터 변동 (요거까지 되면 양방향) (vue 특징)

views

화면 전체

components

재사용이 가능한

style 범위내

vue의 한 영역에만 적용

<style scoped>

text binding

문자는 중괄호 두개로 바인딩 {{ }}

data binding

element 속성에 v- 로 시작하는 디렉티브 속성 사용

v-html

<div v-html="htmlString"></div>

v-model

양방향 데이터 바인딩

<input v-model="myFunc">

@click

v-on:click= 은 @click= 으로 축약 가능
@click.number 같이 속성에 보조 속성 줄 수 있음

v-bind:

속성 바인딩
v-bind:value, v-bind:src 를 :value, :src 로 축약가능
:disabled="wordInfo === ''" 처럼 조건을 주면 true/false 를 반환한다

데이터를 배열로 받는다고 하면 요렇게

<select name="" id="">
  <option :value="local.code" :key="local.code" v-for="local in locals">{{ city.name }}</option>
</select>

Event

@change & $event

<select name="" id="" v-on:change="changeCity($event)" v-model="selectedCity">
  <option value="">Select City</option>
  <option :value="city.cityCode" :key="city.cityCode" v-for="city in cities">
    {{ city.name }}
  </option>
</select>
<select name="" id="">
  <option
    :value="local.localCode"
    :key="local.localCode"
    v-for="local in locals.filter((local) => local.cityCode == selectedCity)"

    {{ local.localName }}
  </option>
</select>

@keyup & @keyup.enter

    <!-- <input type="search" name="" id="" @keyup="checkEnter($event)" v-model="searchedText" /> -->
    <input type="search" name="" id="" @keyup.enter="doSearch" v-model="searchedText" />

    <!-- checkEnter(event) {
      if (event.keyCode === 13) {
        this.doSearch()
      }
    } -->