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 id="demo6">
<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 id="demo7">
<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 id="demo8">
<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>
---------------------------------------------------