step01_hello

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>