Vue/Vue 2023

Vue 003 데이터 바인딩 001

salalsksjwnn 2023. 1. 30. 15:20
728x90

재활용이 뛰어난 뷰 컴포넌트는 viues 폴더와 components 폴더에 주로 만들게 된다.

일단은 단방향 데이터 바인딩

 

  • views 폴더에 넣을 vue 파일은 끝에 View로 이름을 맞춘다.

컴포넌트 만들기

  • 빈 공간에 입력
template

//html

script

//javascript vue

style

//css-scoped

  • 데이터 함수와 데이터를 추가해 준다.
<template>
  
</template>
<script>
export default {
  data(){
    return{
      userName:"Sloth"
    }
  }
}
</script>
  • vue에서는 데이터 함수를 만들때 function 키워드를 사용하지 않아도 된다.
  • html 태그는 template 태그 안에 들어가면 된다.
  • javascript 태그는 script태그 안에 들어가면 된다.
  • css 는 style scoped 안에 들어가면 되는데 현재 함께 보이는 화면에만 적용이 된다.
    다른 컴포넌트로 가면 적용이 안된다!
    • 다른 컴포넌트에도 적용시키고 싶다면 scoped 없이 css 적용을 하면되는데
      주로 이렇게 하지 않고 따로 assets에 style을 정리해준다.
  • vue는 html,js,css들어가는 부분을 완벽하게 분리해서 사용할 수 있다. - 대규모 서비스에 협업이 편하다.
  • template태그 안에서태그들은 하나의 루트 태그안에 존재해야 한다.(뷰3에서는 에러가 안나는데 빨간불 신경쓰인다.)
    컴포넌트를 재사용 하려면 뷰2에도 들어가야 할 때도 있지 않을까? 그냥 감싸주자.

귀찮으니까 스니펫 만들기

File>Preference>config User Snippets 메뉴

검색창에 vue 입력, vue.json선택

등록 안된 상태

아래 코드 입력

"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>\n<style scoped>\n\n</style>" ],
    "description": "펻 기본 스니펫"
}

 

문자열 바인딩

  • js 함수 혹은 html태그에서 사용하려는 데이터가 있으면 그 모든 데이터는 data(){}함수 안에 정의 되어 있어야 한다
  • 문자열 데이터 바인딩을 할 때는 중괄호 두개를 사용해서 데이터를 사용한다.
<template>
  <div>
  	<!-- data함수 안에서 message키와 userName키를 사용해 데이터 가져오기 -->
    <h1> {{message}} {{userName}} How are you?</h1> 
    <p></p>
  </div>
</template>
<script>
export default {
  data(){
    return{
      userName:"Sloth",
      message:"Hi!",
...

라우터 등록(router/index.js)

  {
    path: '/databinding/string',
    name: 'DataBindingStringView',
    component: () =>  import(/* webpackChunkName: "databinding" , webpackPrefetch:true */ '../views/1_databinding/DataBindingStringView.vue') 
  }

맞게 한거 같은데 아무것도 출력이 되지 않는다 뭐가 문제일까?

vue-router.mjs:62 [Vue Router warn]: uncaught error during route navigation:
warn @ vue-router.mjs:62
triggerError @ vue-router.mjs:3237
eval @ vue-router.mjs:2993
Promise.catch (async)
pushWithRedirect @ vue-router.mjs:2988
push @ vue-router.mjs:2919
navigate @ vue-router.mjs:2036
callWithErrorHandling @ runtime-core.esm-bundler.js:276
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:284
invoker @ runtime-dom.esm-bundler.js:472
vue-router.mjs:3239 TypeError: Cannot use 'in' operator to search for 'catch' in undefined
    at extractComponentsGuards (vue-router.mjs:1950:32)
    at eval (vue-router.mjs:3092:16)

아니 왜 이런 바보짓을 했는지 모르겠는데 component import 하는데 중괄호로 감싸줬었다. 왜 그랬지? 해제해 주니까 잘된다.

/*잘못된 예
  
{
    path: '/databinding/string',
    name: 'DataBindingStringView',
    component: () =>  {import(/* webpackChunkName: "databinding" , webpackPrefetch:true */ '../views/1_databinding/DataBindingStringView.vue') }
}
*/
  

/* 잘된 예*/
{
    path: '/databinding/string',
    name: 'DataBindingStringView',
    component: () =>  import(/* webpackChunkName: "databinding" , webpackPrefetch:true */ '../views/1_databinding/DataBindingStringView.vue') 
}

그래 수정하니까 잘 나온다

데이터 바인딩이 왜 중요한가?

vue를 이용하지 않고 바닐라js를 사용해서 서버로 부터 가져온 데이터(가정)를 화면에 넣어 주려면 

태그에 id를 주고 Dom 다루는 js를 많~~~~이 짜야하는데 vue에서는 중괄호 두개로 컨트롤 할 수 있다.

 

html바인딩

스니펫 써서 편하게 불러오자

<template>
  <div></div>
</template>
<script>
export default {
  components: {}, 
  data() {
    return {
      sampleData: '*'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods:{}
}
</script>
<style scoped>

</style>
  • 이런식으로 하면 되나?

이건 string으로 들어가는건데  되나? 라우터 등록해서 확인해보자

//index.js
{
path: '/databinding/html',
name: 'DataBindingHtmlView',
component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingHtmlView.vue')
}
//App.vue
<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/databinding/string">String</router-link> |
      <router-link to="/databinding/html">HTML</router-link>
    </nav>
    .
    .
    .

으악새!!

메뉴는 잘 나왔는데 태그는 그대로 String으로 나온다. 

그렇다 html태그는 중괄호 두개로 넣어주면 안된다.

Vue에는 v-directive가 있다. html을 위해서는 v-html="키값"을 사용하면 된다.

<template>
  <div>
      <div>{{htmlString}}</div>
      <div v-html="htmlString"></div>
  </div>
</template>

결과

v-directive 이게 vue가 쉽다고 느끼게 만드는게 아닌가 싶다. vue에서는 v-를 붙여주면 되니까

 

 

 

 

 

webpackChunkName을 같게 해주면 둘중에 먼저 아무거나 하나 접근하면 한번에 다운받아진다. 라우터 설계는 중요하답니다.

여기까지 서버에서 가져온 데이터(가정)을 화면에 뿌리는 단방향데이터 바인딩이었다.

양방향 데이터 바인딩은 사용자가 서버로, 서버에서 사용자로 상호작용할 수 있게 하는 것. 내일 합니다!

 

 

 

 

 

 

 

 

 

 

 

 

학원다닐때 강사님께 질문한게 있었다. vue나 react를 사용하면 더 쉽게 페이지를 만들 수 있고 팀플레이 하기 좋나요?

강사님의 대답은 아니오였다.

현재까지 배운 상황에서 내 대답은 강사님은 틀렸다는거다. vue나 react를 사용하는 이유가 있다.

728x90
저작자표시 (새창열림)