VUE学习 第三次

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

VUE 学习笔记 3

---------------------------------------------------

模板


v-text

v-html


<p v-vloak>{{msg}}</p>
<!--v-vloak 解决浏览器闪烁 还要写css-->

<style>
[v-cloak]{display: none;}
</style>

三个解决浏览器打开闪烁的方法

---------------------------------------------------

事件 事件冒泡

修饰符

.shop 阻止事件冒泡


.prevent 阻止默认事件行为

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>阻止事件事件 默认事件</title>
	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
	<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
	<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
	<script stpe="text/javascript" src="vue/dist/vue.js"></script>
	<script>
	window.onload = function(){
		var demo6  =new Vue({
			el:"#demo6",
			data:{
				msg:"1241058165",
			},
			methods:{
				show1:function(){
					console.log("1");
				},
				show2:function(){
					console.log("2");
				},
				show3:function(e){
					e.stopPropagation();//阻止事件冒泡 js方法
					console.log("3");
				},
				show4(){
					console.log("4"); //html 对应处理了阻止
				},
				open(e){
					console.log("open"); 
					e.preventDefault(); //取消事件的默认动作
				},
				open1(){
					console.log("open1");
				},
				nonce(){
					console.log("nonce");
				}
			}
		})
	}
	</script>
</head>
<body>
	<div >
	<p>{{msg}}</p>
	<div @click="show1()">a1
		<div  @click="show2()">a2
			<button  @click="show3($event)">a3 阻止事件冒泡</button>
			<button  @click.stop="show4()">a4 阻止事件冒泡</button>
		</div>
	</div>
	<!--阻止事件冒泡 a3 原生方法 4v是vue 方法-->
	<a href="http://www.baidu.com" @click.prevent="open1()">VUE 阻止默认事件</a>
	<a href="http://www.baidu.com" @click="open($event)">js阻止默认事件</a>
	<div>
	<button @click.once="nonce()">只执行一次</button>
	</div>
	</div>
</body>
</html>


---------------------------------------------------

键盘事件


<div><input type="text" @keydown="key1()">111</div>

<div><input type="text" @keydown.enter="keyEnter()">111</div>
<div><input type="text" @keydown.left="keyEnter()">111</div>
<div><input type="text" @keydown.space="keyEnter()">111</div>
<div><input type="text" @keydown.a="keyEnter()">111</div>


…………

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>键盘事件</title>
	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
	<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
	<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
	<script stpe="text/javascript" src="vue/dist/vue.js"></script>
	<script>
	window.onload = function(){
		var demo7  =new Vue({
			el:"#demo7",
			data:{
				msg:"1241058165",
			},
			methods:{
				key1:function(){
					console.log("1");
				},
				key2:function(){
					console.log("2");
				},
				key3:function(){
					console.log("3");
				},
				keyEnter(){
					console.log("keyEnter");
				}
			}
		})
	}
	</script>
</head>
<body>
	<div >
	<p>{{msg}}</p>
	<div><input type="text" @keydown="key1()">111</div>
	<div><input type="text" @keydown.enter="keyEnter()">111</div>
	<div><input type="text" @keydown.left="keyEnter()">111</div>
	<div><input type="text" @keydown.space="keyEnter()">111</div>
	<div><input type="text" @keydown.a="keyEnter()">111</div>
	</div>
</body>
</html>

---------------------------------------------------


过滤器


filter

年与日

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>过滤器</title>
	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
	<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
	<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
	<script stpe="text/javascript" src="vue/dist/vue.js"></script>
	<script>
	window.onload = function(){
		Vue.filter('addZero',function(data){//全局过滤器
			return data>10?data:"0"+data;//如果data大于10 就不修改 小于10 则前面加0
		})
		var demo8  =new Vue({
			el:"#demo8",
			data:{
				msg:"1241058165",
				flag:false,
				list:[
				{name:"a1",type:"1"},
				{name:"a2",type:"2"},
				{name:"a2",type:"3"},
				],
				currentTime:Date.now(),//取时间蹉
			},
			methods:{//方法
				click1:function(){
					console.log("1");
					this.flag = !this.flag;
				}
			},
			filters:{//过滤器
				number:function(data,n){
					return data.toFixed(n);//保留两位小数
				},
				showandhide:function(data){
					return data? "隐藏":"显示";//显示隐藏的状态
				},
				numFilter:function(data){
					switch(data){
						case "1" :
							return "启动";
							break;//其实可以不加 但是还是加一下
						case "2" :
							return "离线";
							break;
						case "3" :
							return "连接";
							break;
						default:
							return data;
					}
				},
				date1:function(data){
				},
				date:(data,n)=> {
					let d = new Date(data);
					return d.getFullYear() + "-" +(d.getMonth()+1) +"-" +d.getDate();
				}
			}
		})
	}
	</script>
</head>
<body>
	<div >
	<p v-text="msg"></p>
	<div>{{3.1415926 | number(2)}}</div>
	<div>{{11 | addZero}}</div>
	<div>{{9 | addZero}}</div>
	<button @click="click1">{{flag | showandhide}}</button>
	<ul v-if="flag">
		<li v-for="item in list">{{item.name}}----{{item.type}}----{{item.type | numFilter}}</li>
	</ul>
	<div>
	<p><span>通过过滤器计算时间撮</span>{{currentTime | date}}</p>
	<p>{{currentTime}}</p>
	</div>
	</div>
</body>
</html>


---------------------------------------------------

以上是 VUE学习 第三次 的全部内容， 来源链接： utcz.com/z/380023.html

回到顶部