[Vue.js] What is Vue?

https://vuejs.org/guide/introduction.html

Introduction | Vue.js

 

 

---

 

 

Vue 를 공부해봐야지 :b

 

 

 



 

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be they simple or complex.

 

뷰는 자바스크림트 기반의 프레임워크로 표준HTML, CSS, JS를 기반으로 구축된다.

 

 

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

주형

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

 

 

Vue 는 

템플릿 구문으로 표준 HTML을 확장하며 : 선언적 렌더링 Declarative Rendering

JavaScript 상태 변경을 자동으로 추적하여 DOM을 효율적으로 업데이트 한다 : Reactivity

 

 

 

• 빌드 단계 없이 완벽한 HTML 개선
• 모든 페이지에 웹 구성 요소 포함
• 단일 페이지 애플리케이션(SPA)
• 풀스택/서버 잭(SSR)
• Jamstack / 정적 사이트 생성기(SSG)
• 데스크탑, 모바일, WebGL 및 터미널까지

 

 

 

 

Single-File Components​

 

SFC 형식으로 이전 예시

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

 

 

API Styles

Options API 및 Composition API 두가지의 다른 스타일로 작성가능

 

 

Options API​

With Options API, we define a component's logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions, which points to the component instance:

vue

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 

 

 

Composition API​

With Composition API, we define a component's logic using imported API functions. In SFCs, Composition API is typically used with <script setup>. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in <script setup> are directly usable in the template.

Here is the same component, with the exact same template, but using Composition API and <script setup> instead:

vue

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

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

 

 

 

 

문서가 너무 잘 되어있어서 굳이 해석할 필요가 없는.. 해석말고 좀더 실습위주로 작업을 해봐야겠다.