Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/museloper/vue-2-note
23년 12월 31일 지원 종료
https://github.com/museloper/vue-2-note
buildless vue2
Last synced: about 2 months ago
JSON representation
23년 12월 31일 지원 종료
- Host: GitHub
- URL: https://github.com/museloper/vue-2-note
- Owner: museloper
- Created: 2024-02-08T04:07:52.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-13T07:39:07.000Z (11 months ago)
- Last Synced: 2024-10-18T11:22:13.272Z (2 months ago)
- Topics: buildless, vue2
- Language: HTML
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue 2 지원이 2023년 12월 31일에 종료됩니다.
```
# 23년 12월 31일에 이미 지원이 종료되었는데..
# 24년도에 Vue2를 본다고 뒷북치고 있었다니 ㅠㅜ
# Vue3를 이해하기 위해 Vue2까지 살펴보았으나, 지원이 종료된 시점에서 이전 방식을 공부하는 것은 불필요한 것 같다.
# 필요가 느껴지기 전까지는 이 레포지토리는 잠정적으로 사용을 중단하겠다.
```
### 스크립트의 위치
```html
{{ message }}
```
### Vue 앱의 DOM 요소 제어
```javascript
/* index.js */
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
})
// Vue 객체의 값을 업데이트하면 화면의 값이 바뀌는 것을 확인할 수 있다. 아마 즉각즉각 랜더링 하는 방식인 듯 하다.
app.message = 'I have changed the data!'
```
### 디렉티브
디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 `v-` 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 한다.
1. 조건문
`v-if`
```html
Now you see me
```
```javascript
/* index.js */
var app2 = new Vue({
el: '#app2',
data: {
seen: true,
},
})
// 속성의 값을 거짓으로 업데이트하면 엘리먼트가 화면에서 사라진다.
app2.seen = false
```
1. 반복문
`v-for`
```html
- {{ todo.text }}
```
```javascript
/* index.js */
var app3 = new Vue({
el: '#app3',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' },
],
},
})
// 배열의 값을 추가하면 화면 상에도 리스트가 바로 생성된다.
app3.todos.push({ text: 'New item' })
```
1. 이벤트
`v-on`
```html
{{ message }}
Reverse Message
```
```javascript
/* index.js */
var app4 = new Vue({
el: '#app4',
data: {
message: 'Hello Vue.js!',
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
},
},
})
```
1. 데이터 양방향 바인딩
`v-model`
```html
{{ message }}
```
```javascript
/* index.js */
var app5 = new Vue({
el: '#app5',
data: {
message: 'Hello Vue',
},
})
```
### 컴포넌트
```html
```
```javascript
/* index.js */
// todo-item 컴포넌트 정의
Vue.component('todo-item', {
template: '
})
var app6 = new Vue({
el: '#app6',
})
```
위와 같이 작성된 코드는 `todo-item` 컴포넌트를 사용할 때 마다 똑같은 텍스트를 렌더링할 뿐이다.
아래와 같이 코드를 수정해보자.
```html
```
```javascript
/* index.js */
Vue.component('todo-item', {
props: ['todo'],
template: '
})
var app7 = new Vue({
el: '#app7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' },
],
},
})
```
이렇게 작성된 코드는 `v-bind`를 사용하여 각각의 반복되는 `todo-item` 컴포넌트에 각각의 다른 값들을 부여할 수 있다.