-
[Vue.js]Vue.js 의 시작/hello vue.js 만들기Languages/Vue.js 2021. 3. 11. 15:03반응형
vue.js란?
프론트엔드 기술 중 하나이다.
한 페이지에서 모든 컨텐츠를 보여주는 웹사이트를 spa(single page application)
이럴 때 동적인 페이지를 쉽게 만들어주는 기술이다.
vue.js를 하기 위해선 visual studio code를 설치 해야한다
html소스를 이용하여 hello Vue.js!!! 만들어보기
<!DOCTYPE html> <html> <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"> <title>Vue 알아보기</title> </head> <body> <div id = 'app'> {{ message }} </div> <script> src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ message : 'Hello Vue.js!!' } }) </script> </body> </html>+point
Vue소스를 입력할 수 있는
<script> src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
입력값을 입력해주어야 하는데 vue 홈페이지에서 소스를 가져올 수 있다.
vue.js link>>>>
kr.vuejs.org/v2/guide/index.html
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
후 서식 입력하기
new vue({vue 인스턴스 내용})
또는
var 변수명 = new ({vue 인스턴스 내용})
el: 어느 html 요소를 연결할 것인가
data: 어떤 데이터인가
method: 어떤 처리를 하는가
computed: 어떤 데이터를 사용하여 계산하는가
watch: 어는 데이터를 감시하는가실행 결과
반응형'Languages > Vue.js' 카테고리의 다른 글
[Vue.js] 구글 차트 그리기 (0) 2021.05.13 [Vue.js]Vue를 이용한 테이블 만들기 예제(+css) (0) 2021.04.08 [Vue.js]v-on이용해서 간단한 계산기 만들기 예제 (0) 2021.04.02 [Vue.js]v-bind/다양한 바인딩 만들기/뷰를 이용한 이미지 업로드/url 업로드/폰트크키/컬러지정 (0) 2021.04.02 [Vue.js]Vue예제 클릭한 횟수를 표시하는 버튼 +css (0) 2021.03.11
