https://vuejs.org/guide/quick-start.html#creating-a-vue-application
Quick Start | Vue.js
vuejs.org
- 설치하기
cli가 아니라 CDN을 이용해서 간단하게 튜토리얼을 맛보았다. 해당링크로 들어가면 확인할 수 있다.
- VScode html파일에 설정하기
간단하게 html파일 보일러플레이트 하나 생성해주고
Quick Start중간쯤에 있는 소스코드를 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" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: "Hello Vue!",
};
},
}).mount("#app");
</script>
</body>
</html>- Vue.js 간단하게 둘러보기
1.데이터 바인딩 (data, input)
Vue.js는 데이터 바인딩할 때 data(){} 안에다가 넣어주면된다. React에서 useState()의 역할을 한다고 보면된다.
그리고 <template> 안에서 {{ 변수명 }} 같이 사용해 줄 수 있다.배열과 같은 형태도 모두 사용가능! 그리고 input값에 따라
실시간으로 변하는 값도 연동해서 사용 가능하다.
<body>
<div id="app">
<h1>Hello {{ message }}</h1>
<input type="text" v-model="message" />
......
createApp({
data() {
return {
message: "input test",
frameworks: ["react", "angular", "vue"],
todos: [],
};
},
......
2.v-for 반복문 사용하기 (요소,index)사용
Vue에서는 반복문을 사용하는 방법이 v-for라는 문법 하나로 정해져 있다. 이 부분이 코드 통일성에 있어서 장점이 있다고
한다. v-for="(a,index) in array" : key="index" 형태로 사용한다. 각 요소에 key를 잊지않고 넣어주는게 중요하다.
숫자를 반복요소로 지정하면 숫자만큼 반복하고 배열을 넣으면 배열의 인자 갯수만큼 반복문이 실행된다.
....
<ul>
<li v-for="(todo,index) in todos" :key="index">
<!-- <li v-for="todo in todos"> -->
{{todo.completed}}
<button @click="completeTodo(index)">완료</button>
</li>
</ul>
<p>{{frameworks}}</p>
<ul>
<li v-for="(framework,index) in frameworks" :key="index">
{{framework}}
</li>
</ul>
........
createApp({
data() {
return {
message: "input test",
frameworks: ["react", "angular", "vue"],
todos: [],
};
},3.methods, 함수 만들어서 이벤트 클릭 사용하기, fetch사용해서 api불러오기
button 클릭 이벤트를 통해 함수를 시행할 시에 v-on:click 과같이 사용할 수 있고 @click으로 축약해 사용도 가능하다.
createApp부분에 data()를 추가해 사용했듯이 methods: 를 추가해 함수들을 추가할 수 있다. 유의할점은 data의 자료를
사용하려면 this키워드를 사용해야 한다는 점이다.
.....
<button v-on:click="addItem">addItem</button>
<button @click="popItem">popItem</button>
<button @click="fetchTodos">fetchTodos</button>
......
methods: {
addItem() {
console.log("test");
console.log(this.message);
this.frameworks.push(this.message);
},
popItem() {
this.frameworks.pop();
},
fetchTodos() {
fetch("https://jsonplaceholder.typicode.com/todos?_start=0&_end=10")
.then((res) => res.json())
.then((data) => {
console.log(data);
this.todos = data;
});
// .then((data) => console.log(data));
},
completeTodo(index) {
this.todos[index].completed = true;
},
},
}).mount("#app");
</script>
4.조건문 사용하기, computed
https://v2.ko.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1
computed와 watch — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
v2.ko.vuejs.org
v-if를 사용하면되고 :로 축약해 사용도 가능하다. 그리고 긴 조건의경우 computed로 미리 연산을 해서 사용한다.
data와 methods와 마찬가지로 추가해 사용할 수 있다.
computed: {
completedTodos() {
return this.todos.filter((todo) => todo.completed === true).length;
},
},
......
<p v-if="message.length>9">message too long!!</p>
......
<h2 :class="{ many: completedTodos>5 }">
완료된todo는 {{completedTodos}} 개 입니다.
</h2>
....
- 결과물
- 전체소스코드
<!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" />
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>Hello {{ message }}</h1>
<input type="text" v-model="message" />
<p v-if="message.length>9">message too long!!</p>
<button v-on:click="addItem">addItem</button>
<button @click="popItem">popItem</button>
<button @click="fetchTodos">fetchTodos</button>
<ul>
<li v-for="(todo,index) in todos" :key="index">
<!-- <li v-for="todo in todos"> -->
{{todo.completed}}
<button @click="completeTodo(index)">완료</button>
</li>
</ul>
<!-- <h2 v-bind:class="many"> -->
<h2 :class="{ many: completedTodos>5 }">
완료된todo는 {{completedTodos}} 개 입니다.
</h2>
<p>{{frameworks}}</p>
<ul>
<li v-for="(framework,index) in frameworks" :key="index">
{{framework}}
</li>
</ul>
</div>
<script type="module">
import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
createApp({
data() {
return {
message: "input test",
frameworks: ["react", "angular", "vue"],
todos: [],
};
},
computed: {
completedTodos() {
return this.todos.filter((todo) => todo.completed === true).length;
},
},
methods: {
addItem() {
console.log("test");
console.log(this.message);
this.frameworks.push(this.message);
},
popItem() {
this.frameworks.pop();
},
fetchTodos() {
fetch("https://jsonplaceholder.typicode.com/todos?_start=0&_end=10")
.then((res) => res.json())
.then((data) => {
console.log(data);
this.todos = data;
});
// .then((data) => console.log(data));
},
completeTodo(index) {
this.todos[index].completed = true;
},
},
}).mount("#app");
</script>
<!-- <div id="app">
<h1>Hello {{userName}}!!</h1>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
userName: "kimjiwon",
},
});
</script> -->
<style>
.many {
color: red;
}
</style>
</body>
</html>
- 추가로 참고하기
Computed | Cracking Vue.js
computed 속성 컴퓨티드(computed) 속성은 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다. 바로 코드를 보겠습니다. computed 속성 예시 위 코드는 message라는 데이터 속성의 문자
joshua1988.github.io
'Vue.js' 카테고리의 다른 글
| Vue.js 상세페이지(변수로 구분), 컴포넌트, v-if 추가학습 (0) | 2023.03.30 |
|---|---|
| Vue.js 이벤트 핸들러(v-on:click), 조건문(v-if) (0) | 2023.03.29 |
| Vue.js 데이터 바인딩, 반복문(v-for) (0) | 2023.03.28 |
| Vue.js 사용하는 이유, Vue 3 세팅 (0) | 2023.03.28 |
| Vue.js 기본 입문 (Vue 2 설치) (0) | 2023.03.28 |
