JavaScript BOM 基础

最新推荐文章于 2024-06-13 10:05:02 发布
最新推荐文章于 2024-06-13 10:05:02 发布
阅读量147 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 BOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405938/article/details/114688613
版权

1.BOM简介

BOM(Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心 对象是 window。

BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏 览器标准的一部分。

DOM：文档对象模型

  • DOM 就是把「文档」当做一个「对象」来看待
  • DOM 的顶级对象是 document
  • DOM 主要学习的是操作页面元素
  • DOM是W3C标准规范

BOM：浏览器对象模型

  • 把「浏览器」当做一个「对象」来看待
  • BOM 的顶级对象是 window
  • BOM 学习的是浏览器窗口交互的一些对象
  • BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

2.BOM构成

window 对象是浏览器的顶级对象， 它具有双重角色。

  1. 它是 JS 访问浏览器窗口的一个接口。
  2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

注意:：window下有一个特殊属性 window.name，因此变量命名应避免使用name

window对象包含：

  • document对象
  • location对象
  • navigation对象
  • screen对象
  • history对象

3.window对象的常见事件

（1）窗口加载事件

window.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。

注意:

  1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。

  2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。

  3. 如果使用 addEventListener 则没有限制

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。 Ie9以上才支持

如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用 户的体验，此时用 DOMContentLoaded 事件比较合适。

// window.onload = function() {
//     var btn = document.querySelector('button');
//     btn.addEventListener('click', function() {
//         alert('点击我');
//     })
// }
// window.onload = function() {
//     alert(22);
// }
window.addEventListener('load', function() {
    var btn = document.querySelector('button');
    btn.addEventListener('click', function() {
        alert('点击我');
    })
})
window.addEventListener('load', function() {
    alert(22);
})
document.addEventListener('DOMContentLoaded', function() {
        alert(33);
    })
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
// DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
（2）调整窗口大小事件
window.onresize = function(){} 
window.addEventListener("resize",function(){});

window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。

注意:

  1. 只要窗口大小发生像素变化，就会触发这个事件。
  2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
window.addEventListener('load', function() {
    var div = document.querySelector('div');
    window.addEventListener('resize', function() {
        console.log(window.innerWidth);
        console.log('变化了');
        if (window.innerWidth <= 800) {
            div.style.display = 'none';
        } else {
            div.style.display = 'block';
        }
    })
})
（3）定时器

setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
  3. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。

setTimeout() 这个调用函数我们也称为回调函数 callback

普通函数是按照代码顺序直接调用。 而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。

简单理解: 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调 函数。

// 1. setTimeout 
// 语法规范：  window.setTimeout(调用函数, 延时时间);
// 1. 这个window在调用的时候可以省略
// 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
// 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
// 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
// setTimeout(function() {
//     console.log('时间到了');
// }, 2000);
function callback() {
    console.log('爆炸了');
}
var timer1 = setTimeout(callback, 3000);
var timer2 = setTimeout(callback, 5000);
// setTimeout('callback()', 3000); // 我们不提倡这个写法

案例： 5秒后自动关闭的广告

<body>
    <img src="images/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

停止 setTimeout() 定时器

window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。
var btn = document.querySelector('button');
var timer = setTimeout(function() {
    console.log('爆炸了');
}, 5000);
btn.addEventListener('click', function() {
    clearTimeout(timer);
})

setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

注意:

  1. window 可以省略。
  2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。
  3. 间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
  4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。
  5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。
// 1. setInterval 
// 语法规范：  window.setInterval(调用函数, 延时时间);
setInterval(function() {
    console.log('继续输出');
}, 1000);
// 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

案例： 倒计时

案例分析：
1 这个倒计时是不断变化的，因此需要定时器来自动变化(setInterval)
2 三个黑色盒子里面分别存放时分秒
3 三个黑色盒子利用innerHTML 放入计算的小时分钟秒数
4 第一次执行也是间隔毫秒数，因此刚刷新页面会有空白
5 最好采取封装函数的方式， 这样可以先调用一次这个函数，防止刚开始刷新页面有空白问 题

<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>
    <style>
        div {
            margin: 200px;
        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2021-3-12 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

停止 setInterval() 定时器

window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。

注意:

  1. window 可以省略。
  2. 里面的参数就是定时器的标识符 。
var begin = document.querySelector('.begin');
var stop = document.querySelector('.stop');
var timer = null; // 全局变量  null是一个空对象 若不赋值为空，则为undefined，容易出现问题
begin.addEventListener('click', function () {
    timer = setInterval(function () {
        console.log('ni hao ma');

    }, 1000);
})
stop.addEventListener('click', function () {
    clearInterval(timer);
})

案例： 发送短信

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信

案例分析：
1 按钮点击之后，会禁用 disabled 为true
2 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
3 里面秒数是有变化的，因此需要用到定时器
4 定义一个变量，在定时器里面，不断递减
5 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态。

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

4.this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this 的最终指向的是那个调用它的对象

现阶段，我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例
// this 指向问题 一般情况下this的最终指向的是那个调用它的对象
// 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
console.log(this);
function fn() {
    console.log(this);
}
window.fn();
window.setTimeout(function() {
    console.log(this);
}, 1000);
// 2. 方法调用中谁调用this指向谁
var o = {
    sayHi: function() {
        console.log(this); // this指向的是 o 这个对象
    }
}
o.sayHi();
var btn = document.querySelector('button');
// btn.onclick = function() {
//     console.log(this); // this指向的是btn这个按钮对象
// }
btn.addEventListener('click', function() {
        console.log(this); // this指向的是btn这个按钮对象
    })
    // 3. 构造函数中this指向构造函数的实例
function Fun() {
    console.log(this); // this 指向的是fun 实例对象
}
var fun = new Fun();

5.JS执行队列

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚 本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对 某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

（1）同步和异步

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创 建多个线程。于是，JS 中出现了同步和异步。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做 法:我们要烧水煮饭，等水开了(10分钟之后)，再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做 饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

他们的本质区别：这条流水线上各个流程的执行顺序不同。

（2）同步任务和异步任务

同步任务

同步任务都在主线程上执行，形成一个执行栈。

异步任务

JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型:

  1. 普通事件，如 click、resize 等
  2. 资源加载，如 load、error 等
  3. 定时器，包括 setInterval、setTimeout 等 异步任务相关回调函数添加到任务队列中(任务队列也称为消息队列)。

6.JS执行机制

  1. 先执行执行栈中的同步任务。
  2. 异步任务(回调函数)放入任务队列中。
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任 务结束等待状态，进入执行栈，开始执行。

    由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环( event loop)。

7.location对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为 这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

案例： 5秒钟之后自动跳转页面

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            // console.log(location.href);
            location.href = 'http://www.bilibili.com';
        })
        var timer = 4;
        div.innerHTML = '您将在' + 5 + '秒钟之后跳转到首页';
        setInterval(function () {
            if (timer == 0) {
                location.href = 'http://www.bilibili.com';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
</body>

案例： 获取 URL 参数数据

案例分析：
1 第一个登录页面，里面有提交表单， action 提交到 index.html页面
2 第二个页面，可以使用第一个页面的参数，这样实现了一个数据不同页面之间的传递效果
3 第二个页面之所以可以使用第一个页面的数据，是利用了URL 里面的 location.search参数
4 在第二个页面中，需要把这个参数提取。
5 第一步去掉? 利用 substr
6 第二步 利用=号分割 键 和 值 split(‘=‘)
7 第一个数组就是键 第二个数组就是值

<!-->index.html<-->
<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

<!-->login.html<-->
<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>


var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    // 记录浏览历史，所以可以实现后退功能
    // location.assign('http://www.itcast.cn');
    // 不记录浏览历史，所以不可以实现后退功能
    // location.replace('http://www.itcast.cn');
    location.reload(true);
})

8.navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客 户机发送服务器的 user-agent 头部的值。

if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS |Symbian|Windows Phone)/i))) {
    window.location.href = ""; //手机 
} else {
    window.location.href = ""; //电脑 
}

