'Vue' 태그의 글 목록

App.vue

<template>
  <div>
    <h2>hello Teleport</h2>
    <teleport to="#extra-modal" :disabled="isTeleport">
      <div class="modal">
        this is modal
        <button @click="isTeleport = !isTeleport">teleport toggle</button>
      </div>
    </teleport>
    <teleport to="#extra-modal">
      <div class="modal2">this is modal2</div>
    </teleport>
  </div>
</template>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      isTeleport: true,
    };
  },
};
</script>

<style scoped>
.modal {
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <div id="extra-modal"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

원래는 App.vue에 작성하는 모든 내용은

index.html의 id가 app인 div태그로 들어가게 된다.

하지만

텔레포트를 이용하면 App.vue에 있는 내용들을

index.html 에서 id가 app인 div태그 외부로 보낼 수 있다.

'Web > Vue' 카테고리의 다른 글

[Vue] slot (0)	2022.06.29
[Vue] Component5 , keep-alive, dynamic component (0)	2022.06.29
[Vue] Component4, your input is (0)	2022.06.29
[Vue] Component 3 (0)	2022.06.29
[Vue] Component 2 (0)	2022.06.25

<template>
  <div>
    <h1>watchers</h1>
    <h1>current money :: {{ money }}</h1>
    <div>
      <button @click="money += 100">earn money</button>
      <button @click="money -= 100">spend money</button>
    </div>
    <h3>{{ receipt }}</h3>
    <button @click="receipt.food += 500">buy food</button>
    <hr />
    <input type="text" v-model="userName" />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      userName: "scalper",
      money: 0,
      receipt: {
        food: 3000,
        fee: 2000,
        fare: 10000,
      },
    };
  },
  watch: {
    //오브젝트의 경우 다르게 해야함
    // receipt(newValue, oldValue) {
    //   console.log("영수증에 값 변화가 있음", newValue, oldValue);
    // },
    userName: {
      handler(newValue) {
        console.log(newValue, "newValue");
      },
      immediate: true,
    },

    receipt: {
      handler(newValue) {
        console.log("영수증에 값 변화", newValue);
      },
      deep: true,
    },
    money(newValue, oldValue) {
      console.log(oldValue);
      if (newValue > 2000 && newValue > oldValue) {
        console.log("mission complete");
      }

      if (oldValue < 1500 && newValue < oldValue) {
        console.log("save money!");
      }
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

watch는 값의 변화를 추적할 수 있다.

'Web > Vue' 카테고리의 다른 글

[Vue] Component 2 (0)	2022.06.25
[Vue] Component 1 (0)	2022.06.25
[Vue] Computed (0)	2022.06.25
[Vue] Directives (0)	2022.06.24
[Vue] 폼 핸들링 (0)	2022.06.24

<template>
  <div>
    <h1 v-focus>Directives</h1>
    <h2 v-once>유저의 이름은 {{ username }}</h2>
    <button @click="changeName">change name</button>

    <!-- pre 사용하면 해당 dom은 컴파일에서 제외되고 출력 -->
    <h2 v-pre>{{ username }}</h2>
    <input v-focus type="text" />
    highlight -> <input type="text" v-highlight />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
    };
  },
  directives: {
    focus: {
      mounted(e1) {
        e1.focus();
      },
    },
    highlight: {
      mounted(e1) {
        console.log({ e1 });
        e1.oninput = () => {
          e1.style.background = "salmon";
          e1.style.color = "#fff";
        };
        e1.onmouseout = () => {
          e1.style.background = "green";
        };
      },
    },
  },
  methods: {
    changeName() {
      console.log("name change!!!");
      this.username = "code!!!";
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

'Web > Vue' 카테고리의 다른 글

[Vue] Watch (0)	2022.06.25
[Vue] Computed (0)	2022.06.25
[Vue] 폼 핸들링 (0)	2022.06.24
[Vue] 이벤트 (0)	2022.06.24
[Vue] 메서드 (0)	2022.06.24

<template>
  <div>
    {{ user }}

    <!-- IME -->
    <h1>{{ user.name }}</h1>
    <hr />
    <form>
      <div>
        <label for="name">이름</label>
        <input type="text" id="name" v-model="user.name" @input="setValue" />
      </div>
      <div>
        <label for="age">나이</label>
        <input type="number" id="age" v-model="user.age" />
      </div>

      <!-- select -->
      <div>
        <label for="city">사는 곳</label>
        <select id="city" v-model="user.city">
          <option
            v-for="option in cityOptions"
            :value="option.label"
            :key="option.code"
          >
            {{ option.kr }}
          </option>
        </select>
      </div>

      <!-- multiple select -->

      <div>
        <label for="favorite-food">좋아하는 음식</label>
        <select id="favorite-food" multiple v-model="user.favorite">
          <option
            v-for="option in foodOptions"
            :value="option.code"
            :key="option.code"
          >
            {{ option.label }}
          </option>
        </select>
      </div>

      <!-- checkbox -->
      <div>
        <label for="job">직업</label>
        프로그래머<input
          type="checkbox"
          value="programmer"
          v-model="user.job"
        />
        가수<input type="checkbox" value="singer" v-model="user.job" />
        교사<input type="checkbox" value="teacher" v-model="user.job" />
      </div>

      <!-- radio -->
      <div>
        <label for="job">성별</label>
        남
        <input type="radio" value="male" v-model="user.gender" />
        여
        <input type="radio" value="female" v-model="user.gender" />
      </div>
    </form>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      foodOptions: [
        { label: "짜장면", code: "JJ" },
        { label: "짬뽕", code: "JB" },
        { label: "탕수육", code: "TS" },
      ],
      user: {
        name: "",
        age: 0,
        city: "seoul",
        favorite: [],
        job: [],
        gender: 0,
      },
      cityOptions: [
        { kr: "서울", label: "seoul", code: "S" },
        { kr: "대전", label: "daejeon", code: "DD" },
        { kr: "대구", label: "daegu", code: "D" },
        { kr: "부산", label: "busan", code: "B" },
        { kr: "광주", label: "gwanju", code: "G" },
      ],
    };
  },
  // 한글 바로바로 업데이트하기 위한 메써드
  methods: {
    setValue(e) {
      console.log(e.target.value);
      this.user.name = e.target.value;
    },
  },
};
</script>

