[vue.js] vue 시작

0. 들어가기

-. vue3 나왔으니 더 이상 미룰 수 없다 나의 뷰 적응.

-. vue mastery 강좌 예제 따라서 연습연습

1. 코딩 툴

-. vscode 를 추천하더라. 파이썬은 파이참으로, Flutter는 안드 스튜디오로, Vue는 vscode로.... 어이쿠 초보는 힘들다.

-. syntax는 es6-string-html 애드온으로

-. 빠른 확인을 위해 Live server도 설치한다.

2. Vue 첫 적용

-. 왠지 이전에도 비슷한 걸 했던거 같지만, ... 처음 하는 것이다. 암튼 처음.

/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue example</title>

    <script src="http://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1> {{ product }} </h1>
    </div>

    <script src="./main.js"></script>

    <script>
        const mountedApp = app.mount('#app')
    </script>
</body>
</html>

/* main.js */
app = Vue.createApp({
    data: function() {
        return {
            product: "product from vue"
        }
    }
})

-. output

-. 이제 다음 포스팅 부터는 본격적으로 이쁜 front-end 작업을 해보겠다.

728x90

저작자표시

'Web > vue.js' 카테고리의 다른 글

[vue.js] Router (0)	2022.01.19
[vue.js] vue 연습 (3) - components, properties (0)	2022.01.16
[vue.js] vue 연습 (2) - 동적 style/class, vue 계산식 (0)	2022.01.15
[vue.js] vue 연습 (1) - 변수전달, 선택적 화면 표시, 이벤트 핸들링 (0)	2022.01.15
[Vue.js] Vue.js 사용하기 with jinja2, flask (0)	2021.03.22