<transition name="작명">중간에 애니메이션 주고싶은거</transition>

트랜지션 태그로 감싸고 name="작명" 한 후에

style로 가서 이렇게 각각 3개 쓰고 스타일 주면 됌

등장 애니메이션 

.작명-enter-from = 시작

.작명-enter-active

.작명-enter-to = 끝

퇴장 애니메이션

.작명-leave-from = 시작

.작명-leave-active

.작명-leave-to = 끝

넘모 간단하다 호고곡 

근데 중간에 애니메이션 주고싶은거 감싸둔게 자식 컴포넌트인데

거기 안에있는 요소 애니메이션 바꾸고싶으면 어떻게 하지 ㅇㅅㅇ

<input v-model.number="month">
<p>{{month}}개월 : {{oneroom_data[index].price * month}}원</p>

이렇게 input태그에 넣는걸 p태그에 똑같이 적어주는데

숫자가 아닌 문자열을 적었을때 오류를 띄우고싶음

data() {
  return{
        month:1,
    } 
}

script의 data안에 이렇게 month의 초기 데이터값을 1로 줘놓고

그 밑에

month 값이 바뀔 때마다 감시하기 위한 watch를 만들어줌

watch: { 감시할데이터(){} }

vue.js 전용 form validation 라이브러리 사용하면 watcher 안써도 됌

month라는 data를 감시하고싶다면 watch안에 month라는 함수를 만들면되고,

그 month라는 데이터가 변화할때마다 month라는 함수가 실행이 됌

watch:{
  month(a){
  // "사용자가 month를 글자로 입력하면 경고문 띄우기" 라는 함수 띄우기
    if(isNaN(a) == true){
      alert('숫자만입력하세용');
      this.month = 1;
    }
  }
},

month()의 괄호 안에 파라미터를 추가해준다.  자유롭게 작명가능

month의 입력값이 바뀔때마다 결과 데이터를 파라미터안에 넣어주게 됌

파라미터는 2개까지 가능,

예를들어 (a,b)라면

왼쪽의 a는 변경 후 데이터, 오른쪽의 b는 변경 전 데이터

더보기

(구구절절)

 

코딩애플님이 숙제내주신거 열시미 구글링해서 혼자풀어따ㅠ

다 풀고 답지봤을때 답이랑 똑같이 푼거보고 희열느껴짐

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

근데 답지에 1aaaa같은거 쓰면 alert안띄워지는거에 대한 답도 있을줄알았는데

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅎ..더 구글링 해봐야겠다 ^^

 

 

+

 

사실 중간에 구글링 포기하고 답지 보려고 딱 스크롤 내렸는데

 

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

ㅎㅎㅎ.....하하하핳ㅎ

정말 너무 재밌으셔 ~ㅋㅋ

 

바로 닫고 다시 구글링 하러가서...결국 혼자 품..

정말. 좋은. 선생님이시다..!!ㅎㅎ

 

 

input박스에서 숫자를 넣고

그 밑에 글자로 기존가격*input에넣은숫자 하고싶을때

스크립트 안에 month 데이터를 준다

기본 1달로 설정함

export default {
    name: 'modal',
    data() {
      return{
            oneroom_data: oneroom_data,
            modalOnFlag: false,
            index:0,
            month:1,
        } 
    },
}

데이터에 지정해둔 month를 input에 내가 넣는 숫자를 지정해주고싶으면 

<input @input="month = $event.target.value">

쌩 자바스크립트로 이렇게 짜는데

이걸 vue.js 문법으로

간단히 하면

<input v-model="month">

v-model 이라는걸 쓰면 간단히 할 수 있음!

그리고 여러가지 

    <!-- 기존 쌩자바스크립트 -->
    <input @input="month = $event.target.value">
    
    <!-- input에 입력한것들은 모두 문자자료로 인식함 -->
    <textarea v-model="month"></textarea>
    
     <!-- true or false -->
    <input type="checkbox" v-model="month">
    
    <!-- 선택형 -->
    <select v-model="month">
        <option value="2314"></option>
        <option value="fgff"></option>
        <option value="13414"></option>
    </select>

    <!-- 더하기를 하게만들고싶으면 .number형으로 만들어줘야함 (기본은 숫자아니고 문자자료라서) -->
    <input v-model.number="month">
    
   <!-- .number형으로 지정안해줘도 곱하기는 알아서 잘 됌 -->
    <p>{{month}}개월 : {{oneroom_data[index].price * month}}원</p>

커스텀이벤트 Custom Event

자식요소에서 부모요소까지 이벤트를 전달하고싶을때
자식은 부모의 데이터를 직접 수정할수없음
따라서 커스텀이벤트로 부모데이터를 수정해달라고 메세지를 보내는것

$emit() 을 쓰면 부모에게 메세지를 보낼수있다

제이쿼리에서 쓰는것처럼

$가 들어간다면 vue에서도 뭔가 특별한 변수임  

<div @click="$emit('작명',데이터)"> 

데이터에는 숫자,문자,오브젝트,어레이 다 들어갈수있음
쓰기싫거나 쓸거없으면 안써도됌 

ex)

