前端基础知识

最新推荐文章于 2025-06-04 15:49:34 发布
最新推荐文章于 2025-06-04 15:49:34 发布
阅读量138 收藏
点赞数
文章标签： vue.js js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43572928/article/details/121378750
版权

前端学习提醒
vscode
1：var与let
2：const声明常量
3：解构
4：字符串api
5：字符串模板
6：字符串中动态插入变量、表达式、函数
7：为函数参数设置默认值
8：向js方法中传入不定参数
9：声明函数的另一种方式：箭头函数
10：插值表达式
11：事件绑定
12：双向绑定
13：绑定方法
14：v-bind
15：watch（监听器）
16：Vue组件化思想
17：生命周期与钩子函数





前端学习提醒
在使用vscode进行前端开发的时候，插件可以提高开发效率，好用的插件有：
1>Live Server： 实时监控代码修改导致的页面变化。
在这里插入图片描述


vscode工具使用：
1：代码格式化：alt+shift+f


1：var与let

  • var声明的变量会越狱，let声明的变量有严格的作用域。
  • var可以重复声明一个变量，let不可以重复声明一个变量。

案例1：

<!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>
</head>
<body>
    <script>
        //var声明的变量会越狱
        //let声明的变量有严格的作用域
        {
            var a = 1;
            let b = 2;
        }
        console.log(a); //1
        console.log(b); //报错 : Uncaught ReferenceError: b is not defined
    </script>
</body>
</html>

案例2：

<!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>
</head>
<body>
    <script>
        //var可以重复声明一个变量
        //let不可以重复声明一个变量
        {
            var a = 1;
            var a = 10;
            let b = 2;
            let b = 20;
        }
        console.log(a); //2
        console.log(b); //报错 :Uncaught SyntaxError: Identifier 'b' has already been declared
    </script>
</body>
</html>


2：const声明常量

  • const修饰常量
  • 声明必须初始化

案例：

<!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>
</head>
<body>
    <script>
        const o ; //Uncaught SyntaxError: Missing initializer in const declaration
                  //未捕获的SyntaxError: const声明中缺少初始化式  

        const a = 1; 
        a = 2;      //Uncaught TypeError: Assignment to constant variable.
                     //未捕获的TypeError:赋值给常量变量。 
        
    </script>
</body>
</html>


3：解构

  • 解构数组
  • 解构对象

案例1：解构数组

<!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>
</head>
<body>
    <script>
        var arr = [1,2,3];
        var [a,b,c] = arr;
        console.log(a,b,c); //打印：1，2，3
    </script>
</body>
</html>

案例2：解构对象

<!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>
</head>
<body>
    <script>
        const person = {
            name : "jack",
            age : 21,
            like : ['篮球','足球']
        }
        

        var {name,age,like} = person;
        console.log(name,age,like);

        var {name:abc,age,like} = person;
        console.log(abc,age,like);

    </script>
</body>
</html>


4：字符串api

<body>
    <script>
        var str = "lalala.java";
        console.log(str.startsWith("l"));   //字符串以什么开头
        console.log(str.endsWith("java"));  //字符串以什么结束
        console.log(str.includes("la"));    //字符串是否包含
    </script>
</body>


5：字符串模板 跳转链接

<!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>
</head>
<body>
    <script>
        let ss = `<div><span>hello world</span></div>`;
        console.log(ss); //打印：<div><span>hello world</span></div>
    </script>
</body>
</html>


6:字符串中动态插入变量、表达式、函数 跳转链接

<!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>
</head>
<body>
    <script>
        const person = {
            name : "jack",
            age : 21,
            like : ['篮球','足球']
        }
        
        var {name,age,like} = person;

        function f(){
            return "小逼崽子，是不是没见过黑社会？";
        }
		
		//插入变量
        let str = `姓名${name},年龄${age},爱好${like}`;
        console.log(str);//打印 ： 姓名jack,年龄21,爱好篮球,足球
		
		//插入表达式
        let str2 = `姓名+年龄:${name+age}`
        console.log(str2);//打印 ： 姓名+年龄:jack21
		
		//插入函数
        let str3 = `${f()}`;
        console.log(str3);//小逼崽子，是不是没见过黑社会？

    </script>
</body>
</html>


7：为函数参数设置默认值

<!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>
</head>
<body>
    <script>
        function f(a,b=1){//new（）新建Vue实例
            console.log(a+b);
        }
        f(1);//此时只是向函数中传递了一个值
             //打印:2
    </script>
