VUE small case - Marquee effect

Self-Vue course to a small case, Marquee effect
<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <!-- 1.导入Vue包 -->
    <script src="./lib/vue-2.4.0.js"></Script > 
</ head > 

< body > 
    <-! 2. To create a control area -> 
    < div the above mentioned id = "App" > 
        < the INPUT of the type = "the Button" value = "run up" @click = "RUN " > 
        < INPUT type =" Button " value =" stop " @click =" STOP " > 

        < H4 > {{MSG}} </ H4 > 
    </ div > 

    <script>
        //Note: vm instance, if you want to get data on the data, method or methods you want to call in, this data must attribute name or method name to access this, this here, this means that our new out. examples of objects vm 
        var vm =  new new Vue ({ 
            EL: ' #app ' , 
            Data: { 
                MSG: ' insignificant development, the waves do ~ ~! ' , 
                setIntervalId: null 
            }, 
            Methods: { 
                RUN () { 
                    IF ( the this . the intervalId ! =  null ) return ; 

                    // use the arrow function does not change this point 
                    this .intervalId =the setInterval (() => {
                         // Get a character at the beginning of the first 
                        var Start =  the this .msg.substring ( 0 , . 1 );
                         // get all characters following 
                        var End =  the this .msg.substring ( . 1 );
                         / / reassemble new string obtained, and assigned to this.msg 
                        the this a .msg = End + Start; 
                    }, 400 ); 

                    // NOTE: vm instance, will monitor the data himself to change all the data, as long as a data change, it will automatically put the latest data from the data to be synchronized to the page, (benefit: programmers need child care data, no need to consider how to re-render the page DOM)
                }, 
                STOP () { // stop the timer 
                    the clearInterval ( the this .intervalId);
                     // every time after the timer is cleared, the need to re-intervalId set to null 
                    the this .intervalId =  null ; 
                } 
            } 
        }); 


        // Analysis: 
        // 1. to "run up" button to bind a click event 
        // 2. in the event handler of the button, write the relevant business logic code: get the msg string, and then call the substring string to string the capture operation, the first character, taken out, placed in a position to last 
        // 3. in order to achieve the click of a button, the automatic function taken, the code requires two steps, to put a timer 
    < / Script > 
</ body > 

</ HTML >
VUE small case - Marquee effect

Guess you like
