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”，稍后再作详细解释