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그냥 똑같이 쓰면됌

Windows 키 + R을 눌러 실행 대화 상자를 열고

​

%localappdata%\Microsoft\OneDrive\onedrive.exe /reset

를 복사하여 대화 상자 창에 붙여넣은 다음 확인을 누른다.

​

나 같은 경우는 "Windows에서 찾을 수 없습니다..." 라는 메시지가 표시됐는데,

이럴 경우에는 대신에

C:\Program Files (x86)\Microsoft OneDrive\onedrive.exe /reset

를 복사하여 붙여넣은 다음 확인을 누른다.

​

Windows 를 다시 눌러 시작으로 이동하여

검색 상자에 OneDrive를 입력한 다음, OneDrive 데스크톱 앱을 클릭하여 수동으로 다시 시작한다.

아이클라우드 오류떠서 원드라이브로 넘어온건데 얘도 오류가 너무 잦네... 클라우드들 때문에 스트레스 받는다..^^

작년 12월에 시작했던 버닝서버/테라버닝

버닝서버 리프가 오늘 2월 25일 오전 10시 패치 후 드디어 열렸다

메이플 잠시 쉬기로 했지만

이건 잊지말고 해야지~

안 그러면 캐릭 2개 열심히 키운거 걍 날리는거 ㅎ

나는 많이는 아니고

그냥 2개만 키웠었다

캡틴이랑 보우마스터

둘 다 유뇬보다는 링크용이라 120까지만 키우면 되긴 하지만

어짜피 키우는거 140까지 키우면 유니온 S등급이 되기 때문에

근데 귀찮아서 캡틴만 140까지 키우고 보마는 132까지 키움..ㅋ

(테라버닝 말고 그냥 버닝서버 버닝은 120까지만 3렙 씩 오름)

이렇게 베테랑 유니온 4단계가 되었다

이제 4500따리구나..

오늘부터 판교에 시위차들 돌아다닐거라는데

아직 못봤당 ㅇㅅㅇa

아 맞다 그리고 넥슨이 보상 줬다는데 까먹고 안 받고 나왔다

근데 어짜피 7일 안에 써야된대서 의미없음ㅋ

버닝캐 리프하고 유뇬레벨 올리고 겜 껐다

다시 잠수 꼬로록

zZZ

난 왜 매번 3주차꺼만 하는 느낌이지..?

오랜만에 들어갔는데 리퍼 스킨 얻을 수 있길래

또 열심히 9승 해서 얻음!

에임이 구려서 딱히 리퍼를 플레이 하진 않지만,,

그래도 꽁짜로 얻을 수 있으니

ㅎㅎㅎㅎ

이번에 새로 나온 스킨들..

이건 2주차때 받을 수 있는거였나보다ㅠ

맥크리도 플레이 하진 않지만.. 탐난다..

못 얻어서 아쉽 ㅠㅠㅠㅠㅠㅠ

그리고 제일 갖고싶은거

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

3000포인트 없어서 못 사는중.... 흐규흐규

9승 하려고 플레이 하다가 업적 2개 달성해서 얻은 스프레이들!

현상금 사냥꾼이랑 깃발 뺏기 재밌당

ㅋㅋㅋㅋ

둘 다 별로 예쁘진 않음

ㅋㅋㅋㅋ그냥 업적 달성에 의미를..