Portfolio


<div id="app">
  <button @click="toggle">toggle</button>
  <h1 :class="isActive? 'active' : ''" class="title">{{msg}}</h1>
</div>

기본 사용법


<div id="app">
	<button @click="toggle">toggle</button>
	<h1 :class="{ active, 'title__small color__pink': small }" class="title">{{msg}}</h1>
</div>
	
<script>
	const App = {
	  data() {
	    return {
	      msg: "hello vue",
	      active: false,
	      small: false,
	    };
	  },
	  methods: {
	    toggle() {
	      this.active = !this.active;
	      this.small = !this.small;
	    },
	  },
	};
	const vm = Vue.createApp(App).mount("#app");
</script>


<div id="app">
  <button @click="toggle">toggle</button>
  <h1 :class="classObject" class="title">{{msg}}</h1>
</div>

<script>
  const App = {
    data() {
      return {
        msg: "hello vue",
        active: false,
        small: false,
      };
    },
    computed: {
      classObject() {
        return {
          active: this.active,
          small: this.small,
        };
      },
    },
    methods: {
      toggle() {
        this.active = !this.active;
        this.small = !this.small;
      },
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>


<div id="app">
  <h1 :class="[active, title]" class="title" @click="changTitle">
    Hello Vue
  </h1>
</div>


<div id="app">
  <h1 v-if="isShow">Hello Vue</h1>
  <template v-else-if="true">
    <h2>Apple</h2>
    <h2>okay</h2>
    <span>doky</span>
  </template>
  <h2 v-else>Good item</h2>
</div>

<script>
  const App = {
    data() {
      return {
        isShow: true,
      };
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>


<style>
  [v-cloak] {
    display: none;
  }
</style>
<div id="app">
  <h1 v-show="isShow" v-cloak>{{ msg }}</h1>
</div>


<div id="app">
  <form @submit="addNewTodo">
    <label for="new-todo">Add a todo</label>
    <input
      type="text"
      id="new-todo"
      placeholder="feed the cat"
      v-model="newTodoText"
    />
    <button>Add</button>
  </form>
  <ul>
    <todo-item
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @remove="removeTodo"
    />
  </ul>
</div>

<script>
  const TodoItem = {
    //emit으로 커스텀 이벤트를 만들 수 있음.
    template: `        
    <li>
      {{ todo.title }}
      <button @click="$emit('remove', todo.id)">Remove</button>
    </li>`,
    //활용할 데이터를 선언
    props: ["todo"],
  };
  const App = {
    components: {
      TodoItem,
    },
    data() {
      return {
        newTodoText: "",
        todos: [],
      };
    },
    methods: {
      addNewTodo(event) {
        event.preventDefault();
        this.todos.push({
          id: Date.now(),
          title: this.newTodoText,
        });
        this.newTodoText = "";
      },
      removeTodo(todoId) {
        this.todos = this.todos.filter((todo) => {
          return todo.id !== todoId;
        });
      },
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>

(간단한 Todo 만들기) TodoItem이란 컴포넌트 만듦.


<div id="app">
  <h1 @click="say('hi', $event)">{{msg}}</h1>
</div>

<script>
  const App = {
    data() {
      return {
        msg: "Vue",
      };
    },
    methods: {
      say(message, event) {
        console.log(message, event);
      },
    },
  };
  const vm = Vue.createApp(App).mount("#app");
</script>


<!-- 클릭 이벤트 전파가 중단되었습니다. -->
<a @click.stop="doThis"></a>

<!-- 제출 이벤트가 페이지를 다시 로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>

<!-- 수정자는 체이닝이 가능합니다. -->
<a @click.stop.prevent="doThat"></a>

<!-- 단순히 수식어만 사용이 가능합니다. -->
<form @submit.prevent></form>

<!-- 캡처 모드를 사용할 때 이벤트 리스너를 사용 가능합니다.-->
<!--즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리합니다. -->
<div @click.capture="doThis">...</div>

<!-- event.target이 엘리먼트 자체인 경우에만 트리거를 처리합니다.-->
<!-- 자식 엘리먼트에서는 처리되지 않습니다.-->
<div @click.self="doThat">...</div>