vue.js(1) 기초

kyj2471·2021년 1월 14일
1

Vue.js

목록 보기
1/8

Vue 기본 구조

<!-- vue 파일구조 -->
<template>
  <!-- html( vue component 표현단, 템플릿 문법) -->
</template>

<script>
  <!-- javascript -->
</script>

<style>
  <!-- css -->
</style>

instance 속성 , API들

new Vue({
  el:,
  template:,
  data:,
  methods:,
  created:,
  watch:,
})
  • el:인스턴스가 그려지는 화면의 시작점
  • template: 화면에 표시할 요소(html,css등)
  • data: vue의 반응성이 반영된 데이터 속성
  • methods: 화면의 동작과 이벤트로 로직을 제어하는 메서드
  • created: vue 라이프 사이클과 관련된 속성
  • watch: data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성

data binding

데이터 바인딩이란 vue instance에서 정의한 속성들을 화면에 표시하는 방법입니다.
기본적으로 vue에서는 Mustache Tag를 사용합니다
아래 코드를 보면 쉽게 이해가능하다

<div>{{message}}</div>

new Vue({
  data:{
    message:"hello 영재"
  }
})

directive

디렉티브란 뷰로 화면요소를 더 쉽게 조작하기위한 것입니다.
화면조작에서 자주사용되는걸 디렉티브 형태로 제공하고 있다. 아래 코드를 보자

<div>
	hello <span v-if="show">Vue.js</span>  
</div>

new Vue({
  data:{
    show:false
  }
})
<ul>
  <li v-for="item in items">{{item}}</li>
  </ul>
  new Vue({
  	data:{
    	items;["shirts","jeans","hats"]
       }
      })

vue.js component

react와 마찬가지로 vue에서도 컴퍼넌트 단위로 작업할 수 있다.

Vue.component(" 컴퍼넌트 이름, {
//컴퍼넌트 내용
});

이제 컴퍼넌트 만드는 틀을 알았으니 만들어보자

//전역 컴퍼넌트 등록
Vue.component("app-header", {
  template:"<h1>head component</h1>"
});


<div id="app">
	<app-header></app-header>  
</div>

위와 같은 방식으로 우린 컴퍼넌트를 생성하고 사용할 것이다.

컴퍼넌트 등록 방법 2가지

첫번째 방법은 바로 위에서의 방법으로 전역 컴퍼넌트를 등록하는 것이다.
두번째 방법으로는 지역 컴퍼넌트로 등록하는 방법이다.
아래 코드를 보자

var appHeader = {
  template: "<h1>Head component</h1>"
}

var Vue({
  components:{
    "app-header": appHead
  }
})

Vue.js cli/firebase 설치오류...

vue cli를 설치하여 본격적으로 vue를 실행 해보려고 하였다.
그런데 firebase도 vue도 설치를 했는데 command not found라는 말만 나오고 실행 할 수가 없었다.
별에별걸 다 터미널에 깔아보고 했는데 이게 정답은 아니겠지만 해결방법을 찾은걸로는
터미널에 export PATH=$PATH:/Users/username/.npm-global/bin 이란 명령어를 쳐서 친절히 가르쳐 줘야 실행된다... 이것때문에 하루를 터미널속에서 뒹굴었는데... 다른 사람들은 이럴일이 없길 바랍니다..
마찬가지로 firebase도 해결하였습니다

profile
[ frontend-developer ]

0개의 댓글