[Vue]エンコードアップルコースまとめ

[0-1強]

早めに会いたい時.npm run serve

プロジェクト作成時vue create 프로젝트명

App.vue:ホームページ
Node modules:プロジェクト用ライブラリ
src:ソースコードを含む場所~コードを書く空間~
public:html+その他のファイルアーカイブ
package.json:インストールされたライブラリバージョン、プロジェクト設定の記録

[2強]

データバインディング:htmlにJSデータを挿入する構文

document.getElementById().innerHTML=??
  //쌩자바스크립트 스타일 데이터 바인딩

  //vue 에서는 
  data(){
    return { ~ 여기에 데이터 보관 ~
           데이터는 object(자료이름 : 자료내용)로 저장}
  },
  //데이터 보관함부터 만들어 주고
  
  // 데이터를 html에 꽂아넣고 싶으면 
     {{ 데이터이름 }}

🧐例

<template>
  <div>
    <h4>XX 원룸</h4>
    <p>{{price1}} 만원</p>
    // {{ 데이터 이름 }}
  </div>
</template>

<script>

export default {
  name: 'App',
  
  data(){
    return {
      price1 : 60,
      price2 : 70,
    }
  },
  // 데이터 보관
  
  components: {
  }
}
</script>

😁 なぜデータをバインドするのか~

1.htmlをハードコーディングすると変更が困難になる<p>70 만원</p>2.(重要)Vueのリアルタイム自動レンダリングをサポートする
データの変更は、データに関連するhtmlにリアルタイムで反映されます.
ex.ショッピングモールでフィルターを使うと画面が変わります{{ 데이터 이름 }}<-このオプションを使用して自動的にレンダリング
(..) htmlプロパティはデータをバインドすることもできます: 속성 = "데이터 이름"

<h4 class="red" :style="스타일">XX 원룸</h4>
.
.
data(){
    return {
      스타일 : 'color : blue',
    }
  },

❗️常に変化するデータをデータとして保存しhtmlに挿入する

変更不可能なデータはex.ショッピングモール名をバインドする必要はありません

[3強]

padding:コンテンツと枠線の間の空き領域
余白:要素間の余白.枠線外のスペース

Vueのhtml重複文

<ラベルv-for=「繰り返しに名前を付ける」:key=「名前を付ける」>

    <a v-for="name in 3" :key="name">Home</a>
// home만 3개 생김

vue繰返し文はarray/objectを挿入できます
->次に重複するデータの数
->作成された変数がデータのデータになります

    <a v-for="a in 메뉴들" :key="a"> {{ a }} </a>
// 반복문이 돌면서 변하는 숫자/문자 ↑ , ex)0,1,2...
// 메뉴들 갯수만큼 반복 (=3)
// 첫번째 a = Home
   두번째 a = Shop
   세번째 a = About

data(){
    return {
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },

なぜ:key="작명"を使うのか!
-複文を書くときは必ず書きます.
-循環文の要素をコンピュータで区別する
->最大2つの変数

 <a v-for="(a,i) in 메뉴들" :key="i"> {{ a }} </a>
// a : array내의 데이터  
// i : 1씩 증가하는 정수

[4強]

整理したら飛び上がった

[5強]

動的UIの作成方法
1.UIの現在の状態をデータとして保存する
2.データからUIの外観を作成する
例)モードウィンドウの作成

<template>

<div class = "black=bg" v-if="모달창열렸니 == true">
  //v-if "조건식" 조건식이 참일 때만 HTML 보여줌
  <div class = "white-bg">
    <h4>상세페이지</h4>
    <p> 내용 </p>
  </div>
</div>


  <div class="menu">
    <a v-for="a in 메뉴들" :key="a"> {{ a }} </a>
  </div>




 <div>
    <img src="./assets/400.jpg">
    <h4 @click="모달창열렸니=true">{{products[0]}}</h4>
    // 상품제목을 click하면 모달창 열리게 
    <p>50만원</p>
    <button @click="신고수[0]++">허위매물신고</button> 
    <span>신고수 : {{신고수[0]}}</span>
  </div>
   <div>
    <h4>{{products[1]}}</h4>
    <p>60만원</p>
    <button @click="신고수[1]++">허위매물신고</button> 
    <span>신고수 : {{신고수[1]}}</span>
  </div>
  <div>
    <h4>{{products[2]}}</h4>
    <p>70만원</p>
    <button @click="신고수[2]++">허위매물신고</button> 
    <span>신고수 : {{신고수[2]}}</span>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){ // state
    return {
      모달창열렸니 : true,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  methods:{
    increase(){
      this.신고수 +=1;
    }
  },

  components: {
  }
}
</script>

<style>

body{ 
  margin : 0
}
div{
  box-sizing: border-box;
}
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0,5);
  position: fixed; padding: 20px;
}
.white-bg{
  width: 100%; background: white;
  border-radius: 8px;
   padding: 20px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px; 
}
.menu a {
  color:white;
  padding:10px;
}

</style>

[6強]

インポート/エクスポート!

义齿
import変数名from「ファイルのパス」
いろいろなファイルを書き出したいとき!
export{変数1,変数2}
パスからの一時変数1、変数2}

<template>

<div class = "black-bg" v-if="모달창열렸니 == true">
  <div class = "white-bg">
    <h4>상세페이지</h4>
    <p> 내용 </p>
    <button @click="모달창열렸니=false">닫기</button>
  </div>
</div>

  <div class="menu">
    <a v-for="a in 메뉴들" :key="a"> {{ a }} </a>
  </div>

 <div>
    <img :src="원룸들[0].image">
    <h4>{{원룸들[0].title}}</h4>
    <p>{{원룸들[0].price}}</p>
    // html 태그안의 속성 데이터바인딩은 :어쩌구
    // html 태그안의 내용 데이터바인딩은 {{어쩌구}}
  </div>
   
</template>

<script>

import data from './assets/oneroom.js';

export default {
  name: 'App',
  data(){
    return {
      원룸들 : data,
      모달창열렸니 : false,
      신고수 : [0,0,0],
      메뉴들 : ['Home','Shop','About'],
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  methods:{
    increase(){
      this.신고수 +=1;
    }
  },

  components: {
  }
}
</script>

<style>

body{ 
  margin : 0
}
div{
  box-sizing: border-box;
}
.black-bg{
  width: 100%; height: 100%;
  background: rgba(0,0,0,0,5);
  position: fixed; padding: 20px;
}
.white-bg{
  width: 100%; background: white;
  border-radius: 8px;
   padding: 20px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px; 
}
.menu a {
  color:white;
  padding:10px;
}

</style>