Vue學習(2)—v-指令和組件

• 2020 年 4 月 11 日
• 筆記

Vue中的指令

Vue中以帶有前綴V-的屬性被稱為指令(帶有v表示他們是Vue提供的特殊attribute)
一個v-bind的例子

	<div id="app" v-bind:title="message">  		texttexttext  	</div>    	<script type="text/javascript">  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!'  			}  		})  

這其中 v-bind表明將div元素的title屬性與message保持一致

v-if v-for

v-if 可以控制一個元素是否顯示(當然 v-show也可以 看名字就可以看出)

	<div id="app" v-if="seen" v-on:click="handleOnClick">  		{{message}}  	</div>    	<script type="text/javascript">  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!',  				seen:true  			},  			methods:{  				handleOnClick:function(){  					this.seen=!this.seen;  				}  			}  		})  

這裡用到了Vue中的v-if來控制元素的顯示 v-on進行時間綁定 還有Vue中的methods屬性
改變seen的值 即可改變元素的顯示(與v-show的區別之後會寫)

v-for 用來遍歷一個數組來循環渲染項目

	<div id="app">  		<ul>  			<li v-for="item in lists">{{item}}</li>  		</ul>  	</div>    	<script type="text/javascript">  		var app=new Vue({  			el:'#app',  			data:{  				lists:['學編程死路一條','我嬲你媽媽憋類','妙啊~~~']  			},  		})  	</script>  

當我們改變lists的內容時 ul標籤中內容也會發生改變

v-on 事件綁定

	<div id="app">  		{{message}}  	<button v-on:click="handleOnClick">helloworld</button>  	</div>    	<script type="text/javascript">  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!',  				seen:true  			},  			methods:{  				handleOnClick:function(){  					alert("helloworld");  				}  			}  		})  	</script>  

通過v-on可以綁定各種事件

v-model 雙向綁定

v-model 可以實現輸入框和數據的雙向綁定(一個改變,另一個也發生改變)

	<div id="app">  	<input v-model="message"></input>  	<button v-on:click="handleOnClick">giaogiaogiao</button>  	</div>  	<script type="text/javascript">  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!',  				seen:true  			},  			methods:{  				handleOnClick:function(){  					this.message="giaogiaogiao"  				}  			}  		})  	</script>  

點擊改變message的值後 input框中的數據也發生了改變

組件化的思想

Vue中很重要的一個思想就是組件化
試著想想 一個網頁 可以拆成各個組件 比如 頂部 底部 側邊欄 內容主題
創建組件和使用的方式非常簡單

	<div id="app">  		{{message}}  	<new-component></new-component>  	</div>    	<script type="text/javascript">  		Vue.component('newComponent',{  			template:'<div>一個組件</div>'  		})  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!'  			}  		})  	</script>  

需要注意的是 Vue中 我們聲明組件的方式是駝峰命名 但是html不區分大小寫 所以寫成標籤時要用-來區別

父子組件傳值

現在我們已經可以將頁面劃分成各個組件了
但是子組件(myComponent)是無法使用父組件(app)的值 因此 我們需要一種方式將值傳入子組件
v-bind

	<div id="app">  		{{message}}  	<new-component v-bind:value="text"></new-component>  	</div>    	<script type="text/javascript">  		Vue.component('newComponent',{  			props:['value'],  			template:'<div>{{value}}</div>'  		})  		var app=new Vue({  			el:'#app',  			data:{  				message:'helloworld!',  				text:"Father-value"  			}  		})  	</script>  

當我們使用v-bind 傳值時候 需要再子組件中添加 props屬性去接收這個值

官方文檔:我們也需要為每個組件提供一個「key」，稍後再作詳細解釋