Vue.기초

데이터 바인딩

데이터와 드로잉이 동기화되는 메커니즘

v:bind 정보

· 데이터 옵션에 지정된 데이터에 데이터 귀속을 합니다.

        <p id='app'>
      <input type=“text” v-bind = “message”>
        </p>

 <script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する*
            data: {
                toggle: true
                  message: "Hello Vue.js!" 
            }
        });
    </script>

문서 레지스트리에 항목 추가

v-if 정보

요소 표시/숨기기

 <div id=“app”>
        <p v-if=“toggle”>
            dousita
        </p>
    </div>

 <script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する*
            data: {
                toggle: true
            }
        });
    </script>

만약toggle이false라면dousita를 표시하지 않습니다
만약 toggle이 사실이라면dousita를 표시합니다.

v-if와 v-show의 차이

v-if:false에서 요소가 DOM 수준에서 삭제됨
v-show에서 검증 도구로 보면

<div id="app"><p style="display: none;">
            dousita
             </p>
</div>

display:none 형식으로는 DOM에서 요소가 제거되지 않습니다.
CSS의 표시 속성을 사용하여 표시/숨기기 전환

v-for 정보

・ v-for 명령을 사용하여 객체를 반복하는 방법

  <div id=“app”>
        <ol>
            <li v-for=“color in colors”>{{ color }}</li>
        </ol>
    </div>

<li v-for=“color in colors”>{{ color }}</li>

색상은 임의의 값일 수 있지만 단수형으로 설정하면 코드의 가독성이 높아집니다.colors 부분에서 표시할 그룹을 지정합니다.

<script>

        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する
            data: {
                colors: ['red','green','blue']
          }
        });

</script>

어셈블리 정보

이름이 지정된 재사용 가능한 Vue 인스턴스입니다

UI 부품

반복 사용

<div id=“app”>
        <hello-component></hello-component>
    </div>

    <script>
        Vue.component('hello-component',{
           template: '<p>Hello</p>'
        })
        const app = new Vue({
            el: '#app',//htmlのappの中でvue.jsを適用する
            data: {
                message: 'Hello!!!'
’           }

        });
    </script>

사용자 정의 모양새를 정의합니다.

<script>
Vue.component('コンポーネントの名前',{
           template: 'htmlに表示させたい内容'
        })
</script>