Vue学习的demo编写记录

Vue指令之跑马灯效果Demo

1. 给 【启动】 按钮，绑定一个点击事件 v-on/@

2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后 调用 字符串的substring来进行字符串的截取操作，把 第一个字符截取出来，放到最后一个位置即可；

            start(){
                var start = this.msg.substring(0,1);
                var end = this.msg.substring(1);
                this.msg = end + start;
                },

3. 为了实现点击下按钮，自动截取的功能，需要把第 2 步骤中的代码，放到一个定时器中去；

            start(){
                if(this.intervalId != null) return;
                this.intervalId = setInterval(()=>{},100)
            },
            stop(){
                clearInterval(this.intervalId);
                this.intervalId = null;
            },

4. 最终完成跑马灯的实例demo

    
{{msg}}
    
    

Vue指令之简易计算器Demo

1. 搭建HTML页面框架并对需要操作的dom进行v-model或@/v-on的事件绑定

    
    
        +
        -
        *
        /
    
    
    
    

2. 对用v-model进行双向绑定的事件编写data程序，赋予或获取dom的值

3. 编写自定义的方法，实现计算器的基础功能
   parseInt() 函数可解析一个字符串，并返回一个整数。
   对this.first和this.second执行parseInt()操作是因为直接相加会出现 1+1=11 的字符串相加的情况

        methods : {
            equal(){
                switch (this.select) {
                    case '+':
                        this.result = parseInt(this.first) + parseInt(this.second)
                        break;
                    case '-':
                        this.result = parseInt(this.first) - parseInt(this.second)
                        break;
                    case '*':
                        this.result = parseInt(this.first) * parseInt(this.second)
                        break;
                    case '/':
                        this.result = parseInt(this.first) / parseInt(this.second)
                        break;
                }
            },
        }

可使用便捷的代码进行整合，实际开发中操作较多不推荐
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

            var codeStr = 'parseInt(this.first) ' + this.select + ' parseInt(this.second)'
            this.result = eval(codeStr)

4. 最终完成简易计算器的实例demo

    
    
        +
        -
        *
        /