<style>
a {
  font-size: 24px;
  display: block;
}

label {
  font-size: 22px;
  font-weight: bold;
  margin-right: 1 rem;
}

div {
  margin-bottom: 1rem;
}
</style>

'Web > Vue' 카테고리의 다른 글

[Vue] Computed (0)	2022.06.25
[Vue] Directives (0)	2022.06.24
[Vue] 이벤트 (0)	2022.06.24
[Vue] 메서드 (0)	2022.06.24
[Vue] 조건부 리스트 렌더링 (0)	2022.06.24

<template>
  <div>
    <div>
      {{ fruits }}
    </div>

    <div>
      <ul>
        <li v-for="(fruit, index) of fruits" :key="index">
          {{ index * index * index }} {{ fruit }}
        </li>
      </ul>

      <h2 v-for="(value, key, index) in user" :key="key">
        {{ index }}, {{ key }} : {{ value }}
      </h2>

      <p v-for="n in 5" :key="n">{{ n }}</p>

      <!-- 중첩반복문 -->
      <div v-for="(animal, animalIndex) in animals" :key="animalIndex">
        <h2>Animal ===> {{ animal.name }}</h2>
        <h3>food</h3>
        <ul>
          <li v-for="(food, foodIndex) in animal.food" :key="foodIndex">
            {{ animal.name }} has {{ foodIndex }} : {{ food }}
          </li>
        </ul>
      </div>

      <div v-for="i in 9" :key="i">
        <div v-for="j in 9" :key="j">i:{{ i }}, j:{{ j }} = > {{ i * j }}</div>
        <div>---</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      // list
      fruits: ["banana", "strawberry", "apple", "melon"],

      //object
      user: {
        name: "scalper",
        age: 100,
        job: "programmer",
      },

      //object list
      animals: [
        { name: "monkey", size: "medium", food: ["banana", "apple"] },
        { name: "lion", size: "big", food: ["deer", "cow"] },
        { name: "rat", size: "small", food: ["cheese", "rice"] },
      ],
    };
  },
};
</script>

<style></style>

'Web > Vue' 카테고리의 다른 글

[Vue] 메서드 (0)	2022.06.24
[Vue] 조건부 리스트 렌더링 (0)	2022.06.24
[Vue] 조건부 렌더링 (0)	2022.06.23
[Vue] v-if v-show 차이 (0)	2022.06.23
[Vue] 클래스 바인딩 (0)	2022.06.23

