javascript-component-framework-vuejs-fundamentals

anonymous·2022년 10월 16일

Object Proxy - Reactive API

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0
counter.count++

Primitive Value Proxy - Ref API

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"
message.value = 'Changed'

Combined Example

<script setup>
import { ref, reactive } from 'vue'
// component logic
// declare some reactive state here.
const message = ref('Hello World!');
message.value="LEVEL";
  
const counter = reactive({
  count: 5
});
</script>

<template>
  <h1>{{ message.split('').reverse().join('') }} {{ counter.count }}</h1>
  <h2></h2>
</template>

Attribute bindngs : v-bind

Syntax

// VERSION 1
<div v-bind:id="dynamicId"></div>

// VERSION 2
<div :id="dynamicId"></div>

Example

<script setup>
  
import { ref } from 'vue'
const titleClass = ref('title')
  
</script>

<template>
  <h1 :class="titleClass">빨강색으로 클래스 적용</h1> <!-- add dynamic class binding here -->
</template>

<style>
.title {
  color: red;
}
</style>

Event Listener : v-on

Syntax

// VERSION 1
<button v-on:click="increment">{{ count }}</button>

// VERSION 2
<button @click="increment">{{ count }}</button>

Example

<script setup>
import { ref } from 'vue'

const count = ref(0);
function increment(){
  count.value++;
};
</script>

<template>
  <!-- make this button work -->
  <button @click="increment">count is: {{ count }}</button>
</template>

Form Bindings : v-model

Example with v-bind & v-on

<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

Example with simplified v-model

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>
<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

Conditional Rendering : v-if

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
function toggle() {
  awesome.value = !awesome.value
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>