javascript, framework/node js, vue
step01_hello
bono.html
2022. 9. 20. 12:15
2022.09.19 - [시작하기] - node js 설치하기
2022.09.19 - [시작하기] - node js 시작하기
복습
보안 문제로 PowerShell이 오작동하는 경우가 있다고 하니 대체 가능한 프롬포트에서 경로설정을 하고 다시 작업했다.
원래는 npm, npm install -g @vue/cli 를 했지만 직전 게시글에서 이미 설치한 이후였기 때문에 npm만 하고 install은 skip 했다.
프롬포트에서 작성한 코드
cd 폴더 경로
vue create step01_hello
cd step01_hello
npm run serve
vue component 기본구성
--예제
App.vue
<template>
<div id="app">
<h1>Vue js 시작입니다</h1>
<button class="btn btn-primary" v-on:click="clicked">눌러보셈</button>
<!-- @event명="콜백함수명" -->
<button @click="clicked">눌러보셈2</button>
<!--msg 라는 모델을 innerText 로 출력하는 두가지 방법-->
<p>{{msg}}</p>
<p v-text="msg"></p>
<input type="text" v-model="myName" placeholder="이름 입력...">
<p>당신의 이름은 <strong>{{myName}}</strong>이군요</p>
<p>당신의 이름은 <strong v-text="myName"></strong>이군요</p>
<MyComponent/>
<!--v-bind 는 생략 가능-->
<FortuneComponent v-bind:fortune="fortuneToday"/>
<FortuneComponent :fortune="fortuneToday"/>
<img src="/images/kim1.png" alt="">
<!--
assets 폴더는 클라이언트에게 공개되지는 않고
vue 프로젝트에서 필요한 어떤 자원을 넣어 놓는 폴더이다
-->
<img src="./assets/images/kim1.png" alt="">
</div>
</template>
<script>
import MyComponent from "./components/MyComponent.vue";
import FortuneComponent from "./components/FortuneComponent.vue";
export default {
name: "App",
data() {
//data()함수에서 리턴하는 object 가 model 목록이 된다.
return {
msg: "안녕하세요",
myName: "",
fortuneToday:"동쪽으로 가면 귀인을 만나요"
};
},
methods: {
clicked() {
alert("버튼을 눌렀습니다");
}
},
components: { MyComponent, FortuneComponent }
}
</script>
<style>
@import url(https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css);
</style>
MyComponent.vue
<template>
<div class="bg-yellow">
<p>나의 컴포넌트 입니다.</p>
<p>author : <strong>{{author}}</strong></p>
</div>
</template>
<script>
//각각의 컴포넌트는 고유한 모델과 동작을 가질 수 있다.
export default{
//디버깅의 편의를 위해 이름을 지정하는데 보통 파일의 이름과 같게 짓는다
name: "MyComponent",
data(){
return{
author:'김구라'
};
}
}
</script>
<!--scoped 속성을 가진 style 은 해당 component 에서만 적용되는 css 이다.-->
<style scoped>
.bg-yellow{
background-color: yellow;
}
</style>
FortuneComponent
<!-- FortuneComponent.vue -->
<template>
<div>
<p> 오늘의 운세 : <strong>{{fortune}}</strong></p>
</div>
</template>
<script>
export default{
name:'FortuneComponent',
props:{
//fortune 이라는 이름의 property 를 받을예정이고 type 은 String 으로 고정
fortune:String
}
}
</script>
<style scoped>
strong{
color:red;
}
</style>