[JavaScript知识库] Vue学习笔记（一）（跑马灯）（简易计算器）

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习笔记（一）（跑马灯）（简易计算器） -> 正文阅读

[JavaScript知识库]Vue学习笔记（一）（跑马灯）（简易计算器）

文章目录

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>