Vue.js 사용법, 문법 (자바스크립트라이브러리)

vue .js 란 

자바스크립트 라이브러리 중 하나이다 ...

리액트 보다 문법이 간단해서 많이들 사용한다고 한다.

리액트 공부하면서  어렵다고 많이 느꼈는데 vue .js 공부를 오늘 잠깐 해보니 문법이 훨씬 쉽고 빠르다

 

Vue js. 능력

자동으로 렌더링이 된다 

 1. 자주 변경될 데이터들은 스크ㄹ비트로 밑에 저장해둠

1. {{ 데이터바인딩}} 이거 중괄호 쓰면서 다져다가 쓰세여ㅛㅁ
2. Html속성도 데이터 바인딩 가능  : 속성 = “데이터바인딩 이름”

 

 

반복문  사용하는 방법 v- for 

<태그 v-for =“이름 in 3 몇회 “ :key = “이름”>

 

이름  라는 어레이를 만들어서 

[] 반복하게 만들것이다 

필요한 정보를 [] 데이터 안에 담아 두고 

이름 In 몇회 반복 =< 이자리에 이름을  넣어준다 

 

vue.js 는 Array , object 넣기 반복문 특이다 그럼 그자료 개수 만큼 반복문이 돌아간다

 

 

<태그 v-for =“이름 in 3 몇회 “ :key = “이름”> {{작명한 이름}}</태그>

 

저 기 이름이란 변수는 데이터안의 자료가 된다 

 

정리  뷰 사용 특 

1. 자료 안에 데이터 갯수만틈 반복문 돈다 [ home , shop list]
2. 작명한 변수 는 데이터 안의 자료가 된다.
3. :key=“” 꼭 사용한 이유 = 반목문 돌린 요소를 컴퓨터가 구분하기 위해서 !!!중요  유니크한 문자
4. 반복문이 돌면서변하는 숫자 문자 
5. 변수 작명(ahi) 2개 까지 가능
6. 왼쪽변수 a는 어레이 데이터 / 오른쪽 변수는 1씩 증가하는 정수 

<a v-for=“(a, i) in 메뉴들 “ :key =“I”> {{a}} </a>

 

깔끔하게 반복문 사용 !! 

 

 vue js 에서 Button 안에 onClick 이벤트 함수 사용 방법 

@click=“”  / v-on: click=“”

@click=""  으로 자주 사용합니다 

ex) @mouseover 

 

++ 변수에 1씩 더해주세요  

+=1 , 아니면 ++  사용

 

 

 

Why we use function? 함수를 사용하는 이유는 ?  코드가 길어지면 지저분해서 함수 한곳에 만들어서 넣어주면 편하더

vue 에서 만드는 함수 코드 방식 

Methods: {}

 

Vue  함수 만들 때 주의사항 !! 삥 

 함수 안에서 데이터 쓸 땐 꼭 디스 =>This.데이터명

 

그리고  함수 안에 이름 영어로 ~~  영어로 써야 잘 먹는당

 

<button @click="신고수[1]++">허위매물신고</button>

허위매물신고 버튼안에 클릭 시  [이벤트 함수를 눌렀을 때 활성] 신고수 1번째 클릭시 ++ 1씩 증가

스팬 안에 신고수 : 숫자가 올라감  

 <div v-for="(원룸들, i) in 원룸들" :key="원룸들">
    <img :src="원룸들[i].image" alt="room-img" />
    <!-- <img src="./assets/room0.jpg " class="room-img" /> -->
    <!-- <h4 @click="open = false">{{ products[0] }}</h4> -->
    <h4>{{ 원룸들[i].title }}</h4>
    <p>{{ 원룸들[i].price }}</p>
    <p>{{ 원룸들[i].content }}</p>
    <!-- <button @click="신고수 += 1">허위매물신고</button> -->
    신고수 각각의 버튼 신고수 클릭 하면 따로 숫자가 올라가는 반복문 만들기 

  신고수: [0, 0, 0],
[0번째, 1번째, 2번쪠] 이다 

    <button @click="신고수[0] += 200">허위매물신고</button>
    <span>{{ 신고수[0] }}</span>
  </div>

 

 

<script>
import data from "./assets/post"; 
export default { 
  name: "App",
  data() {
    return {
      원룸들: data,
      price1: 60,
      price2: 80,
      스타일: "color:red",
      스타일2: "color:pink",
      products: ["천호동원룸", "역삼원룸", "선릉원룸"],
      menus: ["home", "shop", "list"],
      신고수: [0, 0, 0], V
      open: true,
    };
  },
  methods: {
    increase() {
      this.신고수 += 1; V
    },
  },
};
</script>

 

뷰를 사용시 데이터를 어떨게 만들기 생각하세욥 

 

데이터 바인딩 기억 하기

Html 태그 안 속성 값 데이터 바인딩할 떄 :src 

Html 태그 안에 내용 데이터 바인딩은 {{}} 

 

 <img :src="원룸들[0].image" alt="room-img" /> 

태그 안 속성 < 여기 서 > </>

    <h4>{{ 원룸들[0].title }}</h4>  태그 안 내용 !!  <> 내용</>

 

 

반복문 v-for 사용 인자 두개만들어서 i 로 1씩 증가 

  <div v-for="(oneroom, i) in 원룸들" :key="원룸들">

=>

1. 반복문이 돌면서변하는 숫자 문자 
2. 변수 작명(ahi) 2개 까지 가능
3. 왼쪽변수 a는 어레이 데이터 / 오른쪽 변수는 1씩 증가하는 정수 

=< 

   <img :src="원룸들[i].image" alt="room-img" />

    <!-- <img src="./assets/room0.jpg " class="room-img" /> -->

    <!-- <h4 @click="open = false">{{ products[0] }}</h4> -->

    <h4>{{ 원룸들[i].title }}</h4>

    <p>{{ 원룸들[i].price }}</p>

    <p>{{ 원룸들[i].content }}</p>

 

 

vue.js 로 데이터 바인딩 , 반복문 사용하였다.