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などの高度なプロパティを使用して他の論理を実行できます.(双方向)
    =inputselect、および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>