Vue를 사용하기 위하여 node와 npm이 설치된 터미널이 필요합니다.
설치 순서는 아래와 같습니다.
1. node
2.
3. Vue 설치는 둘 중 아무것이나 설치를 합니다. (mac의 경우 에러 메시지가 나면 npm앞에 sudo를 적어 넣으면 정상적으로 설치가 됩니다.
Vue 2.x version
npm install --global @vue/cli
Vue 3.x version
npm install -g vue-cli
Vue를 시작하기 위해 프로그램 셋팅하는 방법을 알려드리겠습니다.
4가지 프로그램을 설치 한 후 비쥬얼 스튜디오 코드를 열어서 코드 개발에 유용한 확장자를 추가 합니다.
위의 확장설치를 하시면 자동으로 코드를 생성 및 보정을 해주어 프로그램 개발시 도움이 됩니다.
기타 추가 하실 확장자가 있으면 아래에 코멘트를 남겨주시면 많은 이들이 도움을 받을 수 있도록 업데이트 하도록 하겠습니다.
| Vue 2.x CDN version (0) | 2021.12.14 |
|---|
컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 독립적이며 재사용할 수 있는 컴포넌트로 구성된 대규모 애플리케이션을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.
Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다.
| // todo-item 이름을 가진 컴포넌트를 정의합니다 Vue.component('todo-item', { template: '<li>할일 항목 하나입니다.</li>' }) var app = new Vue(...) |
이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 추가할 수 있습니다.
| <ol> <!-- todo-item 컴포넌트의 인스턴스 만들기 --> <todo-item></todo-item> </ol> |
그러나 이것은 todo-item 컴포넌트를 사용할 때마다 똑같은 텍스트를 렌더링할뿐 무언가가 부족합니다. 부모 영역의 데이터를 자식 컴포넌트에 전달할 수 있어야 합니다. prop을 전달받을 수 있도록 todo-item 컴포넌트의 정의를 수정해봅시다.
| Vue.component('todo-item', { // 이제 todo-item 컴포넌트는 "prop" 이라고 하는 // 사용자 정의 속성 같은 것을 입력받을 수 있습니다. // 이 prop은 todo라는 이름으로 정의했습니다. props: ['todo'], template: '<li>{{ todo.text }}</li>' }) |
이제 v-bind를 사용하여 각각의 반복되는 todo-item 컴포넌트에 전달할 수 있습니다.
| <div id="app-7"> <ol> <!--이제 각 todo-item 에 todo 객체를 제공합니다. 화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨). --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> |
| Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ {id: 0, text: 'Vegetables' }, {id: 1, text: 'Cheese' }, {id: 2, text: 'Whatever else humans are supposed to eat' } ] } }) |
이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서 <todo-item> 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.
대규모 애플리케이션에서는 개발을 보다 쉽게 관리 할 수 있도록 전체 앱을 컴포넌트로 나누는 것이 필수적입니다. 가이드의 뒷부분에서 컴포넌트에 대해 자세히 설명하겠지만 여기서는 컴포넌트를 사용한 앱의 모습이 어떻게 구성될지에 대한 (가상의) 예를 작성하겠습니다.
| <div id="app"> <app-nav></app-nav> <app-view> <app-sidebar></app-sidebar> <app-content></app-content> </app-view> </div> |
Vue 컴포넌트는 Web Components Spec의 일부인 사용자 지정 엘리먼트 와 매우 유사하다는 것을 눈치 챘을 수 있습니다. Vue의 컴포넌트 구문은 스펙 이후 느슨하게 모델링 되었기 때문입니다. 예를 들어 Vue 컴포넌트는 Slot API와 is 특수 속성을 구현합니다. 그러나 몇가지 중요한 차이가 있습니다.
Vue는 내부적으로 사용자 정의 엘리먼트를 사용하지 않지만, 사용자 정의 엘리먼트로 사용 또는 배포하는 경우에는 뛰어난 상호운용성을 가집니다. Vue CLI는 자기자신을 네이티브 커스텀 엘리먼트로서 등록하는 Vue 컴포넌트의 빌드도 지원하고 있습니다.
자료출처: Vue 공식 홈페이지(kr.vuejs.org)
vue는 양방향으로 데이터 바인딩을 지원합니다.
v-model을 통하여 가능한데요! 간단하게 v-model을 사용하기 전 html을 표현해 보겠습니다.
<--! html의 body 안의 내용만 기록하였습니다.-->
<div id="app">
<p>{{message}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'안녕하세요! 저는 woncoding입니다.'
}
})
</script>위의 index.html의 결과를 브라우져에서 결과를 확인해보면 다음과 같이 나타납니다.
여기에서 v-model을 이용한 핸들링을 해보겠습니다.
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
new Vue({
el:'#app',
data:{
message:'안녕하세요! 저는 woncoding입니다.'
}
})
</script>처음의 화면에서 단지 <input v-model="message">만을 표현하였습니다.
하지만 결과 하면에서는 text상자에 글을 표현하면 text상자위의 <p>태그의 내용도 함께 바뀌는 것을 확인 할 수 있습니다.
v-model은 브라우저에 나타나듯이 클라이언트로 받는 내용을 즉시 화면에서 변경할 수 있는 양방향 바인딩이 가능합니다.
| v-on 핸들링 (0) | 2021.12.23 |
|---|
vue에서 v-on핸들링은 javascript에서 onclick과 동일한 기능할 합니다.
html에서 javascript onclick기능을 구현해보면 아래와 같습니다.
<--! html의 기본 템플릿은 생략하고 body의 내용만을 나타냅니다.-->
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다."
onclick="alert('알람메세지입니다.')">
</div>web화면 결과
위의 javascript를 Vue로 바꾸면 다음과 같습니다.이해를 돕기위하여 html부분과 script부분을 분리하여 나타내겠습니다.
##index.html 부분
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다." v-on:click="alert">
</div>##javascript 부분
new Vue({
el:'#app',
methods:{
alert(){
return alert('알람메세지입니다');
}
}
})결과는 아래와 같이 동일하게 나타납니다.
위 의 사항을 Vue의 index.html하나의 페이지로 나타내면 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="버튼을 누르면 알람 메세지가 나타납니다." v-on:click="alert">
</div>
<script>
new Vue({
el:'#app',
methods:{
alert(){
return alert('알람메세지입니다');
}
}
})
</script>
</body>
</html>vue에서는 v-on:click이벤트를 발생시키기 위하여 methods 즉 함수(function)을 호출하여 사용합니다.
즉 Vue의 methods는 javascript의 function과 동일한 기능을 한다고 생각을 하면 됩니다.
| v-model(양방향데이터 바인딩) (0) | 2021.12.23 |
|---|
Vue의 반복문사용은 의뢰로 단순합니다.
index.html파일에 아래와 같이 작성합니다.
<div id="app">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>html 안의 div태그에 id 값이 app인 곳을 vue에서 작동을 합니다.
아래는 main.js에 아래와 같이 입력을 합니다.(main.js 파일이 아닌 index.html파일안에 <script></script> 태그로 작성해도 무방합니다.
var app = new Vue({
el: '#app',
data:{
todos:[
{text: 'Learn JavaScript'},
{text: 'Learn Vue'},
{text: 'Build sonething awesome'}
]
}
})결과를 보면 다음과 같이 나타납니다.
이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/업데이트/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 전환 효과 시스템을 제공합니다.
몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for 디렉티브는 배열의 데이터를 바인딩하여 Todo 목록을 표시하는데 사용할 수 있습니다
| 조건문(v-if) (0) | 2021.12.17 |
|---|
Vue에서 조건문의 사용은 간단 합니다.
html 엘리먼트에서 "v-if = ' ' "를 사용하면 디렉티브한 화면을 만들 수가 있습니다.
index.html 기본 페이지에 아래와 같이 추가 합니다.
<div id="app">
<p v-if = "seen">제가 보이시나요?</p>
</div>main.js에 아래와 같이 추가 해보세요
var app = new Vue({
el: '#app',
data:{
seen : false
}
})main.js안에 있는 "seen" data 값이 false이므로 index.html내에 있는 <p> 태그안의 v-if 값은 false가 되어 화면에 나타나지 않습니다.
하지만, main.js내의 "seen"의 값을 true로 변경을 하고 저장을 하면
webpage의 화면은 아래와같이 글자가 나타나는게 보입니다.
false와 true로 바꾸어서 저장해가면서 webpage에서 변하는 내용을 확인해보세요!
다음 글에서는 반복문에 대하여 알아보겠습니다.
| 반복문(v-for) (0) | 2021.12.21 |
|---|
Vue에서 처음으로 하는 프로그래밍은 당연 "hello world"를 찍어보는 것이겠죠!
index.html에서 모두 작성을 할 수도 있고,
index.html과 mian.js 2개의 파일로 구분해서 사용할 수도 있습니다.
첫번째, index.html 파일 하나에 "Hello World!"를 나타나게 할 때 입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el:'#app'.
data:{
message: 'Hello World!'
}
})
</script>
</body>
</html>
두번째, html 파일(index.html)과 javascript파일(main.js)을 나눠서 할 경우
<!-- index.html에 입력되는 내용입니다.-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="./main.js"></script>
</body>
</html>// 자바스크립트에서 작성되는 내용입니다.
// 자바스크립트 파일명은 main.js 입니다.
var app = new Vue({
el: '#app',
data:{
message:'Hello World!'
}
})
결과 화면
이로서 여러분도 첫 프로그램 개발의 시작하게 되었습니다.
하나 하나씩 배워가면서 전문가가 되시기를 기원하겠습니다.
아래 그림처럼 editer와 webpage를 한 화면에 놓고 프로그래밍을 하시면 이해가 더 빠르게 될 것입니다.
Vue를 시작하기 전 사전 학습 내용은 HTML, CSS, JavaScript를 중간 수준의 지식을 가지고 있어야 합니다.
vue를 설치하는 과정은 여러 가지가 있습니다.
본 글에서는 Vue 2.x버전으로 3.x 버전과 나누어서 설명합니다.
화면에서 <script>안에 넣어주는 버전을 먼저 설명합니다.
<!-- 개발버전, 도움 되는 콘솔 경고를 포함. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
또는
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- vue cdn을 요기에 입력합니다. -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>이로써 Vue를 사용할 설정이 완료되었습니다.
| Vue를 시작하기 위하여 사전 설치 해야 하는 프로그램 (0) | 2022.01.05 |
|---|