vue 学习（1）

跑马灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.min.js"></script>
    <div id="app">
        <input type="button" @click="start" value="start">
        <input type="button" @click="stop" value="stop">
        <p>{{msg}}</p>
    </div>
</head>
<body>

</body>
</html>
<script >
var vm = new Vue({
    el:'#app',
    data:{
        msg: '猥琐发育别浪;;;;;',
        intervalId: null
    },
    methods: {
        lang(){
            var end =  this.msg.substring(0, 1);
            var start = this.msg.substring(1, this.msg.lenth) ;
            this.msg = start + end;
        },
        start(){
            if(this.intervalId){
                return;
            }
            this.intervalId = setInterval(this.lang, 100);
        },
        stop(){
            clearInterval(this.intervalId);
            this.intervalId = null;
            this.msg = '猥琐发育别浪;;;;;';
        }
    },
});

</script>

事件修饰符

@click.stop=“inner” // 阻止冒泡
@click.prevent=“linkClick” //阻止默认行为
@click.capture // 更改捕获事件的顺序
@click.self //只有点击自己才会触发
@click.once //只触发一次