<template>
  <div>
    <!-- v-once -->
    <!-- <h1>Hello {{ user.name }}</h1> -->
    <!-- <h1 v-once v-text="user.name"></h1>
    <h1 v-text="user.name"></h1>
    <input type="text" v-model="user.name" /> -->

    <!-- if / else -->
    <!-- <h1 v-if="showname">My name is {{ user.name }}</h1>
    <h2 v-else>이름을 보여줄 수 없습니다.</h2>
    <h2 v-if="user.age > 20">당신은 성인입니다.</h2>
    <h2 v-else-if="user.age > 14 && user.age < 20">당신은 청소년 입니다.</h2>
    <h2 v-else>당신은 어린이 입니다.</h2> -->

    <h2 v-if="!showName">{{ user.name }} IF</h2>
    <h2 v-show="!showName">{{ user.name }} Show</h2>

    <ul>
      <template v-if="question === 'frontend'">
        <li>HTML은 재미있나요?</li>
        <li>CSS은 재미있나요?</li>
        <li>Javascript은 재미있나요?</li>
      </template>
      <template v-else>
        <li>Java은 재미있나요?</li>
        <li>Python은 재미있나요?</li>
        <li>C#은 재미있나요?</li>
      </template>
    </ul>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      question: "frontend",
      showName: true,
      user: {
        name: "scalper",
        age: 12,
        job: "programmer",
      },
    };
  },
};
</script>

<style></style>

'Web > Vue' 카테고리의 다른 글

[Vue] 메서드 (0)	2022.06.24
[Vue] 조건부 리스트 렌더링 (0)	2022.06.24
[Vue] 리스트 렌더링 (0)	2022.06.23
[Vue] v-if v-show 차이 (0)	2022.06.23
[Vue] 클래스 바인딩 (0)	2022.06.23

<h2 v-if="!showName">{{ user.name }} IF</h2>
<h2 v-show="!showName">{{ user.name }} Show</h2>

v-if는 해당 명령을 실행할 때마다 보여줄 값을 렌더링하는 반면

v-show는 최초에 한번만 렌더링하고 보여주는 여부만 바뀐다.

만약 보여주어야 하는 양이 방대하고 크기가 클 경우에

v-if는 보여줄 때마다 렌더링을 해야하지만,

v-show를 이용하면 한 번만 렌더링하기 때문에 유리하다.

'Web > Vue' 카테고리의 다른 글

[Vue] 메서드 (0)	2022.06.24
[Vue] 조건부 리스트 렌더링 (0)	2022.06.24
[Vue] 리스트 렌더링 (0)	2022.06.23
[Vue] 조건부 렌더링 (0)	2022.06.23
[Vue] 클래스 바인딩 (0)	2022.06.23

<template>
  <div>
    <h1>Hello Vue!</h1>
    <h2 class="line-through">line-through</h2>
    <h2 v-bind:class="textDecroation" class="text-red">line-through</h2>
    <h2 :class="isDone === true ? 'line-through' : 'highlight'">
      line-through
    </h2>

    <h2
      :class="{
        highlight: isDone === false,
        'text-red': username === 'scalper',
      }"
    >
      Object형태의 동적 클래스
    </h2>

    <h2
      :class="[
        isDone === true ? 'line-through' : 'highlight',
        username === 'scalper' ? 'text-red' : 'text-green',
      ]"
    >
      Array 형태의 동적 클래스 부여
    </h2>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scaalper",
      isDone: true,
      textDecroation: "line-through",
    };
  },
};
</script>

<style>
.text-red {
  color: red;
}

.text-green {
  color: green;
}

.highlight {
  font-weight: bold;
  background: pink;
}

.line-through {
  text-decoration: line-through;
}
</style>

'Web > Vue' 카테고리의 다른 글

[Vue] 메서드 (0)	2022.06.24
[Vue] 조건부 리스트 렌더링 (0)	2022.06.24
[Vue] 리스트 렌더링 (0)	2022.06.23
[Vue] 조건부 렌더링 (0)	2022.06.23
[Vue] v-if v-show 차이 (0)	2022.06.23

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

딩코딩 : Computer Science 블로그

Vue

[Vue] teleport

'Web > Vue' 카테고리의 다른 글

[Vue] Watch

'Web > Vue' 카테고리의 다른 글

[Vue] Directives

'Web > Vue' 카테고리의 다른 글

[Vue] 폼 핸들링

'Web > Vue' 카테고리의 다른 글

[Vue] 리스트 렌더링

'Web > Vue' 카테고리의 다른 글

[Vue] 조건부 렌더링

'Web > Vue' 카테고리의 다른 글

[Vue] v-if v-show 차이

'Web > Vue' 카테고리의 다른 글

[Vue] 클래스 바인딩

'Web > Vue' 카테고리의 다른 글

+ Recent posts

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역