案例篇： Vue 之跑马灯效果

需求分析篇：
1、点击按钮，msg中的文字开始走动，涉及到字符串的操作。因此需要绑定点击事件 v-on
2、在按钮的事件处理函数中，编写相关的业务逻辑：拿到msg字符串进行截取操作。需要调用字符串的substring方法，把第一个字符截取出来，放到最后一个位置即可。
3、为了实现点击按钮自动截取的功能，需要把步骤2中的代码放到定时器中，开启一个定时器。
设计篇：

• 导入vue包
  <script src="vue.js"></script>
• 创建控制区域
  <div id="#app"></div>
• 通过script 创建实例对象

<script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"好好学习，天天向上"
            },
            methods:{
                
            }
        })
    </script>

注意：在vue实例内部，如果想要获取data上面的数据，或者想要调用methods中的方法。需要调用this方法。this 代表当前 vue 实例。
this.数据属性名 或者 this.方法名进行访问。
逻辑编写篇：

<div id="app">
            <input type="button" value="启动" @click="lang"/>
            <input type="button" value="停止" @click="end"/>
            <p>{{msg}}</p>
        </div>

<script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"好好学习，天天向上",
                intivend:null  // 在data 上定义一个定时器id
            },
            methods:{
                lang(){
                    if(this.intivend!=null){
                        return
                    }
                    
                    this.intivend=setInterval(()=>{
                        //获取到头的第一个字符
                    var start = this.msg.substring(0,1)
                    //获取到后面所有的字符
                    var end = this.msg.substring(1)
                    //重新拼接得到新的字符串，并复制给this.msg
                    this.msg=end+start
                    
                    // 注意： vue 实例会监听自己身上 data 中所有数据的改变，只要数据一
//                  发生变化,就会自动将数据同步到页面中去【程序员只需要关心数据，不需要考虑如何渲染到页面】
                    },400)
                },
                end(){ //停止定时器
                    clearInterval(this.intivend)
                    this.intivend=null //每当清除了定时器之后，需要重新把intivend变为null
                }
            }
        })
    </script>

测试篇：
结果：测试成功