Vue学习---v-指令和组件

Posted 2021-03-01 57one

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