[Vue.js] Vue 정리 (2022-11-11)

node.js -> 시작점, 베이스

 

 

 

Angure.js -> 구글  사용X

 

 

 

영역관리

 

 

 

React.js -> lib, 전자정부 FrameWork

 

                          MSA 마이크로 서비스 아키텍처

 

                             ㄴ 전체system 다운 X

 

                             ㄴ 에러난 부분만 고쳐서 서비스

 

                             ㄴ 도커, 쿠버네티스

 

 

 

Vue.js, React.js 돌아가는 방식은 비슷함 문법차이가 있음

 

 

 

Vue.js -> node.js 가있어야함, FrameWork

 

node.js 깔고 시작하는거 NPM 방식 != CDN

 

 

 

전자정부프레임워크 = Spring + ex)로그인 + ex) 인증

 

 

 

Controller Service(impl) Dao Mybitis sql

 

 

 

Controller Mybitis sql   AA(아키텍처 애널라이저)

 

 

 

Vue.js 문법 (CDN방식)

 

 

 

{{hello}}

<script>

  new Vue({

    el: '#exampl',

    data: {hello: 'hello woeld!'}

  })

script>

 

 

 

React 와 Vue 는 가상 DOM을 사용한다.

 

 

 

html - body - div - ui - li - div - p - a {{ aaa }} xpath 가상돔

 

가상dom에 먼저 반영하고 -> 실제html에 반영한다 - 랜더링

 

 

 

vuex CDN(2.6 ver) NPM(3.0 ver) 둘다 사용할 수 있음

 

vue-cli (command line interface) NPM에서만 서용 가능

 

vue router NPM에서만 사용 가능

 

 

 

vue create aaa (vue aaa 프로젝트 생성)

 

 

 

server 랜더링

 

 

 

React.js  Next.js server 랜더링 용

 

Vue.js  Nuxt.js 

 

 

 

인클루드 해서 사용

 

cdn

 

 

 

webpack - 웹페이지 성능 최적화, 하나의 파일로 번들링

 

 

 

babel - es6버전을 구버전 es5버전으로 변환해줌(브라우저 인식을 위해)

 

 

 

vue 라이프사이클

 

ㄴ beforecreate

 

ㄴ created

 

ㄴ beforeMount 

 

ㄴ mounted

 

ㄴ beforeUpdate

 

ㄴ updated

 

 

 

es5

 

console.log(aa) <- undefined

 

var aa = "123";

 

 

 

es6

 

console.log(aa) <- 에러 undefinde문제 해결을 위해

 

let aa = "123";

 

 

 

const aa = "asd"; <- 에러 (파이널 변수) 값못바꿈

 

aa = "www"

 

 

 

TypeScript

 

(String as) => aaa{

 

bb = as; <- 에러

 

}

 

 

 

- 주로알아야할것 - 

 

v-model (아무태그에 사용이 안된다 사용자가 값을 변경할 수 있는태그에 사용 가능)

 

v-bind -> :

 

v-on -> @

 

v-if v-else v-else-if

 

v-for

 

v-html

 

v-show

 

....

 

 

 

var aa = new Vue({

 

el : "#diva",

 

data : {

 

inputa : "",

 

instyle : "",

 

imfpath : ""

 

},

 

methods : {

 

fndown : function() {

 

this.instyle = "width:400px"

 

this.imfpath = "a.jpg";

 

 

 

fn_aaa(); OK

 

fndown2()

 

},

 

fndown2 : function() {

 

this.instyle = "width:400px"

 

this.imfpath = "a.jpg";

 

 

 

fn_aaa(); OK

 

},

 

}

 

});

 

 

 

화면에서 입력한 value -> vue 변수 OK React.js 에서 됨

 

vue 변수 -> 화면에서 입력한 value OK React.js 에서 안됨

 

 

 

function fn_aaa(){

 

aa.fndown(); OK

 

}

 

 

 

vue method -> javascript function ok cdn

 

javascript function -> vue method ok cdn

 

vue method -> vue method ok cdn, npm

 

<div id="diva">

  <input type="text" id="inputa" name="inputa"

    v-on:keydown="fndown" v-bind:style="instyle" v-model="inputa" />

 

 

  <input type="text" id="inputa" name="inputa" style="width:400px">

  <img v-bind:src="imfpath" />

 

  <img src="a.jpg">

div>