Vue.js-v-指令詳細、componentコンポーネント

9266 ワード

実際、2016年から現在に至るまで、Vueの発展は徐々に主体を占めており、その「vue」はフランス語名、実際の中国語名は「view」であり、主に「MVVM」に基づいて設計・開発されている.
M-Modelモデル、データ保存用
V-Viewビュー、ユーザーインタフェース設定用
VM:双方向バインディングを実現するためのViewModelビューモデル
すなわちviewの変化は,自動的にview Modelに反映され,逆も同様である.
1、テキスト
(1)データ補間{{message}}


    {{ message }}

(2)html v-html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html html htmlコード出力用


    

    

new Vue({
  el: '#app',<span>			</span>//el        ， id “app”   
  data: {
    message: '<h1>    </h1>'
  }
})

注意，若设置html属性中的值应使用v-bind指令。


        




    directiva v-bind:class




     new Vue({
       el:'#app',
       data:{
            class1:true
      }
});

(3)指令
命令については、式の値が変更されたときにDOMにいくつかの動作を適用するように設定するために、プレフィックスとして「v-」を使用することが多い.


           



  new Vue({
      el:'#app',
      data:{
         seeb:true
     }
});

上記のコードでは、v-if命令は、式seenの値trueまたはfalseをp要素を挿入するか否かを判断する.
v-showはv-ifと同様の効果を実現できるため、以下の例で示す.

      
		
			
				You must enter a message to submit
			
			
						
			<button v-show="message">send message</button>
		</form>
		
		<pre><code>{{ $data|json }}</code></pre>
	</div>
		
	<script type="text/javascript" src="js/vue.min.js"/>
	<script>
		new Vue({
			el:'#app',
			data:{
				message:''
			}
		});
	</script></code></pre> 
  <br/> 
  <span/> 
  <span style="font-family:'KaiTi_GB2312';font-size:18px;">         console ，  F12     ，   ，</span> 
   
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;">        （1）  “v-show”  ，    “textarea”       ，     div   “<div style="display:none">”，       div    。 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/>（2）   “v-if”  ，    “div style="display:none">”     。</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><br/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;">2、    event</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/>  ：“</span><span style="font-family:'KaiTi_GB2312';font-size:18px;">v-on:</span><span style="font-family:'KaiTi_GB2312';font-size:18px;">”   “@”</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"/></p> 
  <pre><code>

	
		<meta charset="UTF-8"/>
		<title>    event</title>
	
	<style>
	    ....		
	</style>
	
		<div id="app">
			<button type="button">Submit {{ count }} </button>
		</div>
		
		<script type="text/javascript" src="js/vue.min.js"/>
		<script>
			new Vue({
				el:'#app',       //      ；
				data:{           //    ；
					count:0
				},
				methods:{         //     ；
					updateCount:function(){
						this.count ++;
					}
				}
			});
		</script>
	

</code></pre> 
  <br/> 
  <span/> 
  <span style="font-family:'KaiTi_GB2312';font-size:18px;">       ，    “submit0”，        ，submit0  ++，</span> 
   
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/>     ，  “@”   “v-on:”，     ，   event   “onClick()”，     “v-on:”，      “@Click”。</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><br/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;">3、   component</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/>  template  ，        ，</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><counter/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><script/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/>Vue.component('compoonent',template:{'<h1>Hello world!</h1>'});</span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"/></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><br/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;">   “<counter/></span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;">   <span/><h1>Hello world！</h1></span></span><span style="font-size:18px;font-family:'KaiTi_GB2312';"/></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;">        ”</span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;">        component ，             。</span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;"><br/></span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;">  ：    Links or    Dislikes</span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;"><span/></span></span></p> 
  <pre><code>

	
		<meta charset="UTF-8"/>
		<title>Vuejs</title>	
	
	
		<div id="app">
			<!---       counter-->
			<counter heading="Likes" color="green"/>
			<counter heading="Dislikes" color="red"/>
		</div>
		
		<template id="counter-template">
			<!--heading  (props)    counter       -->
			<h1>{{ heading }}</h1>
			<button type="button">{{ count }}</button>
		</template>
		
		<script type="text/javascript" src="js/vue.min.js"/>
	
		<script>
			Vue.component('counter',{
				template:'#counter-template',
				//  heading
				props:['heading','color'],
				/*    */
				/*
				data:{
					：count:0
				}
				*/
				data:function(){
					return{count:0};
				}
			});
			
			new Vue({
				el:'#app'
			})
		</script>
	

</code></pre> 
  <span/> 
  <span style="font-family:'KaiTi_GB2312';font-size:18px;">          ，         ，  ？？？？</span> 
   
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;"><br/></span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';"><span style="font-size:18px;"><br/></span></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/></span></p> 
  <p><span style="font-family:'KaiTi_GB2312';font-size:18px;"><span/></span></p> 
 </div> 
</span></p></div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                     
                    <script type="text/javascript" src="/views/front/js/chanyan.js"/>
                    <!--    -         -->

Vue学習小札——3.0 css遷移/アニメーション

【基本】AWS CLIで複数のプロファイル（認証情報）を使い分ける