자식 컴포넌트 template 안에서

<div @click="$emit('openModal')"> 

부모에게 메세지 발사!

부모 컴포넌트에서는 메세지를 수신하는 코드를 또 적어줘야함 자동으로 ㄴㄴ
부모 template에 자식 컴포넌트 써둔거 예를들어 <Card/>안에 코드 적어줌

@작명한거="요안에는자바스크립트아무거나쓸수있음" 

<Card @openModal="open=true;">   

몇번째 클릭한건지 알고싶을때

자식 컴포넌트에서는

<div @click="$emit('openModal',데이터.id)">

몇번째 id를 클릭한건지 id 데이터를 같이 보내줌
이 div를 누르면 데이터파일의 id담아서 부모한테 메세지 보내달라고 코드짠것 

부모 컴포넌트에서는

<Card @openModal="open=true; clicked= $event">  

자식이 보낸 데이터는 $event 변수에 담겨있음
또는 그냥 누른거=i 해도 되긴함 같은 i일때

$emit()안에 써둔 스크립트가 너무 길어서 그냥 이걸 함수안에서 쓰고싶다면?

자식컴포넌트의 script부분에

export default{
 methods:{
   send(){
     this.$emit('openModal',this.데이터.id)
   }
 }
}

이렇게 써놓고

<div @click="send"> 

쓰면 똑같이 작동!

methods 안의 함수에서는 this를 꼭 붙여줘야 에러가 안남

함수명은 한글로하면 에러남

예를들어 App.vue 부모 컴포넌트가 있고

File.vue라는 자식 컴포넌트가 있을 시

부모에 있는 데이터들을 File.vue인 자식에게 Props 시키고싶을때 

<!-- 기본 -->
<File :작명(또는데이터이름그대로)="데이터이름"/>

<!-- Array나 Object 그대로 보내기 -->
<File :데이터이름="[123,456]"/>

<!-- 간단한 문자열들은 v-bind문법없이도 바로 보낼수있다
	글자는 v-bind없이 바로바로 간다 -->
<File 데이터이름="안녕하세요문자자료"/>
<File :데이터이름="12344(숫자자료)"/>

<!-- Object 데이터들을 한번에 간단히 축약해서 보내는법 -->
<File :이름="오브젝트.name" :나이="오브젝트.age"/>

<!-- 이렇게 이름만 써도 됌. 한번에 보내는방법. -->
<File v-bind="오브젝트"/>

<!-- 또는 그냥 이렇게 보내도 똑같음 -->
<File :오브젝트="오브젝트"/>

component 만드는 방법

1. src나 아무데나 .vue로 끝나는 파일만듦

2. 그냥 처음 썼던 app.vue처럼 형식같게해서 내가 넣고싶은 html 넣음 스타일 줌 

3. script 부분에 이름을 줌 

4. css는 app.vue에 하나 여기 style에 넣나 똑같이 작동할거임 

축약해둔 컴포넌트 component를 만들었다면 갖다 쓸수있는방법 

1. vue 파일 import 해오고 (app.vue script의 맨 위에 import)

2. 등록하고 (import한거 밑에 component부분에 등록하기)

3. 쓰기 (template에 <어쩌구/>라고 갖다쓰는것)

반복적으로 출현하는 부분들만 component로 만들것....(온갖거 다 쓰지말고)

용어정리 

부모 컴퍼넌트 : 예) 가장 최상단의 App.vue

자식 컴퍼넌트 : 예) Slide.vue, Modal.vue

.vue의 naming을 할때는 기본적으로 맨앞을 대문자로 하고 길어질 경우 캐멀표기법을 쓴다

예를들면 This.vue 그리고 LikeThis.vue

자식컴포넌트인 예를들어 Modal.vue 파일로 가서

기존 App.vue에있던 template안에 데이터바인딩되있는채로 복붙시켜온다면???

component를 만들어두면 위에서 내가 쓰겠다고 데이터바인딩해둔게 이 파일안에 없기때문에 작동이안함.

무조건 밑에 script안에 있는것만 위에 template에 갖다쓸수있음.

component의 단점임. 데이터관리가 빡세짐

따라서 props를 써야한다

부모의 데이터를 자식이 갖다쓰고싶을때 쓰는 문법이 바로 Props

Props 쓰는 방법

1. 데이터 보내고 

<Slide/>안에 v-bind시킨다. 예) <Slide :데이터이름="데이터이름" />

2. 등록하고

Slide.vue로 가서 script쪽에 props만들어서 등록을한다 

3.쓰기

자식 컴포넌트에 자체적으로 스크립트안에 data를 넣어도 되긴하지만

부모가 쓰게될일이있다면 부모한테 만들어주는게좋음

많은 컴포넌트들이 쓴다면 그 중에 최상위 컴포넌트에 만들어두는게 간편함 

위로갖다쓰는건 props로 안됌 다른 문법 써야함

예시)

1. App.vue의 template안에서

<Modal :데이터이름="데이터이름" :Click="Click" :anotherData="thisIsData" />

연결시킬 Props가 많다면 그냥 이렇게 계속 v-bind시키면됌

v-bind 속성을 축약한게 :

