딩코딩 : Computer Science 블로그

<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>

<template>
  <div>
    <h1>Hello Vue {{ name }}!</h1>
    <button v-on:click.middle="changeName">change name</button>
    <!-- <button
      v-on:mouseover="name = 'Code scalper'"
      v-on:mouseleave="name = 'Scalper'"
    >
      change name
    </button> -->
    <a v-on:click.prevent="movePage" href="https://naver.com">naver로 이동</a>
    <h2>{{ number }}</h2>
    <button v-on:click="increment($event, 1)">숫자 1증가</button>
    <button v-on:click="decrement(1)">숫자 1감소</button>
    <button v-on:click="increment(5)">숫자 5증가</button>
    <button v-on:click="decrement(5)">숫자 5감소</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      name: "Scalper",
      number: 0,
    };
  },
  methods: {
    changeName() {
      if (this.name === "Scalper") {
        this.name = "Code scalper";
      } else {
        this.name = "Scalper";
      }
    },
    movePage() {
      const check = confirm("페이지를 이동하시겠습니까?");
      if (check) {
        console.log("page 이동");
      } else {
        console.log("페이지 이동 x");
      }
    },
    increment(e, num) {
      console.log(e);
      this.number += num;
    },
    decrement(num) {
      this.number -= num;
    },
  },
};
</script>

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

<template>
  <div>
    <div>
      <h2>5년뒤 :: {{ add(5) }}</h2>
      <h2>10년뒤 :: {{ add(10) }}</h2>
      <h2>15년뒤 :: {{ add(15) }}</h2>
      <h2>20년뒤 :: {{ add(20) }}</h2>
      <h2>동갑의 10명이 있다면 나이의 총 합은 {{ multiply(age, 20) }}</h2>
      <h2>{{ getTotalScore(1100000000000000000000, 1000) }}</h2>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      age: 30,
    };
  },
  methods: {
    add(num) {
      console.log(this);

      return this.age + num;
    },
    multiply(num1, num2 = 11) {
      return num1 * num2;
    },

    getTotalScore(num1) {
      return this.multiply(num1, num1);
    },
    // 화살표함수 쓰면 this를 통해 data 내부 변수 선택할 수 없음
    // add: (num) => {
    //   console.log(this);
    //   return this.age + num;
    // },
  },
};
</script>

<style></style>

<template>
  <div>
    <div>
      <ul>
        <template v-for="(city, index) in cities" :key="index">
          <li v-if="city.province === '경상도'">{{ city.name }}</li>
        </template>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      cities: [
        { name: "서울", province: "경기도" },
        { name: "대전", province: "충청도" },
        { name: "대구", province: "경상도" },
        { name: "부산", province: "경상도" },
      ],
    };
  },
};
</script>

<style></style>

<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>

<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>

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

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

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

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

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

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

<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>