</body>
</html>


8：向js方法中传入不定参数

<!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>
</head>
<body>
    <script>
       function f(...a){//new（）新建Vue实例
            console.log(a.length);
       }
       f(1,2,3);
    </script>
</body>
</html>


9：声明函数的另一种方式：箭头函数

<!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>
</head>
<body>
    <script>
       //声明函数的一种方式
       var print = function(obj){//new（）新建Vue实例
           console.log(obj);
       }
       print("hello");

       //声明函数的另一种方式：箭头函数
       var print2 = obj => console.log(obj);
       print2("hello2");
    </script>
</body>
</html>


10：插值表达式

<!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>
</head>
<body>
    <div id="app">
        <h1>{{name}},奥里给</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({//new（）新建Vue实例
            el : "#app",
            data : {
                name:"张三"
            }
        });
    </script>
</body>
</html>


11：事件绑定


```html

```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>
</head>
<body>
    <div id="app">
        <button v-on:click="num++">点赞</button>

        <h1>有{{num}}个人为他点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({//new（）新建Vue实例
            el : "#app",
            data : {
                name:"张三",
                num:1
            }
        });
    </script>
</body>
</html>


12：双向绑定

<!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>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <h1>有{{num}}个人为他点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({//new（）新建Vue实例
            el : "#app",
            data : {
                name:"张三",
                num:1
            }
        });
    </script>
</body>
</html>


13：方法绑定

<!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>
</head>
<body>
    <div id="app">
        <button v-on:click="add">点赞</button>
        <h1>有{{num}}个人为他点赞</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({//new（）新建Vue实例
            el : "#app",
            data : {
                name:"张三",
                num:1
            },
            methods:{
                add(){
                    this.num = this.num+2
                } 
            }
        });
    </script>
</body>
</html>


14:v-bind

<!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>
</head>
<body>
    <div id="app">
        <a v-bind:href="link">点击</a>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el : "#app",
            data : {
                link:"http://www.baidu.com"
            }
        });
    </script>
</body>
</html>


15：监听器


16：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>
</head>
<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <button v-on:click="count++">{{count}}</button>
    </div>
    <script>
        //全局声明注册一个组件	
        Vue.component("counter",{     //组件名：counter
           template:`<button v-on:click="count++">{{count}}</button>` ,
           data(){
               return{
                   count:1
               }
           }
        });

        new Vue({	//新建Vue实例
            el:"#app",
            data:{
                count:1
            }
        })
    </script>
</body>
</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>
</head>
<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <button v-on:click="count++">{{count}}</button>
    </div>
    <script>

        //局部声明一个组件
        const buttonCounter = {
            template:`<button v-on:click="count++">{{count}}</button>`,
            data(){
                return{
                   count:1
               }
            }
        }

        new Vue({ //新建Vue实例
            el:"#app",
            data:{
                count:1
            },
            components:{
                'button-counter':buttonCounter //组件名：button-counter
            }
        })
    </script>
</body>
</html>


17：生命周期与钩子函数 跳转链接





