[Vue.js] Vue.js 시작하기 (Hello World)

Vuejs 실습할 때 아래 사이트에서 실습해보면 된다.

jsbin.com/gonasotehe/edit?html,js,output

JS Bin

Sample of the bin:

jsbin.com

1. HelloWorld 예제

html

<body>
<div id="app">
<h1>Hello, {{ name }}</h1>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>

javaScript

// 새로운 뷰를 정의합니다
var app = new Vue({
  el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다
  // data 는 해당 뷰에서 사용할 정보를 지닙니다
  data: {
    name: 'Vue'
  }
});

2. Vue Directive

(뷰 지시문, 엘리먼트에게 지시하는 문장)

1) v-text (one way binding)

1.에서 해봤던 {{ }} 를 사용하는 대신에 v-text라는 디렉터리를 사용한다.

데이터->뷰의 형태로 바인딩이 되어있어서 데이터의 값이 변하면 뷰가 업데이트된다.

html

<div id="app">
<h1>Hello, <span v-text="name"></span></h1>
</div>

2) v-html

html을 렌더링해야 할 때 사용한다.

html

<div id="app"> 
	<h1>Hello, <span v-html="name"></span></h1> 
</div>

javascript

var app = new Vue({
	el: '#app', 
    data: { 
    name: '<i>Vue</i>' 
    } 
});

3) v-show

엘리먼트가 보여질지 말지를 true/false 값으로 지정하는 지시문.

html

<div id="app"> 
	<h1>Hello, <span v-show="visible" v-html="name"></span></h1> 
</div>

javascript

var app = new Vue({ 
	el: '#app', 
    data: {
    	name: '<i>Vue</i>', 
        visible: true 
    } 
});

4) v-if / v-else / v-else-if

html

<div id="app">
	<h1 v-if="value > 5">value가 5보다 큽니다</h1>
	<h1 v-else>value가 5보다 작아요</h1>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    value: 0
  }
});

5) v-bind

html엘리먼트의 '속성' 의 값을 Vue 엘리먼트의 데이터로 설정하고 싶을 때 사용

html

<div id="app">
<h1>Hello, {{ name }}</h1>
<img :src="flag ? vuelogo : anglogo"/>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue',
    flag: true,
    vuelogo: 'https://vuejs.org/images/logo.png',
    anglogo: 'https://angular.io/assets/images/logos/angular/angular.svg'
  }
});

6) v-for

반복문

html

<div id="app">
  <h2>오늘 할 일</h2>
  <ul>
    <li v-for="todo in todos">{{ todo.text }}</li>
  </ul>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Vue.js 튜토리얼 작성하기' },
      { text: 'Webpack2 알아보기' },
      { text: '사이드 프로젝트 짂행하기' }
    ]
  }
});

index값을 받아올 수도 있다.

<div id="app">
<h2>오늘 할 일</h2>
<ul>
<li v-for="(todo, index) in todos"> {{index}} {{ todo.text }}</li>
</ul>
</div>

7) v-model(two-way-model)

뷰 ⇄ 데이터 형태로 바인딩하여 데이터가 양방향으로 흐르게 해주는 것

html

<div id="app">
  <h1>Hello, {{ name }}</h1>
  <h3><input type="checkbox" v-model="flag"/>Logo 이미지</h3>
  <img :src="flag ? vuelogo : anglogo"/>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue',
    flag: true,
    vuelogo: 'https://vuejs.org/images/logo.png',
    anglogo: 'https://angular.io/assets/images/logos/angular/angular.svg'
  }
});

프로젝트 만들어서 실습해보기

VSCode켜고, 폴더 하나 생성한다.

이후 terminal실행 하고 Power shell을 cmd.exe로 바꿔준다.

이후 vue 프로젝트를 하나 만들어준다.

이 CMD 창에 아래와 같이 입력

vue create vue-todo

하면 이제 설치를 시작한다. 설치 시 Vue와 다른 프레임워크를 어떻게 조합해서 사용할건지 선택한다.

나는 그냥 default 설정으로 했다.

프로젝트 생성 완료

터미널에서 npm run serve를 입력하면, package.json파일에 있는 아래 내용이 실행되는것이다.

이게 프로그램 배포하는것

이후 컨트롤+저 링크를 클릭하면, 브라우저로 기본 화면이 열린다.

F12를 눌러 개발자도구로 들어가면 아래와 같이 Vue 탭이 생기고 여기서 엘리먼트들을 확인할 수 있다.

Vue의 구조는 아래와 같음

index.html에는 div태그 하나밖에 없다.

이 div태그의 Id는 app이다. 이 app에다가 뭘 넣어주는 것이 App.vue이다.

그런데 이 App.vue로 연결시켜주는 main.js파일이 있다.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js로 가보면 app.vue파일이 import되어 있는것을 볼 수 있고, Vue 객체가 만들어져 있다.여기서 이제 App.vue로 연결된다.

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

이 app.vue로 가보면, css도 정의되어 잇고, name이 app이라는 것을 Export시켜주고 있다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

그럼 component의 HelloWorld.vue파일로 가보면 이제 실제 구현부가 드러난다.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

이렇게 분리해서 개발. 그리고 .vue파일은 구조가 아래와 같다.

여기서 Style에 scoped 옵션이 들어가게되면 이 컴포넌트에서만 CSS를 적용하겠다는 뜻이다.

</template>

</script>

</style>

저작자표시 비영리 변경금지

'Dev > [Vue.js]' 카테고리의 다른 글

[Vue.js] parent <-> child간 양방향 바인딩(with custom Tag) (0)	2022.04.26
[Vue.js] Vue Axios 적용해보기 (0)	2021.02.15
[Vue.js] Vuex 를 적용해보기 (0)	2021.02.15
[Vue.js] 버튼과 이벤트 연결하기 (0)	2021.02.09
[vue.js] vue.js란? 개발 환경 만들기 (0)	2021.02.08

랑섭 IT

[Vue.js] Vue.js 시작하기 (Hello World)

프로젝트 만들어서 실습해보기

'Dev > [Vue.js]' 카테고리의 다른 글

티스토리툴바

[Vue.js] Vue.js 시작하기 (Hello World)

프로젝트 만들어서 실습해보기

'Dev > [Vue.js]' 카테고리의 다른 글

'Dev/[Vue.js]' Related Articles

티스토리툴바