Vue.js

Vue.js basic

javascript library
cdn이 두 개 있는데 개발버전으로
html 과 Vue연결
- html의 id값과 vue가 연결
- el과 data는 규칙!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
    <!-- 여기는 html -->
    <div id="app">

    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 여기는 vue.js
        // Vue를 인스턴스화 해서 app이라는 변수에 저장
        const app = new Vue(
            // 옵션을 주면서 위에 만든 #app과 연결
            {    
                // el은 무엇과 연결시켜 줄지를 알려줌, object형태로 들어가야 함
                el : "#app",
                // data는 object형태로, 
                data : {
                    message : "안녕하세요"
                }
            }
            
        )
        
    </script>
</body>
</html>

연결 후 console 창에 들어가서 Vue.js devtools라는 개발자 툴(구글) 설치
로컬에서도 Vue를 사용하는지 알기위해 설정
- 확장프로그램 - 파일URL에 대한 엑세스를 허용
개발자도구에 Vue라는 column이 생김
- 현재 data에 message : "안녕하세요" 가 들어가 있음
html화면에 띄우기
- `` 의 위치는 연결을 시켜놓았던 div을 벗어나면 사용할 수 없다

<!-- 여기는 html -->
<div id="app">
	
</div>

console창에 app입력하면 Vue인스턴스가 나옴

$attrs: (...)
$children: []
$createElement: ƒ (a, b, c, d)
$el: div#app
$listeners: (...)
$options: {components: {…}, directives: {…}, filters: {…}, _base: ƒ, el: "#app", …}
$parent: undefined
$refs: {}
$root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {}
$slots: {}
$vnode: undefined
message: (...)
__VUE_DEVTOOLS_ROOT_UID__: 1
__VUE_DEVTOOLS_UID__: "1:0"
_c: ƒ (a, b, c, d)
_data: {__ob__: Observer}
_directInactive: false
_events: {hook:beforeDestroy: Array(1)}
_hasHookEvent: true
_inactive: null
_isBeingDestroyed: false
_isDestroyed: false
_isMounted: true
_isVue: true
_renderProxy: Proxy {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_self: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
_staticTrees: null
_uid: 0
_vnode: VNode {tag: "div", data: {…}, children: Array(1), text: undefined, elm: div#app, …}
_watcher: Watcher {vm: Vue, deep: false, user: false, lazy: false, sync: false, …}
_watchers: [Watcher]
$data: (...)
$isServer: (...)
$props: (...)
$ssrContext: (...)
get $attrs: ƒ reactiveGetter()
set $attrs: ƒ reactiveSetter(newVal)
get $listeners: ƒ reactiveGetter()
set $listeners: ƒ reactiveSetter(newVal)
get message: ƒ proxyGetter()
set message: ƒ proxySetter(val)
__proto__: Object

console창에서 조작이 가능
- javascript코드를 수정하면 html코드가 수정됨 ( 바인딩이 되어있다고 함)
- app.message = “hihi” 라고 하면html에 hihi라고 뜸
디렉티브
- v-bind` : 속성값을 줄 수있다.
  - title, href, ect..

<div id="app2" v-bind:title="message">        
    하이하이
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> 
    const app2 = new Vue({
                el : '#app2',
                data : {
                    message : `이 코드는 ${new Date()} 로드 되었습니다.`
                }
            }
</script>                 

if문

<div id="app3">
        <p v-if="seen">내가 보이니.....?</p>
</div>

const app3 = new Vue({
            el: '#app3',
            data:{
                seen: true
            }
        })

app3.seen = true 상태이기 때문에 내가 보이니가 출력
app3.seen = false로 바꾸면 사라짐
for문

<div id="app4">
        <h3 v-for="todo in todos"></h3>
</div>

const app4 = new Vue({
            el: '#app4',
            data:{
                todos:[
                    "점심 메뉴 고르기",
                    "점심 먹기",
                    "조퇴하기",
                    "집에서 쉬기"
                ]
            }
        })

>>> h3태그로 todos의 내용들이 모두 출력

console창에서
- javascript의 list접근 후 추가하기
  - app4.todos.push("공휴일 즐기기")
버튼을 이용한 이벤트 처리
- v-on

<div id="app5">
        <p></p>
		// 마우스를 클릭할 때 마다 이벤트 발생
		// mousemove , click, keydown 등등 이벤트 리스너에 추가했던 키워드가 가능
        <button v-on:click="reverse">메세지 뒤집기</button>
</div>

const app5 = new Vue({
            el: '#app5',
            data:{
                message : "안녕하세요!!"
            },
            // 사용하고 싶은 함수를 넣을 수 있음
            methods:{
                reverse : function(){
                    // 여기에서 this는 app5내의 
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })

methods 안에서의 function()과 () =>가 가르키는 범위가 다름
- method안에서는 function() 사용
  - function()은 Vue객체를 가르킴
- () =>는 window(창)를 가르킴
v-model
- 양방향 바인딩

<div id="app6">
        <p></p>
		// input태그에 입력한게 그대로 html에 바로바로 반영됨
        <input v-model="m">
</div>
const app6 = new Vue({
            el: '#app6',
            data :{
                m : "Hi Vue",
            }
        })

위 내용은 vue.js 공식문서 튜토리얼과 같음
vue는 spa(single page application)를 만들기 위해 존재
- 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
- https://poiemaweb.com/js-spa
v-show
- show는 단순히 껐다 켜졌다 할 때 사용

<div id="app">
        <h1 v-show="visible"></h1>
		// if문과 else-if와 else문 사이에 다른 html코드는 들어오면 안됨
        <h1 v-if="value > 5">value가 5보다 큽니다</h1>
        <h1 v-else-if="value > 3">value가 3보다 큽니다</h1>
        <h1 v-else>value가 5보다 작습니다</h1>
</div>
const app = new Vue({
        el:"#app",
        data:{
            message:"안녕하세요",
            visible:true,
            value:10,
        }
    })

`` : 콧수염 표현법 /
- django에서와 vue에서 html 가져오는게 같음
- 이를 위해 vue delimiters를 수정해야 함
- https://kr.vuejs.org/v2/api/index.html
```
1
2
3
new Vue({
  delimiters: ['${', '}']
})
```
for

<ul>
    <li v-for="todo in todos"></li>
	<!-- 인덱스 값이 필요할 때 -->
    <li v-for="(todo, index) in todos">. </li>
</ul>
const app = new Vue({
        el:"#app",
        data:{
            message:"안녕하세요",
            visible:true,
            value:5,
            todos:[
                {text:"vue공부하기"},
                {text:"django공부하기"}
            ]
        }
    })

Vue.js

Vue.js basic

디렉티브

FEATURED TAGS

FRIENDS