독학코딩/Vue.js

Vue.js 데이터바인딩①

무지짱 2023. 1. 20. 10:38
반응형

- component 폴더에 만드는 파일은 재사용 가능한 형식으로 만들기

- views폴더에 만드는 파일은 화면 전체 하나하나에 해당하는 파일

  => 3 버전부터 네이밍 룰이 View가 마지막에 붙음

 

⭐ Html 태그는 <template> 안에

⭐ script는 <script> 안에

⭐ 지금 vue 화면에서만 사용할 css는 <style scoped> 안에

⭐ 공통으로 사용하는 css는 기본적으로 assets 폴더에서 생성하여 사용

⭐ <template>안에 태그들은 <div> 등의 루트 태그로 감싸줘야 함

 

🔥 단방향 데이터 <-> 양방향 데이터

 

string, html 바인딩하기

String 문자열 바인딩

🌈 views 폴더 안에 폴더, 파일 생성 / 입력해 주기

<template>
  <div>
    <h1>Hello {{ userName }}</h1>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userName: 'John Doe',
      message: 'Welcome 뷰제이에수',
      arr: [],
      obj: {}
    }
  }
}
</script>

 

 

- index.js route에 추가해 주기

  {
    path: '/databinding/string',
    name: 'DataBindingStirngView',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" webpackPrefetch: true */ '../views/1_databinding/DataBindingStringView.vue')
  }

그러면,

짜잔~ 에러가 뜨는데 eslint의 오류이다. 왜~와이~

영상에는 처음에 바꾼 설정 반영하려면 서버를 다시 연결해주어야 한다 했지만 나는 뭔가 잘못했다.

 

Newline required at end of file but not found

구글링 해본 결과...

마지막 줄에 엔터 해달라는 거였다..... 🥲

해결‼️‼️‼️

 

⭐ 문자열을 바인딩할 때에는 {} 중괄호

 

 

Html 바인딩

🌈 같은 위치에 파일 만들어주기 DataBindingHtmlView.vue

 

⭐ Html을 바인딩 할때에는 v 디렉티브 사용

  <div v-html="htmlString"></div>

짜자잔 html p태그를 문자열이 아닌 태그로 불러왔다!

 

 

- index.js에 DataBindingHtmlView 추가해 주기

  (아래와 같이 webpackChunkName이 같으면 둘 중에 하나라도 켜지면 둘 다 바인딩됨.)

 

 

 

 

🍪 예외) 메뉴를 만드는 건 App.vue에서 똑같이 만들어주기

 

 

View User Snippets 등록

설정 => Configure User Snippets => vue 이동

중괄호 안에 넣어주기

  "Generate Basic Vue Code": {
    "prefix": "vue-start",
    "body": [
      "<template>\n\t<div></div>\n</template>\n<script>\nexport default {\n\tcomponents: {}, \n\tdata() {\n\t\treturn {\n\t\t\tsampleData: ''\n\t\t}\n\t},\n\tsetup() {},\n\tcreated() {},\n\tmounted() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>"
    ],
    "description": "Generate Basic Vue Code"
  }

 

그리고 DataBindingHtmlView.vue에 돌아가서 prefix에서 지정한 이름인 vue를 입력하면,

가 뜨고, 자동으로 코드 세트가 생성된다!!

 

뷰. 좋아.

 

반응형