js

Vue.js

Vue.js

Posted by 동식이 블로그 on May 3, 2019

Vue.js basic

  • javascript library
  • cdn이 두 개 있는데 개발버전으로
  • html Vue연결
    • html의 id값과 vue가 연결
    • eldata는 규칙!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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이 생김
    • 현재 datamessage : "안녕하세요" 가 들어가 있음
  • html화면에 띄우기
    • `` 의 위치는 연결을 시켜놓았던 div을 벗어나면 사용할 수 없다
1
2
3
4
<!-- 여기는 html -->
<div id="app">
	
</div>
  • console창에 app입력하면 Vue인스턴스가 나옴
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$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..
1
2
3
4
5
6
7
8
9
10
11
12
<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문
1
2
3
4
5
6
7
8
9
10
<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문
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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
    • 양방향 바인딩
1
2
3
4
5
6
7
8
9
10
11
<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는 단순히 껐다 켜졌다 할 때 사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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,
        }
    })
  • `` : 콧수염 표현법 /

    1
    2
    3
    
    new Vue({
      delimiters: ['${', '}']
    })
    
  • for

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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공부하기"}
            ]
        }
    })