뷰 메모모음

[1] Vue 시작하기
==================
기본 명령어 : 
npm -v
node -v

package.json 생성
npm init

1.뷰 설치
npm i vue 

**특정버전까는법 @를 띄어쓰기 없이 붙이고 버전까지
npm i vue@2.7.0

2. webpack 생성 (리액트 웹팩 다루는거랑 동일)
    - npm i -D webpack webpack-cli
  ** : -D 는 개발용 옵션.


[2] 빌드하기
1.package.json에서 스크립트 부분을 아래와 같이 지정
  "scripts": {
    "build": "webpack"
  },

2. npm run build 로 실행

3. vue-loader 설치
npm i vue-loader -D

3-1. vue-loader 설정
webpack.config.js 에서..
vue파일을 만나면 vue-loader가 처리해라.

    module:{
        rules: [{
            test: /\.vue$/,
            loader : 'vue-loader',
        }]
    },

4. vue-template-compiler
npm i vue-template-compiler -D

** vue랑 vue-template-compiler는 버전 동일하게 맞춰줘야 함.






[3] vue 반복문
===================================
참조파일 : 3.numberBaseball.vue

<li v-for="t in tries">

v-for 안에 들어가는 구문은 자바스크립트로 동작하는데, 
try catch , if 등은 예약어므로 쓸수가 없음 따라서 t 로 쓰게됨.


[4] vue 기타 팁
===================================

1. submit 표현식

<form v-on:submit="onSubmitForm">

onSubmitFrom(e){
   e.preventDefault();
}

위와 같은 코드를 아래와 같이 축약가능

<form @submit.prevent="onSubmitForm">

onSubmitFrom(){

}

추가로 v-bind:class="state" 같은경우도 
:class="state" 형식으로 축약가능
---------------------------------------------------------------

2. template 
div 대신 사용가능, 개발자 도구로 볼때 아예 안보이지만 v-if 등의 속성은 여전히 사용가능.

!! 아래 같은 형식 불가능. 최상위 template 바로 아래에는 그냥 div써야됨. 
   태그 중간중간에 template써서 가려주는건 가능.
<template>
  <template>
  </template>
</template>

3. v-show
v-if 쓰는거랑 다를바 없지만 v-if의 경우 개발자도구에서 <-- -->(주석) 형태로 아예 보이지 않지만
v-show는 태그는 존재하되 display:none 속성이 적용된 상태로 있음.



[5] webpack 기타 팁
===================================

1. --watch 명령어
package.json 에서..
아래와 같이 --watch를 붙여줄 경우 작업파일에 내용이 갱신되면 자동으로 다시 빌드하게끔 만들어줌

  "scripts": {
    "build": "webpack --watch"
  },


[6] vue-style-loader
===================================
뷰 스타일 로더
npm i vue-style-loader
npm i css-loader 

파일 : webpack.config.js 에 다음과 같이 추가

module:{
    rules: [{
        test: /\.css$/,
        use : [
                'vue-style-loader',
                'css-loader'
            ]
    }


[7] webpack-dev-server
===================================
npm i webpack-dev-server -D

개발용 서버, 
특징 : wepback.config.js 파일에있는 output에 있는 내용으로 인해 일반적으로 dist/app.js를 생성하는 반면에
dev-server의 기능으로 인해 따로 파일을 생성하지 않고 메모리에 저장해두는 형식으로 작동함.
따라서 publicPath를 반드시 써줘야됨.

package.json에서 wepback --watch 명령어 쓰는것보다 쉽게 화면 수정사항 반영하는 방법 
package.json과 webpack.config.js에 각각 아래 코드 추가하면 동작하게 됨

[package.json]
  "scripts": {
    "dev": "webpack-dev-server --hot"
  },

[webpack.config.js]
  output : {
      publicPath:'/dist'
  },


[8] vue LifeCycle
===================================
크게 4단계로 구분됨. 
created ,mounted , updated, destroyed


[9] vue 스타일 가이드
===================================
https://v3.ko.vuejs.org/style-guide/

우선순위 A:필수
1.컴포넌트의 이름은 항상 두단어 이상 합성
2.컴포넌트의 data는 반드시 함수
3.props는 반드시 type을 정의해야함.
4.v-for에는 key값이 반드시 필요
5.v-if와 v-for 절대 동시에 사용하면 안된다.
등등..

[10]vue 특징 : 7.틱택토..중
this.$root , this.$parent
$표시를 사용해 자식컴포넌트에서 부모 루트의 데이터 조작이 가능하게 됨
(vue에서 제공하는기능)

!!!!!!!
vue에서 객체나 배열의 내부 index를 바꿀때 
console에서는 데이터가 변동하고 있는걸 확인할수 있지만,
실제로 화면에 반영이 안됨. (자바스크립트 한계)

ex) 
onChangeData(){
    this.turn ='x';  //가능
    this.tableData.push('a) //가능
    this.tableData[0][1] //불가능
 } 

 그래서 실제 화면을 바꾸는 방법 
 Vue.set()
 this.$set
 둘중 하나 사용!!
!!!!!!



[11]  Vuex
this.$parent this.$root를 계속 해서 쓰는건 좋은데...
프로젝트 규모가 커졌을떄, 예를들어 컴포넌트가 수천개인데 거기서 $parent를 찾으려면 골치아픔.
이럴때 중앙통제를 해주는 역할이 Vuex
뷰엑스 = 리액트의 리덕스