Vue 문법 정리

💻웹(Web)

Vue 문법 정리

stonesy 2025. 1. 12. 21:37

728x90

1. v-text

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app1">
      <p>{{myText}}</p>
      <p v-text="myText"></p>
    </div>
    <script>
      new Vue({
        el: "#app1",
        data: {
          myText: "Hello!",
        },
      });
    </script>
  </body>
</html>

2. 데이터 타입

Vue에서 데이터타입은 숫자형, 문자형, Boolean이 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue 문자형 example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app1">
      <p>{{ myPrice * 1.08 }}</p>
      <p>{{ "안녕하세요~ "+ myName + "님" }}</p>
      <p>{{ myName.substr(0,1) }}</p>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          myPrice: 500, //숫자형
          myName: "홍길동", //문자형
        },
      });
    </script>
  </body>
</html>

3. v-on

이벤트 지정. 약어로 @를 사용할 수도 있다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-on example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app1">
      <p v-text="value"></p>
      <button v-on:click="setValue('1번')">1번 버튼</button>
      <button @click="setValue('2번')">2번 버튼</button>
    </div>
    <script>
      new Vue({
        el: "#app1",
        data: {
          value: "클릭해 보세요.",
        },
        methods: {
          setValue(str) {
            this.value = str + " 클릭";
          },
        },
      });
    </script>
  </body>
</html>

4. v-bind

속성에 vue 인스턴스의 속성이나 메소드, JavaScript 구문을 사용할 수 있게 해준다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-bind example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app1">
      <a v-bind:href="url">네이버</a>
      <a :href="getUrl('google')">구글</a>
    </div>
    <script>
      const app = new Vue({
        el: "#app1",
        data: { url: "https://www.naver.com" },
        methods: {
          getUrl: function (name) {
            return "https://" + name + ".com";
          },
        },
      });
    </script>
  </body>
</html>

5. v-model

양방향 데이터 바인딩

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <title>v-model example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app1">
      <!--v-model을 사용해 프로퍼티에 값을 input값으로 저장가능-->
      <input type="text" v-model="input_model" placeholder="이름" />
      <p>input model: {{input_model}}</p>

      <!--lazy는 input의 포커스를 다른곳으로 이동할 때 프로퍼티에 저장하는 기능-->
      <input type="text" v-model.lazy="input_model2" />
      <p>input lazy model : {{input_model2}}</p>

      <!--textarea에서도 v-model 사용가능-->
      <textarea v-model="textarea_model"></textarea>
      <p>textarea model : {{textarea_model}}</p>

      <!--checkbox에서 사용 예제 저장된 프로퍼티를 v-bind를 통해 로직 실행가능-->
      <input type="checkbox" v-model="checkbox_model" value="awd" />
      <button v-bind:disabled="checkbox_model === false">disabled</button>
      <p>checkbox model : {{checkbox_model}}</p>

      <!--프로퍼티를 배열로 선언하면 value값을 저장-->
      <input type="checkbox" v-model="checkbox_model2" value="test1" />
      <input type="checkbox" v-model="checkbox_model2" value="test2" />
      <p>checkbox model : {{checkbox_model2}}</p>

      <!--라디오 프로퍼티 저장-->
      <input type="radio" v-model="radio_model" value="test1" />
      <input type="radio" v-model="radio_model" value="test2" />
      <input type="radio" v-model="radio_model" value="test3" />
      <p>radio model : {{radio_model}}</p>

      <!--select 프로퍼티 저장-->
      <select v-model="select_model">
        <option>test1</option>
        <option>test2</option>
      </select>
      <p>select model : {{select_model}}</p>
    </div>
    <script>
      const app = new Vue({
        el: "#app1",
        data: {
          input_model: "",
          input_model2: "",
          textarea_model: "",
          checkbox_model: false,
          checkbox_model2: [],
          radio_model: "",
          select_model: "",
        },
      });
    </script>
  </body>
</html>

6. v-if

조건문

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-if example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <!--버튼 클릭시 클릭한 text출력과 클릭한 버튼 비활성-->
      <button v-bind:disabled="one" v-on:click="oneCheck">one</button>
      <button v-bind:disabled="two" v-on:click="twoCheck">two</button>
      <button v-bind:disabled="three" v-on:click="threeCheck">three</button>
      <p v-if="one">onc click</p>
      <p v-else-if="two">two click</p>
      <p v-else>three click</p>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          one: false,
          two: false,
          three: true,
        },
        methods: {
          oneCheck() {
            this.one = true;
            this.two = false;
            this.three = false;
          },
          twoCheck() {
            this.one = false;
            this.two = true;
            this.three = false;
          },
          threeCheck() {
            this.one = false;
            this.two = false;
            this.three = true;
          },
        },
      });
    </script>
  </body>
</html>

7. v-for반복문

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-for example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <!--arr배열의 각 요소를 item에 담는다-->
        <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
        <br />

        <!--object의 key값과 value를 불러와 출력가능-->
        <li v-for="(value, key) in obj" :key="key">{{ key }} : {{ value }}</li>
        <br />

        <!--objectArray의 item(Object)를 출력-->
        <li v-for="(item, index) in objArr" :key="index">
          {{ item.a}} : {{ item.b }} : {{ item.c }}
        </li>
        <br />

        <!--입력값을 추가 하는 기능-->
        <input v-model="num" />
        <button v-on:click="add(num)">add</button>
        <button v-on:click="deletes()">delete</button>
        <li v-for="item in pushArr">{{item}}</li>
      </ul>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          arr: ["쨈빵", "멜론빵", "크로와사"],
          obj: { a: 1, b: 2, c: 3 },
          objArr: [
            { a: 1, b: 2, c: 3 },
            { a: 4, b: 5, c: 6 },
          ],
          pushArr: [],
          num: 0,
        },
        methods: {
          add(val) {
            this.pushArr.push(val);
          },
          deletes() {
            this.pushArr.pop();
          },
        },
      });
    </script>
  </body>
</html>

https://cjw-awdsd.tistory.com/33

[Vue] Vue.js 기본 문법 총정리

최근 프로젝트에서 프론트엔드 Jquery, Ajax를 적극 활용해보며 프론트에 약간 관심이 생겨 Vue를 한번 공부해봤다. Vue에 대한 개념은 건너뛰고 문법만 딱 정리하고자 한다. 1. Vue 인스턴스 Vue.js로

cjw-awdsd.tistory.com

728x90

'💻웹(Web)' 카테고리의 다른 글

코드 리팩토링 (1)	2024.12.20
Spring (0)	2024.12.02
JSP(Jakarta Server Pages), JSTL(JSP Standard Tag Library) (0)	2024.12.01
Servlet (0)	2024.12.01
[공통프로젝트]5주차: React Openvidu 구현 (0)	2024.08.11

현재글Vue 문법 정리

https://github.com/seoyoung927

250x250

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

stonesy

Vue 문법 정리

'💻웹(Web)' 카테고리의 다른 글

'💻웹(Web)'의 다른글

티스토리툴바

Vue 문법 정리

'💻웹(Web)' 카테고리의 다른 글

'💻웹(Web)'의 다른글

관련글

티스토리툴바