VUE Study Notes 3
---------------------------------------------------
template
v-text
v-html
<p v-vloak>{{msg}}</p>
<!--v-vloak to solve browser flickering and write css-->
<style>
[v-cloak]{display: none;}
</style>
Three ways to solve browser opening flickering
---------------------------------------------------
event event bubbling
modifier
.shop prevents events from bubbling
.prevent prevents default event behavior
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Block event event default event</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();//Stop event bubbling js method
console.log("3");
},
show4(){
console.log("4"); //html correspondingly handles blocking
},
open(e){
console.log("open");
e.preventDefault(); //Cancel the default action of the event
},
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 prevents event from bubbling</button>
<button @click.stop="show4()">a4 prevents events from bubbling</button>
</div>
</div>
<!--Stop event bubbling a3 native method 4v is vue method-->
<a href="http://www.baidu.com" @click.prevent="open1()">VUE prevents default events</a>
<a href="http://www.baidu.com" @click="open($event)">js blocks default event</a>
<div>
<button @click.once="nonce()">execute only once</button>
</div>
</div>
</body>
</html>
---------------------------------------------------
keyboard event
<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>Keyboard events</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 View({
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
filter
year and day
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Filter</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){//global filter
return data>10?data:"0"+data;//If data is greater than 10, it will not be modified and less than 10, then add 0 in front
})
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(),//Get the time
},
methods:{//methods
click1:function(){
console.log("1");
this.flag = !this.flag;
}
},
filters:{//filters
number:function(data,n){
return data.toFixed(n);//Keep two decimal places
},
showandhide:function(data){
return data? "Hidden":"Show";//Show hidden state
},
numFilter:function(data){
switch(data){
case "1" :
return "start";
break;//In fact, you can not add it but still add it
case "2" :
return "offline";
break;
case "3" :
return "connect";
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>Calculate time by filter</span>{{currentTime | date}}</p>
<p>{{currentTime}}</p>
</div>
</div>
</body>
</html>
---------------------------------------------------