1、使用this.$emit 子組件向父組件傳遞事件以及攜帶數據
在標籤內調用 methods:{ } 中的方法時候是不能夠加()的，一定是直接寫方法名稱即可, 否則傳遞的參數數據無效。
<list v-show="listShow" :listData="listData" @titleHandle = "showTitle"></list>
這裏的titleHandle是監聽子組件傳遞過來的事件(帶有參數)，showTitle是父組件監聽成功之後在父組件內執行的方法，【注意這裏@titleHandle = "showTitle"的showTitle後面不能加()，裏面也不能傳參】
子組件：
methods:{
getTitle(title){
this.$emit('titleHandle',title)
}
},
父組件：
methods: {
showTitle(title){
console.log(title)
}
},2、在vue組件內，如果要對組件內的數據做邏輯判斷，那麼這個邏輯應該寫在計算屬性computed內，一般不放在模板內
computed:{
num(){ //在模板裏面直接{{num}}即可
return ... //這裏面對值做邏輯處理、篩選等等
}
}3、使用CSS3 animation模擬gif動畫
即：animation控制Sprites圖片的background-position值模擬gif效果
.love {
display: block;
width: 100px; height: 100px;
background: url(web_heart_animation.png) 0 0 no-repeat;
background-size: 2900%;
animation: heart-burst steps(28) 0.8s infinite both;
}
.stop {
animation-play-state: paused;
}
@keyframes heart-burst { //圖片從左到右一字排開，有多少個，steps裏面就寫幾
0% {
background-position: 0%;
}
100% {
background-position: 100%;
}
}
HTML代碼：
<i id="testImg" class="love"></i>
<p><input type="button" id="testBtn" value="暫停"></p>
JS代碼：
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '暫停') {
image.classList.add('stop');
this.value = '播放';
} else {
image.classList.remove('stop');
this.value = '暫停';
}
};
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兔斯基 賣萌</title>
<style type="text/css">
@-webkit-keyframes test {
0% {background-position:0px 0;}
100% {background-position:0px -400%;}
}
@keyframes test {
0% {background-position:0px 0;}
100% {background-position:0px -400%;}
}
.steps{
height:35px;
width:32px;
text-indent: -9999px;
-webkit-animation:test 4s steps(4,end) infinite;
animation:test 4s steps(4,end) infinite;
background:url(http://www.web-tinker.com/share/兔斯基揉臉.png);
}
</style>
</head>
<body>
<div class="steps">兔斯基 賣萌</div>
</body>
</html>