1.5. App.vue의 Script 안에서

import Modal from './Modal.vue';


export default {
  name: 'App',
  // 컴포넌트 components를 만들었다면 밑에 쓰겠다고 등록해야함
  // es6 신문법으로 discount, 이렇게 하나만 써도 써지긴함
  components: {
    Modal: Modal,
  }
}

2. 자식컴포넌트인 Modal.vue의 Script 안에서

export default {
    name: 'Modal',
    props :{
        원룸데이터 : Object,
        누른거: Number,
        모달창열렸니: Boolean,
    }
}

이런식으로 name을 지정해주고

그 밑으로 Props들을 등록한다

부모컴퍼넌트에서 가져다쓸 데이터를 연결시키는 것
문자면 String, 숫자면 Number, 배열이면 Array, {요런거 들어간} 오브젝트면 Object, true/false면 Boolean..

틀리다고 오류뜨진않음

그리고 자식컴포넌트에서 props는 절대 막 수정하면안됨 read-only

스크립트나 컴포넌트로 나누어둔 어쩌구.vue를 쓰려면

script안에 import를 시켜야함

import/export 문법 쓰는 법
1. export default 변수명 
2. import 변수명 from 그파일경로

import/export 문법 쓰는 법 2
1. export {변수1, 변수2..}
2. import {변수1, 변수2..} from 경로

import {hi,hi2} from './assets/script.js';
hi;
hi2;


export default {
  name: 'App',
  data(){
    return{
    }
  },
  methods : {
  },
  components: {
  }
}

변수명 만들어두고 안쓰면 에러뜸

v-if="조건식"

조건식이 참일때만 보여줌 

 v-if="이거열렸나 == true"

이렇게되어있으면 열리고

 v-if="이거열렸나 == false"

이러면 안열리게

예시)

1. Template

<!--이걸클릭하면-->
<div @click="이거열렸나 = true;">어쩌구</div>


<!--이 모달창이 열림 안에있는 button 클릭하면 닫힘 -->
<div v-if="이거열렸나 == true">
	<button @click="이거열렸나 = false">닫기</button>
</div>

어쩌구가있는 Div를 클릭하면 

"이거열렸나"가 true가 되게해서

밑에 Div의 v-if가 발동하게됌

2. Script

export default {
  name: 'App',
  data(){
    return{
      이거열렸나 : false,
    }
  },

처음 기본은 false로 해두면 기본상태는 안보이는 상태

그 외

v-if

v-else

v-else-if

<!-- vue 조건문 문법 -->
<div v-if="1 == 2">
  안녕하세요
</div>
<!-- 위에 if가 안되면 밑에 else를 실행해라 -->
<!-- <div v-else>
  안녕하세요2
</div> -->
<!-- if else를 여러개쓰고싶으면 v-else-if를 써라 위에꺼아니면 이것도 맞는지아닌지 확인하게하고싶을때-->
<div v-else-if="1 == 3">
  안녕하세요3
</div>

vue.js 기본적인 설치

node js를 다운받고

vscode 터미널에서 npm install -g@vue/cli 입력

설치완료 후 다시 터미널에서 vue create 프로젝트명 입력

프로젝트폴더명으로 새로 오픈한 후 코딩시작

미리보고싶으면 터미널에  npm run serve 입력

반복문

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

내용을 데이터바인딩하고싶으면  {{이렇게}}

속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게

이미지 넣을때 require을 써야하는데 외부꺼 가져올때는 require 안붙여도되는듯

<!-- 내용을 데이터바인딩하고싶으면 콧수염두개 {{이렇게}} -->
<!-- 속성을 데이터바인딩하고싶으면 앞에 : 예를들면 img태그에서 :src 이렇게 -->

<div v-for="(원룸들,i) in 6" :key="i" class="onerooms">
    <!-- 이미지 넣을때 require을 써야함 -->
    <!-- <img :src="require('./assets/rooms/room' + i + '.jpg')" :alt="'원룸사진'+ i" class="room_image"> -->
    <!-- 외부꺼 가져올때는 require 안붙여도되네 -->
    <img :src="원룸데이터[i].image" :alt="'원룸사진'+ i" class="room_image">
    <!-- 클릭하면 모달창열렸니를 true로 만들어라 (클릭하면 모달창을 열어라) -->
    <h4 @click="모달창열렸니 = true; 누른거 = i">{{원룸데이터[i].title}}</h4>
    <p>{{원룸데이터[i].price}}원</p>
    <button @click="increase(i)"> 허위매물신고 </button>
    <span> 신고 수 : {{신고수[i]}}</span>
  </div>

Script에서

  // data 데이터바인딩을 위한 데이터 저장통! 중요하고 자주 바뀌는 데이터들을 쓰는곳

  // methods = 함수만드는공간

  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함

export default {
  name: 'App',
  // data 데이터바인딩을 위한 데이터 저장통
  data(){
    }
  },
  // methods = 함수만드는공간
  methods : {
    }
  },
  // 컴포넌트 components를 만들었다면 쓰겠다고 등록해야함
  components: {
  }
}

Style은 

css그냥 똑같이 쓰면됌