Vue学习笔记（一）（跑马灯）（简易计算器）

本文链接：https://blog.csdn.net/liaoai/article/details/120599866

本文介绍了Vue.js的基本语法，包括数据绑定、指令如v-cloak、v-text、v-html、v-bind、v-on、v-model及其修饰符的使用。此外，还展示了如何实现跑马灯效果，以及一个简单的计算器应用，涵盖了字符串截取和计算逻辑。通过这些实例，深入理解Vue.js的核心特性和实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

Vue基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <!-- VUE控制的元素区域就是 V  -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script>
        //导入包后 浏览器内存中多了一个 Vue 构造函数
        //vm对象就是MVVM中的 VM 调度者
        var vm = new Vue({
            el:'#app', //表示当前Vue实例，要控制页面上哪个区域
            //这里的data是MVVM中的 M 保存每个页面的数据
            data: { //存放的是 el 要用的数据
                msg: '欢迎学习vue'
            }
        })
    </script>
</body>
</html>

基本指令

v-cloak 解决插值表达式闪烁

<style>
    [v-cloak]{
        display: none;
    }
</style>

v-text 没有闪烁问题，覆盖元素中原本内容，但是插值表达式只会替换自己的占位符，不会清空整个内容

v-html 会覆盖元素中内容，但会解析html内容

v-bind 属性绑定机制简写: （可以写合法的js表达式）

v-on 事件绑定机制简写@

v-model 双向数据绑定

v-if 每次都会重新删除或创建元素，有较高的切换性能消耗

v-show 每次不会进行DOM的删除和创建操作，只是切换了元素的display:none样式，有较高的初始渲染消耗

注：v-bind和v-model区别

v-bind只能实现数据的单向绑定，从M自动绑定到V

v-model只能运用在表单元素中例如 input(radio,text,address,email…) checkbox…

注：v-on事件修饰符：

.stop 阻止冒泡

.prevent 阻止默认行为

.capture 实现捕获

.self 实现只有点击当前元素才会触发事件处理函数

.once 事件只触发一次

.self 只会阻止自己身上冒泡行为的触发，并不会阻止像stop阻止其他。

跑马灯

在这里插入图片描述

给浪起来按钮绑定一个点击事件，在按钮的事件处理函数中，写相关业务逻辑代码：拿到msg字符串，调用字符串的substring 进行字符串的截取，把第一个字符截取出来，放到最后一个位置。
为了实现自动截取，需要放在定时器中。
给低调按钮绑定一个点击事件，在按钮的事件处理函数中，获取定时器返回的id值进行清空。
需要判断id值是否为null来保证能连续操作。

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="低调">
        <h4>
            {{msg}}
        </h4>
    </div>
</body>

JS代码

var vm = new Vue({
    el:'#app',
    data:{
        msg:'猥琐发育，别浪~~',
        intervalId = null
    },
    methods:{
        lang(){
            //截取第一个字符放到最后一个位置，即第一个字符接在其余后
            //为实现自动截取，放在定时器内
            /* setInterval(function(){
                var start = this.msg.substring(0,1);
                var end = this.msg.substring(1);
                this.msg = end + start;
            } ,400)			*/
            //此时定时器内this指向window 并非调用data中msg
            
            if(this.intervalId != null) return 0;
            this.intervalId = setInterval( ()=>{	//若在此直接设定id则stop函数无法获取，所以定义在data中通过this获得
                var start = this.msg.substring(0,1);
                var end = this.msg.substring(1);
                this.msg = end + start;
            } ,400)
            //采用箭头函数，箭头函数内部的this与外部保持一致
            //data数据改变，自动更新数据，从data上同步到页面
        },
        stop(){
            //获取setInterval返回的id，进行清空
            clearInterval(this.intervalId);
            this.intervalId = null;		//每当清除定时器后重新把intervalId设为null，若不设为null，则无法继续 浪起来 
        }
    }
})

注：setInterval()函数

setInterval(代码串/函数,时间间隔(ms))

返回一个ID，可以将这个ID传递给clearInterval()，clearTimeout() 以取消执行。

简易的计算器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+',
            },
            methods: {
                calc() {
                    switch (this.opt) {
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                            break;
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                            break;
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                            break;
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                            break;
                    }


                    //投机取巧
                    // var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                    // this.result=eval(codeStr);
                }
            },
        });
    </script>
</body>

</html>