Vue.js 사용 방법

[설치 방법]

설명: https://kr.vuejs.org/v2/guide/installation.html
<script> 사용
1. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

npm 사용
1. npm install -g vue
2. npm install -g @vue/cli (여기서 CLI는 command-line interface; 예전 version은 "vue-cli" 사용)
3. npm install -g @vue/cli-initnp (vue init 하기 위해 필요한 package)

[실행]

- 기본 HTML sample

<html>

<head>

</head>

<body>

</div>

const myApp = new Vue({

el: '#app', // el(DOM element 의미): HTML에서 id="app"으로 접근 필요

data: {

message: 'Hello Vue!'

}

});

</script>

</body>

</html>

[기본 문법]

- 자세한 내용: https://kr.vuejs.org/v2/guide/

- Vue.js는 MVVM 개념으로 구성됨

- 전통적인 MVC: view(사용자와 UI 담당) - controller(view와 model 연락 담당) - model(logic, 두뇌 역할)
- 새로운 MVVM: view(viewmodel에 따라 변경됨) - viewmodel(view가 필요로 하는 data, action을 담고 있는 container object) - model(MVC model과 동일)
  - Viewmodel: view가 model에 event를 전달하도록 돕는 중계자

- {{ variable }} 안에서는 단일 변수 형태 처리만 가능함

- 내부 object에 접근

- Data를 바꾸면 저절로 rendering이 일어남(매우 편리): reactive website
- 위 예 경우: myApp.$data.message = 'Test Vue!';
- $data 의미: myApp의 member인 data에 접근, data는 message란 key를 가진 객체임

[Directives]

- "v-" 접두사를 사용하면 directive로 작용(쉽게 단일 JavaScript 명령이라 생각)

- Directive 명령에서 함수 호출은 "fun()"과 "fun" 모두 가능: 다시 말해 괄호 생략 가능

- Directive 안에 여러 명령어를 쓸 때는 , 로 구분함(;를 쓰면 error 발생)

- v-bind: 특정한 HTML 항목을 Vue instance property로 고정

Hover your mouse over me for a few seconds to see my dynamically bound title!

</span>

</div>

const myApp = new Vue({

el: '#app',

data: {

message: 'You loaded this page on ' + new Date().toLocaleString()

}

});

</script>

- 위 예 경우: span의 title 속성을 property인 message로 치환; message는 myApp.$data.message를 가리킴
- v-bind를 생략해 :title로 써도 됨
- div style을 수정하는 방법

-. charHeight는 data() {...} 안에 써서 export default를 함

- v-if: if 구문 수행

</div>

const myApp = new Vue({

el: '#app',

data: {

seen: true

}

})

</script>

- 위 예 경우: seen이 true인 경우에만 해당 span을 표시

- v-for: for 구문 수행

- v-bind:key가 필수적으로 추가되어야 함, 혹은 v-bind:key의 사용이 권장됨

= 필수 tag 종류: <a> <span> <li>

= 권장 tag 종류: 나머지 전부

<ol>

</li>

</ol>

</div>

const myApp = new Vue({

el: '#app',

data: {

todos: [

{ text: 'JavaScript' },

{ text: 'Vue' },

{ text: 'Nuxt' }

]

}

})

</script>

Table에서는 다음과 같이 처리

<tbody>

<td>{{ i }}</td> <td>{{ names[i-1] }}</td>

</tr>

</template>

</tbody>

Directive 안에 있는 for in은 JavaScript의 for in과 다르게 사용될 수 있음

-> JavaScript의 for in은 object의 key를 가져올 때 사용함

-> array에 for in을 사용하면 value가 아닌 index가 넘어옴: 예) let a = ['a', 'b', 'c']; for (n in a) console.log(n) // 0, 1, 2가 출력됨

-> Vue.js에서는 for in을 array에 대해서 쓰더라도 index가 아닌 value를 잘 얻을 수 있음

- v-on: on event 처리

- v-on:click -> Click할 때 처리할 event 정의

= 간략화해서 @click으로 표기 가능

- v-model: input이나 form에 사용되는 만능 directive

- v-model = v-bind와 v-on을 쓰는 two-way binding을 하나로 처리
- 예시) <input type="text" v-model="inputText">: script의 data() 안에 inputText를 정의해서 입력값을 받을 수 있음
- 위 코드는 <input v-bind:value="inputText" v-on:input="updateInput">로 나누어서 쓸 수 있음: 하지만 이 방식은 v-bind와 v-on을 써야 하는 불편함이 있음

[Component]

기본 HTML element를 확장하여 재사용 가능한 형태로 캡슐화하는 방식

= Component는 HTML에서 tag처럼 작용함

전역 component를 JS에 등록하는 방법

new Vue({

el: '#some-element',

// 옵션

});

Vue.component('my-component', {

// 옵션

});

전역 component를 HTML에서 사용하는 방법

<my-component></my-component>

</div>

지역 component로 JS에 등록하는 방법

var Child = {

template: '<div>사용자 정의 컴포넌트 입니다!</div>'

};

new Vue({

// ...

components: {

// <my-component> 는 상위 템플릿에서만 사용할 수 있습니다.

'my-component': Child

}

});

[Template]

Template은 Vue instance의 data와 HTML tag를 연결하여 정의하는 재사용할 수 있는 HTML 틀
Template을 정의하는 다양한 방법

https://vuejsdevelopers.com/2017/03/24/vue-js-component-templates/

특히 객체 지향에는 SFC(single file component)가 유리함

= 확장자는 *.vue

= SFC는 vue-loader로 compile됨

<div class="title">{{ title }}</div>

</div>

</template>

export default {

data() {

return { checked: false, title: 'Check me' }

methods: {

check() { this.checked = !this.checked; }

}

};

</script>

[HTML5]

- 자세한 내용: https://www.w3schools.com/html/default.asp

- Structural elements

<header>: Used to contain the header content of a site.

<footer>: Contains the footer content of a site.

<nav>: Contains the navigation menu, or other navigation functionality for the page.

<article>: Contains a standalone piece of content that would make sense if syndicated as an RSS item, for example a news item.

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

<aside>: Defines a block of content that is related to the main content around it, but not central to the flow of it.

https://www.w3.org/wiki/HTML_structural_elements?utm_source=twitterfeed

- Emmet 사용 방법: https://emmet.io/

- 자세한 문법 설명: https://docs.emmet.io/abbreviations/syntax/
- Tag 쓰고 . 찍으면 class 표현(tag 쓰지 않고 . 찍으면 자동으로 div로 인식)
- Tag 쓰고 # 쓰면 id 표현
- > 쓰면 child 표현
- + 쓰면 sibling 표현
- ^ 쓰면 climb-up 표현
- *숫자(예를 들면 *5) 쓰면 반복 생성
- () 쓰면 grouping 표현
- $과 *를 같이 쓰면, class나 id 이름에 line numbering 부여