vue 常用指令学习(v-model,v-on,v-for)

最新推荐文章于 2021-11-29 20:42:47 发布

小美吖吖

最新推荐文章于 2021-11-29 20:42:47 发布

阅读量184

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/KLmxwx569/article/details/106586417

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言
jQuery 一梭子代码就出来了事件驱动
vue 一块json就完事有点像angular 数据驱动
只有ie8以上才能兼容
使用vue 第一步
引入vue

{{msg}}
<script>
new Vue({
	el:'body',
	data:{
		msg:'hello world',
	}
})  //el 输出的作用域，data 输出的数据
</script>
//{{}} 里面放入输出的模板，模板里面放入data里面定义的变量
//el 类似jQuery

常用指令

v-show display true/false true=显示 false=不显示

<input id='btn' type='button' value='显示/隐藏' v-on:click='change'>
<div v-show='dis'></div>
<script>
new Vue({
	el:'body',
	data:{
		dis:true
	},
	methods:{
		change:function(){
			this.dis = !this.dis;
		}
	}
})
</script>

json 键值对左边是键，右边是值

v-for

{{$index}} => 索引值
{{$key}} =>key值

<div v-for='i in arr'>{{i}}{{$index}}</div>
<div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
<div v-for='i in json'>{{$key}}=>{{i}}=>{{$index + 10}}</div>
<script>
new Vue({
	el:'body',
	data:{
		arr:['a','b','c'],
		json:{
			leo:'12',
			lmx:'12',
			wk:'11'
		}
	}
}) //$index下标，$key键，i值
</script>

v-model，双向绑定，数据和输出进行绑定

<input v-model='msg' type='text'>{{msg}}
<script>
	new Vue({
		el:'body',
		data:{
			msg:''
		}
	})
</script>

<input type='' name='' v-model='left'> -
<input type='' name='' v-model='right'>
<script>
	new Vue({
		el:'body',
		data:{
			left:'',
			right:''
		}
})
</script>

事件绑定 v-on:click 或者@click(推荐)
事件对象 $event，默认第一个参数就是我们的事件对象

<body @click='changes(10,$event)'>
<script>
new Vue({
	el:'body',
	methods:{
		changes:function(event,l){
			console.log(event,l);
		}
	}
})
</script>
</body>

阻止事件冒泡
event.cancelBubble = true;
ecent.stopPropagation();

@click.stop;

阻止默认事件
event.preventDefault()
@click.prevent

<body @click="bodyEvent">
		<div @click.stop="divEvent"></div>
		<script type="text/javascript">
			new Vue({
				el:'body',
				methods:{
					bodyEvent:function(){
						alert('我是body');
					},
					divEvent:function(event){
						// event.cancelBubble = true;
						//event.stopPropagation();
						alert("我是div");
					}
				}
			})
			//阻止事件冒泡
			//1.     event.cancelBubble=true
		</script>
	</body>

键盘事件
keydown/keyup

<body @keydown.left.65.66.67.enter="bodyEvent">
		<script type="text/javascript">
			new Vue({
				el:'body',
				methods:{
					bodyEvent:function(){
						console.log(1);
					}
				}
			})
			//阻止事件冒泡
			//1.     event.cancelBubble=true
		</script>
	</body>

keyCode
keydown.66.67.68.left.enter

20190610

小美吖吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 常用指令学习(v-model,v-on,v-for)

前言jQuery 一梭子代码就出来了事件驱动vue 一块json就完事有点像angular 数据驱动只有ie8以上才能兼容使用vue 第一步引入vue{{msg}}<script>new Vue({ el:'body', data:{ msg:'hello world', }}) //el 输出的作用域，data 输出的数据</script>//{{}} 里面放入输出的模板，模板里面放入data里面定义的变量//el 类似jQuery
复制链接

扫一扫