[Web] Vue.js Basic Example (Client-side)

Web 2017. 12. 29. 14:10


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <p>{{ message }}</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue.js!'
                }
            })
        </script>
    </body>
</html>
 
cs


1. HEAD에서 vue library 로딩

2. BODY에서 view tag 로딩

3. vue instance를 생성하여 view의 data binding(=text interpolation)


1을 먼저 하지않으면 {{ message }}가 binding되기 전 상태로 보이게 됨

(network I/O동안)

2를 먼저 하지않으면 binding이 이루어지지 않음

(HTML도 script language니까, 한줄씩 실행되니까)


vue를 client-side에서 사용할경우 XSS 주의해야함


---


비슷한 용어가 너무 많다.

template, data binding, text interpolation, rendering

'Web' 카테고리의 다른 글

[Javascript] Webpack, Babel, ES6  (0) 2018.01.06
[Web][Javascript] Vue로 SPA: Single Page App 개발  (0) 2018.01.06
[Web] Javascript library min 차이  (0) 2018.01.04
[Web] vue-router / vue와 REST API  (0) 2017.12.31
[web] template engine이란? / 장점 / 사용이유  (0) 2017.12.31
WRITTEN BY
hojongs
블로그 옮겼습니다 https://hojongs.github.io/
,