Vue常用标签

使用Vue需要导入vuejs-2.5.16.js

<script src="js/vuejs-2.5.16.js"></script>
  1. Vue的插值表达式{{ }}
  <div id="app">
  <!--vue插值表达式,data中定义是数据显示到此处-->
			{{massage}} 
<!--			三目运算符-->
			{{false? "ok" : "no"}}
<!--			数学运算-->
			{{number*3.14}}
<!--			插值表达式不支持!!!-->
		<!--	{{var a=1;}}
			{{if(a=10){}}}-->
		</div>
<script>
		//view model
		new Vue({
			el:"#app",//由vue接管app区域
			data:{
				massage:"hello vue", //注意!!!不加分号
				number:100
			}
		});
	</script>
  1. v-on:click点击事件
<div id="app">
			{{message}}
<!--			v-on可以使用@替代-->
			<button v-on:click="fun1('haha')">vue的onclick</button>
			<button @click="fun1('haha')">haha</button>
		</div>
new Vue({
	el:"#app",
	data:{
		message:"hello vue"
	},
	methods:{
		fun1:function (msg) {
			alert("hello");
			this.message=msg;
		}
	}
});
  1. v-on:keydown键盘监听事件
<div id="app">
			Vue:<input type="text" v-on:keydown="fun($event)">
		</div>
new Vue({
			el:"#app",
			data:{

			},
			methods:{
				fun:function (event) {
					var keyCode = event.keyCode;
					alert(keyCode);
					if (!(keyCode>=48&&keyCode<=59)){
						// event.preventDefault();//阻止默认行为
						event.stopPropagation();//阻止冒泡
					}
				}
			}
		})
  1. v-on:mouseover鼠标悬浮事件
<!--	@事件名称 就是 v-on:事件名称的简写方式-->
		<div id="app">
			<div @mouseover="fun1" id="div">
				<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert("鼠标移动到了div上");
				},
				fun2:function (event) {
					alert("鼠标移动到了文件域上");
					event.stopPropagation(); //阻止冒泡
				}
			}
		})
  1. v-on:事件修饰符
<div id="app">
<!--			prevent:阻止事件的默认行为  stop:阻止事件的传播行为-->
			<form method="post" @submit.prevent action="demo1.html">
				<input type="submit" value="点击无效"/>
			</form>
			<div @click="fun">
				<a @click.stop href="demo1.html">点击有效</a>
			</div>
<!--		<form method="post" action="demo1.html" onsubmit="checkForm()">
				<input type="submit" value="提交"/>
			</form>-->
		</div>
new Vue({
			el:"#app",
			methods:{
				fun:function(){
					alert("haha");
				}
			}
		});
  1. v-on:按键修饰符
<div id="app">
<!--			@keydown.按键 监听键盘事件是按键修饰符
				@keydown.enter是监听enter键的修饰符-->
			<input type="text" @keydown.enter="fun">
		</div>
new Vue({
	el:"#app",
	methods:{
		fun:function () {
			alert("haha");
		}
	}
})
  1. v-text与v-html
<div id="app">
<!--			显示为text文本-->
			<div v-text="message"></div>
<!--			自动识别html标签显示内容-->
			<div v-html="message"></div>
		</div>
new Vue({
			el:"#app",
			data:{
				message:"

haha

"
} })
  1. v-model数据的双向绑定
<div id="app">
			<form>
<!--			v-model数据的双向绑定:只适用于表单标签-->
				<input type="text" v-model:value="user.username">
				<input type="text" v-model:value="user.password">
				<input type="button" value="提交" @click="fun">
			</form>
		</div>
new Vue({
			el:"#app",
			data:{
				user:{
					username:"haha",
					password:"123"
				}
			},
			methods:{
				fun:function(){
					this.user.username="xixi";
					this.user.password="1245";
				}
			}
		})
  1. v-bind单向数据绑定
<div id="app">
<!--			v-bind:可以简写为:
				v-bind是单向绑定:只是第一次读取的时候再vue里面取值-->
			<font v-bind:color="rs1">hello</font>
			<font :color="rs2">vue</font>
		</div>
new Vue({
			el:"#app",
			data:{
				rs1:"red",
				rs2:"blue",
				id:1
			}
		});
  1. v-for遍历数组
<div id="app">
			<ul>
				<li v-for="(value,index) in arr">{{index}} and {{value}}</li>
			</ul>
		</div>
new Vue({
			el:"#app",
			data:{
				arr:["a","b","c","d"]
			}
		})
  1. v-for遍历对象
<div id="app">
			<ul>
				<li v-for="(value,key) in user">{{value}} and {{key}}</li>
			</ul>
		</div>
new Vue({
			el:"#app",
			data:{
				user:{id:1,username:"haha",age:12}
			}
		});
  1. v-for遍历多个对象
<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(p,index) in products">
					<td>{{index+1}}</td>
					<td>{{p.id}}</td>
					<td>{{p.name}}</td>
					<td>{{p.price}}</td>
				</tr>
			</table>
		</div>
new Vue({
			el:"#app",
			data:{
				products:[
					{id:1,name:"电视机",price:2000},
					{id:2,name:"洗衣机",price:2000}
				]
			}
		})
  1. v-if与v-show
<div id="app">
<!--			v-if:如果是false的话就是不进行渲染,内存更大
				v-show:如果是false的话就是设置display:none,相当于有意见渲染了元素,但是进制样式没有显示而已

-->
			<span v-if="flag">haha</span>
			<span v-show="flag">xixi</span>
			<button @click="fun">按钮</button>
		</div>
new Vue({
			el:"#app",
			data:{
				flag:"ture"
			},
			methods:{
				fun:function () {
					this.flag=!this.flag;
				}
			}
		})

你可能感兴趣的:(Vue)