Vue.js基礎 #Vue.js

データバインディング

データと描画を同期する仕組み。

v:bindについて

・dataオプションに指定した、データをデータバインディングする。


        <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>

とすることにより、テキストボックスの中に[Hello]と表示される

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がtrueになっていたら、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>

colorは任意の値でも良いが、単数形にしておくとコードの可読性が上がる。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>

Vue.js基礎