인스턴스는 아래와 같이 생성 한다.
new Vue();
인스턴스의 속성들은 key:value 형태로 정의된다.
new Vue({
el: ,
template: ,
data: ,
methods: ,
created: ,
watch: ,
});| Hello Vue.js (0) | 2021.02.22 |
|---|---|
| Vue.js 개발 툴 (0) | 2021.02.21 |
| Vue 는 무엇인가 ? (0) | 2021.02.21 |
| Visual Studio Code 에디터 한글 전환 (0) | 2021.02.21 |
| Vue.js 참고 (0) | 2021.02.21 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Getting Started</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.js2prince'
}
})
</script>
</body>
</html>
Visual Studio Code 를 실행
CDN 으로 vue.js 코드를 땡겨오고,
Vue 인스턴스를 생성하여 간단한 메시지를 출력하는 페이지를 만들어본다.
| Vue 인스턴스 생성 (0) | 2021.02.25 |
|---|---|
| Vue.js 개발 툴 (0) | 2021.02.21 |
| Vue 는 무엇인가 ? (0) | 2021.02.21 |
| Visual Studio Code 에디터 한글 전환 (0) | 2021.02.21 |
| Vue.js 참고 (0) | 2021.02.21 |
Vue.js Dev Tools
Chrome devtools extension for debugging Vue.js applications.
chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrome.google.com
편집기에서 파일 우클릭,
Open With Live Server 시, Chrome 브라우저가 열리며, F12 로 개발자 도구 오픈하여 vue 콤포넌트를 열면 된다.
| Vue 인스턴스 생성 (0) | 2021.02.25 |
|---|---|
| Hello Vue.js (0) | 2021.02.22 |
| Vue 는 무엇인가 ? (0) | 2021.02.21 |
| Visual Studio Code 에디터 한글 전환 (0) | 2021.02.21 |
| Vue.js 참고 (0) | 2021.02.21 |
vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다.
vue.js는 여타 다른 프론트엔드 프레임워크보다 배우기 쉽다는 장점이 있다.
리엑트와 앵귤러라는 프레임워크의 장점들을 쏙 빼와서 더욱 빠르고 가볍게 만든 프레임워크라고 한다.
MVVM 패턴의 뷰모델 (ViewModel) 레이어에 해당하는 화면단 라이브러리 이다.
Vue 는 DOM Listeners 와 Data Bindings 를 이용한다.
| Hello Vue.js (0) | 2021.02.22 |
|---|---|
| Vue.js 개발 툴 (0) | 2021.02.21 |
| Visual Studio Code 에디터 한글 전환 (0) | 2021.02.21 |
| Vue.js 참고 (0) | 2021.02.21 |
| Vue.js 시작하기 (0) | 2021.02.18 |
vue.js 개발을 위한 편집기 tool
Visual Studio Code 다운로드
https://code.visualstudio.com/
예전에 angular 개발시엔 기본으로 한글 버전이었던 것 같은데,
이번에 vue.js 공부를 위해 다시 설치 하였는데 영문판이구나./
vscode 실행 후, [확장] 버튼을 누르고 market place 검색창에 korean 입력하면
" Koran Language Pack for Visual Studio Code "
가 나온다,
install !~ 후 restart 하세요.
| Hello Vue.js (0) | 2021.02.22 |
|---|---|
| Vue.js 개발 툴 (0) | 2021.02.21 |
| Vue 는 무엇인가 ? (0) | 2021.02.21 |
| Vue.js 참고 (0) | 2021.02.21 |
| Vue.js 시작하기 (0) | 2021.02.18 |