Vue.js의 사용법

1. multi-page-application에서 "widget"(not a general term)을 사용하여 일부만 interactive, reactive하게 개발
2. single-page-application에서 모든 요소를 vue.js가 관리

Vue.js 설치 (Import from CDN)

• 공홈에 install을 들어가면 어떻게 하면 되는지 나온다.

1. CDN 연결

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="app.js"></script>

• 또는 vue@next도 괜찮다.

  다만 이때 import 해오는 .js 파일 위에 설정을 해주어야 interpreter 언어 특성상 이상없이 읽어올 수 있다.

2. .js 파일에 vue.createapp 하기

Vue.createApp({
    data(){
        return{
            goals:[],
            enteredValue : "",
            htmlTag : "<h2>fire in the whole</h2>"
        }
    },
    method : {
      addGoal(){
        this.goal.push(this.enteredValue);
      }
    }
}).mount('#app');

2-1. data

• data prop을 createApp으로 전달할 것이다.
  그렇게 되면 vue에서는 goals와 entetedValue 요 2가지의 데이터를 인식한다.

• 이때 prop의 이름은 반드시 data 라고해야한다. vue는 예약어를 통하여 데이터를 찾기 때문이다.

• 그리고 위 코드처럼 data 자체를 function으로 설정하는 "메서드 속기법"으로 사용하여도 되고 또는 data : function () {} 이런식으로 정석대로 설정해도 된다.

• data 메서드는 언제나 객체를 반환한다. 즉, 반환값은 항상 key:value의 형태를 지니고 있어야한다.

2-2. method

• event에 활용될 메서드들을 선언하는 부분이다.

• 즉, data, method 밖에 어떠한 함수를 선언한다 하여도 작동은 안 된다.

• 이때 data와 다른점은 data는 그 자체로 메서드이지만
  method는 메서드로 만들어진 객체인 것이다.

2-3. mount

• 또한 mount 메서드를 사용시 매개변수로는 css selector가 들어간다.

2-4. this

• 보면 this 키워드를 사용하여 method context가 아닌 한 층 더 높은 부모 context를 참조하였는데 이는 vue에서 벌어지는 "마술"이다.

• Vue는 data 객체에서 반환하는 데이터 전체를 가져다가 데이터를 병합해서 전역 Vue 인스턴스 객체를 만든다.
  즉, Vue.createApp 객체로 만든다고도 할 수 있다.

• 즉, Vue instance에 저장된 모든 객체에 접근할 수 있다.

3. .html파일에서 vue 값 사용하기

<div>
	<div>
	<label for="goal">Goal</label>
	<input type="text" id="goal" v-model="enteredValue"/>
	<button v-on:click="addGoal">Add Goal</button>
    </div>
    <ul>
    	<li v-for="goal in goals">{{ goal }}</li>
    <ul/>
    <p v-html> </p>
</div>

• 사용하길 원하는 태그에 v 속성값을 추가해준다.
  

• 위 코드는 당연히 vue만 인식할 수 있는 속성이다. 이렇게 하면 input과 입력될 값 그리고 이 데이터 프로퍼티가 연결되며 Vue가 이를 관리해준다.

• 코드에서 enteredValue를 변경할 때마다 사용자가 입력한 내용을 자동으로 수신해서 이 input을 자동으로 업데이트한다.

3-1. interpolation (보간법)

• 표현식은 보간법(interpolation)이라고 하는 방법을 사용한다. 하지만 이 방법은 단점은 오직 여닫는 태그에서만 사용이 가능하고 아래와 같이 속성값으로는 사용이 안 된다.

• 여기에는 단순한 JS 로직정도는 써넣을 수 있다. 예를들어 사칙연산은 가능하지만 if구문은 사용이 불가능하다.
  하지만 또 3항 연산자(?)는 사용가능하다.

• 그리도 JS로직이 사용가능하다는 것은 methods에 있는 함수들도 interpolation 안에 써 넣을 수 있다는 것이다.

3-2. 뷰 바인딩

<p>Learn more <a href="{{vueLink}}">about Vue</a></p>  // (X)

<p>Learn more <a v-bind href="{{vueLink}}">about Vue</a></p>  // (O)

• interpolation을 보완하기 위해 나온 방법으로 html에게 vue코드를 사용하겠다 라고 일러주는 것이다.

• 즉, html 속성값이 있다면 v-bind:접두어를 붙이고 요 뒤에 이어서 속성값을 작성하면 된다.

3-3. v-html

• 만약 DB에서 넘어와서 저장되어있는 값이 html tag값이라고 생각해보자.

• 그리고 그냥 interpolation에 집어넣으면 작동이 안 된다. 이는 cross site scripting 공격을 막아주기 때문에 다행이지만 생각대로 작동이 안 되기 때문에 답답할 수 있다. 이를 해결하고자 나온 속성값이 바로 v-html이다.

<p>{{ htmlTag }}</p> // (X)

<p v-html="htmlTag"></p>  // (O)
<p v-html="addGoal()"></p>  // (O)