9.history对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中) 访问过的 URL。

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

阿蓬2023
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中BOM基础知识总结
10-20
本文主要对javascript中BOM基础知识进行总结。具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript高级基础-2
12-20
JavaScript高级基础-2 3.BOM操作 4.正则表达式 5.ES6
JavaScript之BOM基础
imherer的博客
08-05 114
BOM(Browser Object Model)也叫浏览器对象，它提供了很多对象，用于访问浏览器的功能。但是BOM是没有标准的，每一个浏览器厂家会根据自己的需求来扩展BOM对象。本文主要以一些简单的小例子，简述前端开发中BOM的相关基础知识，仅供学习分享使用，如有不足之处，还请指正。 概述 window对象是最顶层的对象，旗下还有6大属性，也都是对象。document对象下也有5大属性，同样都是对象。window的属性和方法，可以采用：window.属性，或 window.方法()进行调用，或者...
JavaScript基础——BOM基础
爱前端的程序媛的博客
03-13 314
目录 写在前面的反思 BOM笔记 案例说明 常用事件 定时器 this指向问题 JS执行机制 写在前面的反思 用了大概一个星期的时间吧，把DOM的基础知识点和对应的一些案例过了一遍。其实我也没有严格要求自己在多长多长时间内去学完多少多少知识或者看完哪部分知识。我都是看视频、记笔记，然后再整理整理笔记，练习练习视频里面的案例，敲敲代码，整理思路。就是在敲代码的过程中要试着去复...
JS BOM基础篇
い南秋乱港
08-06 199
BOM基础 BOM: Borwser Object Model JS的浏览器对象模型, 主要用于客户端浏览器的管理 BOM概念比较古老, 但是一直没有被标准化, 不过现在基本上主流浏览器都支持BOM, 也都遵循最基本的规则, W3C也将BOM的主要内容纳入了HTML5的规范 BOM 是由一系列的对象组成的, 每个对象负责一类事务 而BOM里的核心对象 是 window对象; 该对象既是核心对象也是顶层对象, 其余的对象都是由window延伸出来的 由window延伸出来的对象: docu
JavaScript BOM基础
ylovd的博客
02-24 92
BOM基础 浏览器对象模型，独立于内容而与浏览器窗口进行交互的对象，核心对象是window，是浏览器的顶级事项 是js访问浏览器的接口 是一个全局变量，在全局作用域中的变量函数都会成为window对象的属性和方法，调用时可省略window 常见事件 页面加载事件 窗口加载事件 <script> window.onload = function() { } window.addEventListener("load",function(
javascript BOM基础
天马行空的创作中心
05-19 186
BrowserObjectModel 常见弹窗 prompt(&amp;amp;quot;恭喜你&amp;amp;quot;); confirm(&amp;amp;quot;确认进行下一步吗&amp;amp;quot;); alert(&amp;amp;quot;不安全！！！&amp;amp;quot;); 打开窗口，关闭窗口 open(&amp;amp;quot;http://www.baidu.com&amp;amp;quo
JavaScript基础知识之BOM
qq_38652677的博客
10-28 1372
BOM是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性。BOM缺乏标准，javascript语法的标准化组织是ECMA,DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。DOM和BOM的比较DOM：文档对象模型、DOM就是把[文档]当作一个[对象]来看待、DOM的顶级对象是document、DOM主要学习的是操作页面元素、DOM是W3C标准规范。
JavaScript基础&BOM，学习Java第42天
07-31
JavaScript基础&BOM技术 Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型 注：ECMAScript描述了语法、类型、语句、关键字、保留字、运算符和对象。它就是定义了脚本...
Javascript基础知识（三）BOM，DOM总结
10-25
本文是基础知识系列的第三篇文章，主要介绍javascript中BOM,DOM的一些心得总结，非常实用，有需要的朋友可以参考下
BOM
Aqours的博客
09-15 276
BOM BOM简介 浏览器对象模型 BOM可以使我们通过JS来操作浏览器 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 BOM对象 window 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器 Location 代表当前浏览器的地址栏信息，通过Location可以获取地...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 299
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 499
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 726
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
最新发布
m0_68467925的博客
06-13 404
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 344
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Vue CLI 4与项目构建实战指南
06-09 905
Vue CLI的作用和优势Vue CLI（Vue.js Command Line Interface）是官方提供的一个标准工具，用于快速搭建Vue项目架构。标准化开发流程：Vue CLI提供了一套标准的开发流程和项目结构，有助于团队协作和项目维护。快速原型开发：通过Vue CLI可以快速创建项目原型，提高开发效率。丰富的插件生态：Vue CLI拥有丰富的插件，可以轻松集成各种功能，如路由、状态管理、打包优化等。易于定制和扩展：Vue CLI支持对构建配置的深度定制，满足不同项目的需求。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1218
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
javascript程序设计基础教程(慕课版)电子书
05-15
其中，JS有三大重要部分：ECMAScript（JavaScript语言核心）、Document Object Model（DOM）和Browser Object Model（BOM） 本书通过课程视频和练习题提供了一套全面的JavaScript程序设计基础教程。书中通过实践...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值