기본 템플릿

<template>
  <div></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {

  }
}
</script>

<style scoped>

</style>

설정에 vue.json에 가면 커스터마이징으로 축약 설정 가능(리액트의 rfce나 console.log를 log로 줄이는 것과 비슷)

style에 scoped를 넣어줘야 해당 파일에서만 적용. 넣지 않으면 글로벌 적용

v-html="html"

DataBindingHtmlView.vue

<template>
  {/* html 태그까지 다 출력 */}
  <div>{{htmlString}}</div>
  {/* v-html로 html 인식 */}
  <div v-html="htmlString"></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      htmlString: '<p style="color: red;">빨간색 문자</p>'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {

  }
}
</script>

<style>

</style>

• div의 children으로 넣으면 태그까지 모두 출력
• 프로퍼티에 v-html=" "를 이용하면 innerHTML처럼 작동

router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/databinding/string',
    name: 'DataBindingStringView',
    component: () => import(/* webpackChunkName: "databiding", webpackPrefetch: true */ '../views/1_databinding/DataBindingStringView.vue')
  },
  {
    path: '/databinding/html',
    name: 'DataBindingHtmlView',
    // webpackChunkName은 비슷한 것들끼리 같이 묶어두면 좋음
    // string 바인딩 들어가는 순간 html 것도 내려받음
    component: () => import(/* webpackChunkName: "databiding", webpackPrefetch: true */ '../views/1_databinding/DataBindingHtmlView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

• webpackChunkName을 비슷한 것끼리 묶어두면 효율적
• string 바인딩 되는 페이지 들어가는 순간 databinding 파일에 string과 html 같이 내려받음(html 들어갔을 때 시간 줄어듬)

• 결과