딩코딩 : Computer Science 블로그

<template>
  <div>
    <h1>Computed</h1>
    <h2>{{ address }}</h2>
    <h2>내가 받은 점수의 합 {{ totalScore }}</h2>
    <h2>method : {{ getTotalScore() }}</h2>
    영어점수<input type="number" v-model="grade.eng" /> 학생이름<input
      type="text"
      v-model="studentName"
    />
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      username: "scalper",
      address1: "성남시",
      address2: "분당구",
      address3: "정자로",
      grade: {
        math: 70,
        kor: 90,
        eng: 50,
        sci: 55,
      },
      studentName: "",
    };
  },
  computed: {
    //computed는 cache가 된다 !!
    address() {
      return `${this.address1} - ${this.address2} - ${this.address3}`;
    },
    totalScore() {
      console.log("computed!!");
      // destructuring
      const { math, kor, eng, sci } = this.grade;
      return math + kor + eng + sci;
    },
  },
  methods: {
    //메서드는 화면에 변동이 있을 때마다 계산을 한다!
    getTotalScore() {
      console.log("methods!!");
      const { math, kor, eng, sci } = this.grade;
      return math + kor + eng + sci;
    },
  },
};
</script>

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

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

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

Computed는 간략한 계산

값 캐시효과

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

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