1、使用this.$emit 子组件向父组件传递事件以及携带数据
在标签内调用 methods:{ } 中的方法时候是不能够加()的，一定是直接写方法名称即可, 否则传递的参数数据无效。


这里的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代码：



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 = '暂停';
        }
    };
}





兔斯基 卖萌



    
兔斯基 卖萌