也许今天
关注
前端核心基础知识总结
全沾软贱开发攻城狮
09-07 1万+
在当前内卷严重的技术圈，虽说近两年一直都在唱衰前端开发，甚至有一种所谓的“前端已死”的言论，但是在实际情况下前端开发依然扮演着至关重要的角色，前端是用户与数字产品交互的桥梁。无论是构建复杂且用户体验较高的网页、强大的 Web 应用程序还是响应式的移动界面，前端开发都需要扎实的基础知识，在前端开发领域，基础知识是构建高效、稳定和可维护代码的基石。无论是刚入行的新手还是经验丰富的老手，扎实的前端基础都是必不可少的，尤其在面试过程中，面试官通常会着重考察应聘者对前端基础知识的掌握程度。
web前端基础知识
早睡早起长头发的博客
07-11 7412
一、网页、静态网页、动态网页 二、网页名词解释 三、Web标准 四、Web页面的组成
前端基础知识整理
weixin_42767674的博客
05-08 5774
一、基础部分 1.Web标准的构成：主要包括结构（Strcture）、表现（Presentation）和行为（Behavior）。 结构：结构用于对网页元素进行整理和分类，html 表现：设置网页元素的版式、颜色、大小等外观样式，主要指css 行为：网页模型的定义以及交互的编写，js 二、HTML 1.HTML标签的关系有包含关系和并列关系两种 ...
Web前端基础知识
weixin_74227828的博客
07-05 1837
Web前端是指网站或应用程序的用户界面部分。它包括HTML、CSS、JavaScript等语言和技术，用于创建用户可浏览和交互的网页。Web前端的特点在于其交互性和动态性，可以通过CSS和JavaScript实现页面的动态效果和用户交互。
前端基础知识点
weixin_45875721的博客
07-30 3979
作为一名准大二学生，我准备提前预习前端的一些知识，所以就准备写了这篇文章，文章中有自己理解的，还有百度查到的，希望会对准备学习前端的同学有帮助。 1，什么是前端？ 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。 2，前端的核心技术 HTML， CSS， JavaScript。 这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。这是前端的基础，一定...
前端基础知识大纲
Prince_fmx的博客
09-19 1309
前端开发工程师应该具备的基础知识体系大纲：HTML&CSS：对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、document flow（文档流）、清除浮动，hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5（离线 & 存储，多媒体，Web Sock
前端Web开发基础知识
2301_77599154的博客
05-02 5757
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
前端基本知识介绍
热门推荐
qq_52914337的博客
05-07 6万+
.前端三剑客 1.前导 （1）HTML,CSS,JS都是单独的语言； （2）HTML,CSS,JS构成前端技术基础； 2.三剑客的分工 （1）HTML：负责网页的架构； （2）CSS：负责网页的样式，美化； （3）JavaScript（JS）：负责网页的行为； 二.VsCode的介绍与配置 1.vscode的介绍 vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃
前端基础知识点总结
坚强的泡沫的博客
10-20 1910
1 HTML+CSS 1.1 基本标签 html文档标签： <!DOCTYPE>、<html>、<head>、<meta>、<title>、<link>、<style>、<body>、<script>、<noscript> 按闭合特征分类： 闭合标签：指由开始标签和结束标签组成的一对标签这种标签允许嵌套和承载内容，例如<html></html>、<p>
Vue前端基础知识，一文打通
m0_58366209的博客
11-06 1722
本文主要是对Vue的一些基础知识，以及常见指令的介绍。Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上 手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
03-13
本章“第4章 前端面试技能拼图2：前端基础知识，必知必会”将深入探讨那些面试官常问且开发者必须掌握的核心概念。 1. HTML（超文本标记语言）： HTML是网页内容的结构标准，是前端开发的基石。理解不同标签的作用...
前端基础知识资料和练习(PPT+源码).zip
10-11
前端基础知识资料和练习(PPT+源码).zip前端基础知识资料和练习(PPT+源码).zip前端基础知识资料和练习(PPT+源码).zip前端基础知识资料和练习(PPT+源码).zip前端基础知识资料和练习(PPT+源码).zip前端基础知识资料和...
基于HTML/CSS/JavaScript的JavaScript前端基础知识练习与总结源码
10-05
基于HTML/CSS/JavaScript的JavaScript前端基础知识练习与总结源码项目是一个全面的前端开发学习资源，它包括了多种文件类型，涵盖了前端开发的基础知识与实践技能。项目中的HTML文件是构成网页内容和结构的基础，...
前端基础知识：Web安全基础.zip
08-18
史上最全web前端技术全套教程，包括： 前端API集成 前端基础知识 前端开发最佳实践 前端性能优化 前端构建工具 前端框架和库 前端测试工具 前端状态管理 等流行技术的系列教程
vue3 el-input type=“textarea“ 字体样式 及高度设置
往事知多少？
05-31 581
在Vue 3中，如果你使用的是Element Plus库中的<el-input>组件作为文本域（），你可以通过几种方式来设置字体样式和高度。
vue封装gsap自定义动画指令
最新发布
m0_69250830的博客
06-04 114
2、main.ts注册。
【前端】Vue中使用CKeditor作为富文本编辑器
Lifelong learning.
06-01 912
请输入文本
Vue初始化脚手架
m0_61787196的博客
06-01 1136
Vue初始化脚手架
前端开发基础：HTML5, CSS与JavaScript解析
"前端基础知识PPT，内部培训资料，涵盖了前端开发中的基本概念、HTML5、手机端Web应用开发、Node.js以及前端开发的相关标准和最佳实践。" 在前端开发领域，基础是构建一切复杂应用的基石。这个PPT深入浅出地介绍了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值