Vue.js 문법 정리

 

해당 게시물에 계속해서 업데이트합니다.

{{변수명}}

// 문법
new Vue({
 el : '#test',
 data : {},    // 데이터 변수
 method : {},  // 함수
 computed : {} // 계산식
})

 

 

1. v-html="vue변수명"

- 태그 변수를 넣을때 사용. 부모 엘리먼트에 속성으로 넣어주면 안에 만들어짐.

// js
new Vue({
 el : '#test',
 data : {
   tag : '<p>test</p>'
 }
})

// html
<div id="test">
  <div v-html="tag">
   //div 안에 tag의 할당된 태그가 넣어짐.
  </div>
</div>

 

 

2. v-bind:속성이름

- 속성에 뷰 변수를 넣을때 사용

v-bind:href="vue변수명"

- 약어 :

// js
new Vue({
 el : '#test',
 data : {
   site : 'http://test.com'
 }
})

// html
<div id="test">
  <a v-bind:href="site"> {{ site }} </a>
</div>

// 속성에 일반 텍스트와 변수 조합시
<a href="" :class="'test' + index"> 링크 </a>

 

 

3. v-on: (@로 대체가능)

- 함수를 붙일때 사용 (기능)

- 기능명.once 를 붙이면 한번만 작동

- 기능명.prevent 를 붙이면 엘리먼트의 기본 기능을 하지 않음 ex) @click.prevent

* click(클릭), dblclick (더블클릭)

// js
new Vue({
 el : '#test',
 data : {
   age: 30
 },
 method : {
  plus : function(inc) {
    this.age += inc;
  },
  minus : function (dec) {
    this.age -= dec;
  }
 }
})

// html
<div id="test">
  <p>{{age}}</p>
  <button v-on:click="plus(10)">10살 더 먹기</button>
  <button v-on:dblclick="minus(10)">10살 덜 먹기</button>
</div>

* mousemove

// js
new Vue({
 el : '#canvas',
 data : {
   x : 0,
   y : 0
 },
 method : {
  eventXY : function(event) {
    this.x = event.offsetX;
    this.y = event.offsetY;
  }
 }
})

// html
<div id="canvas" v-on:mousemove="eventXY">
  {{x}}, {{y}}
</div>

*keyup

<input type="text" v-on:keyup="keyupEvent"> // keyup의 경우 keyupEvent 실행
<input type="text" v-on:keyup.enter="keyupEvent"> // keyup중 enter키일 경우 keyupEvent 실행
<input type="text" v-on:keyup.alt.enter="keyupEvent"> // keyup중 alt+enter키일 경우 keyupEvent 실행

 

 

4. v-model:

- 양반향 바인딩

// js
new Vue({
 el : '#test',
 data : {
  name : ''
 }
})

// html
<input type="test" id="test" v-model="name">
<p>{{name}}</p>
// input 입력된 문자가 p에서 나타난다.  

 

 

5. v-if, v-else-if, v-else (조건)

- false의 경우 엘리먼트(=태그)를 생성하지 않는다.

- 조건문과 동일하게 쓸 수 있다.

error : false,
success : false 

<p v-if="error">error is true</p>
<p v-else-if="success">other condition</p>
<p v-else>error is false</p>

 

 

6. v-show

- 값을 true, false로 간단히 show/hide 기능을 만들어 낼 수 있다.

value : false
<p v-show="value">안보여요</p>

value : true
<p v-show="value">보여요</p>

 

 

7. v-for (반복)

ary : [
  {name : 'name1', age : 10},
  {name : 'name2', age : 20},
  {name : 'name3', age : 30}
]

// 나타내는 방법1
{{ary[0].name}}
- name1

// 나타내는 방법2
<ul>
  <li v-for="row명 in ary">{{row명.name}}</li>
</ul>
- name1
- name2
- name3

// 나타내는 방법3
<ul>
  <li v-for="(row명, index) in ary">{{index}}. {{row명.name}}</li>
</ul>
- 0. name1
- 1. name2
- 2. name3

 

 

8. template

- template 엘리먼트 안의 구조가 들어간다.

// new Vue
ary : [
  {name : 'name1', age : 10},
  {name : 'name2', age : 20},
  {name : 'name3', age : 30}
]

// template 
<template v-for="data in ary">
 <div v-for="(val, key) in data">
    <h1 class="name">{{val}}</h1>
  <p>{{key}}</p>
 </div>
</template>

 

 

9. 다른 vue 객체의 값 변경

- js 프레임워크라서 js 의 쓰임새와 같다고 생각하면된다.

var one = new Vue({
  el: '#vue-app-one',
  data : {
    title : 'one'
  },
  methods : {

  },
  computed : {
    greet : function() {
      return "hello one";
    }
  }
});

var two = new Vue({
  el: '#vue-app-two',
  data : {
    title : 'two'
  },
  methods : {
    changeTitle : function() {
      one.title = 'changed title';
    }
  },
  computed : {
    greet : function() {
      return "hello two";
    }
  }
});

two.title = "outside title ";

 

 

10. component 문법

- 미리 정의한 component를 불러올 수 있다.

- 아래 문법은 component 등록을 뜻함.

10-1.

Vue.component('greeting',  {
  template : '<p>Hello {{name}} </p>', // root 엘리먼트가 하나 있어야함. 연달아 형제엘리먼트 추가 못함.
  data : function() {
    return {
      name : 'Jeon'
    }
  }
});

10-2.

var ary = {
  name : 'jeon', age: 30
};

Vue.component('greeting',  {
  template : '<p>Hello {{name}} </p>', // root 엘리먼트가 하나 있어야함. 연달아 형제엘리먼트 추가 못함.
  data : function() {
    return ary
  }
});

 

 

11. ref

- $refs 속성 사용 (ex: this.$refs.input2.vlaue)

- input 에 기입된 ref는 vue의 속성으로 dom을 불러온 후엔 나오지 않는다.

- ref 속성으로 vue 참고 객체를 만들어서 사용하는 것으로 판된되어진다.

- 다른 자료들을 보면 $ref로 dom에 접근이 가능하지만, vue.js 자체는 백엔드가 dom을 다루지 않는게 목적이기 때문에 사용을 지양한다.

(이부분 아직 노 이해)

참고 : https://devriver.tistory.com/31

<div id="vue-app">
  <input type="text" name="" id="" ref="input2">
  <button v-on:click="readRefs">submit</button>
  <p>{{output}} <-</p>
</div>



new Vue({
  el: '#vue-app',
  data : {
    output : 'test'
  },
  methods : {
    readRefs : function() {
      this.output = this.$refs.input2.value; 
    }
  },
  computed : {
  }
});

 

 

 

 

 

 

 

 

최초작성일 2021-02-08

* 해당 게시물에 계속 업데이트할 예정입니다.

 

업데이트 2021-02-09

업데이트 2021-02-10

업데이트 2021-02-17