vue.jsビューアドバイザ

🌱 ビューアドバイザ(Directive)

htmlタグにv接頭辞を持つすべての属性を表す.

しゅめいれいセット

v-if:(条件文)指定したビューデータ値の真または偽に基づいて画面に表示されます.
(偽りの時は見えない=ラベルそのものが見えない.)
v-for:(繰り返し文)指定したビューデータの数に応じてhtmlタグを繰り返し出力します.v-if、els-if、elseなどと一緒に使用できません.使うなら親につり革をつける.
v-show:v-ifと同様に、データの真実性に応じてhtmlタグを表示または表示しません.
(css効果でのみ表示:none;画面では表示されませんが、タグは保持されます)
v-bind:ビューインスタンスのデータ属性をHTML要素に関連付ける(一方向)
v-on:HTML要素のイベントをビューインスタンスの論理に関連付ける
(関数接続時のみex@clickを使用)
v-model:v-bindとv-onの組み合わせ.フォームでよく使用されるプロパティ.フォームに入力した値を、ビューインスタンスのデータとすぐに同期します.入力した値をサーバに保存して送信するか、watchなどの高度なプロパティを使用して他の論理を実行できます.(双方向)
=input、select、およびtextareaタグでのみ使用可能
v-bind:aaa = :aaa
v-on:click = @click
👉 v-bindは、上の2つのv-onのみを,@と略すことができます.残ったのはNoNoNo!!

ex) 

...
   <div id='test'>
        <template v-if='number===1'>
    	   <div>1</div>
    	   <div>2</div>
    	   <div>3</div>
        </template>
        <div v-else-if='number===2'>hellow</div>
        <div v-else>no!!!</div>
        <button @click='increaseNumber'>버튼</button>
   <br/>
   	<a v-if='flag'> 할 수 있다 !! </a>
        <ul>
             <li v-for='person in people'> {{ person }} </li>
        </ul>
        <h5 v-bind:id='uid'>뷰 입문서</h5>
        <button @click='onClickBtn'>경고창 버튼</button>
   </div>
...
   <script>
   	new Vue({
           el: '#test',
           data : {
           	flag: true,
           	people: ['호두', '자두', '찐빵', '웬즈', '뚱이'],
            	uid: 10,
                methods: {
                    onClickBtn : function(){
                    	return alert('경고!!경고입니다!!')
                    }
                }
           }
        });
   </script>