Vue踩坑记录及工作记录

原创

xxxpjgl 2018-12-16 15:09:55 博主文章分类：vue ©著作权

©著作权归作者所有：来自51CTO博客作者xxxpjgl的原创作品，请联系作者获取转载授权，否则将追究法律责任

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>

4、二、Vue------循环多个ul与li,给li增加点击事件增加class不影响其他的li