JavaWeb——002JS & Vue快速入门

小琪爱学习2024-02-22 19:02

目录

一、JS快速入门​编辑

1、什么是JavaScript?​编辑

2、JS引入方式​编辑

2.1、示例代码

3、JS基础语法

3.1、书写语法

3.2、变量​编辑

3.3、数据类型

3.4、运算符​编辑

3.5、流程控制语句​编辑

4、JS函数

[4.1、第一种函数定义方式 function funcName(参数1，......)​编辑](#4.1、第一种函数定义方式 function funcName(参数1，……)编辑)

[4.2、第二种函数定义方式 var funcName = function(参数1，......)​编辑](#4.2、第二种函数定义方式 var funcName = function(参数1，……)编辑)

5、JS对象

5.1、Array​编辑

5.2、String

5.3、JS自定义对象

5.4、JSON

5.5、BOM（浏览器对象模型）

5.6、DOM（文档对象模型）​编辑

5.7、DOM案例

6、JS事件监听

6.1、事件绑定

6.2、常见事件

6.3、事件监听案例​编辑

二、Vue快速入门

1、什么是Vue?​编辑

1.1、MVVM

1.2、Vue双向数据绑定书写流程​编辑

2、Vue的常用指令（v-xxx）​编辑

2.1、v-bind​编辑

2,2、v-model​编辑

2.3、v-on

2.4、v-if（符合条件才渲染）​编辑

2.5、v-show（全部渲染）

2.6、v-for​编辑

2.7、案例：通过Vue完成表格数据的渲染展示

3、Vue的生命周期

3.1、生命周期状态图

3.2、mounted示例代码

3.3、小结​编辑

一、JS快速入门

1、什么是JavaScript?

ECMA：（ECMA国际）

2、JS引入方式

2.1、示例代码

javascript 复制代码 
<!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>JS-引入方式</title>
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
</head>
<body>
    
    <!-- 内部脚本 -->
    <!-- <script>
        alert("Hello JS");//定义弹出框
    </script> -->
    
    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</body>
</html>

<!-- <script>
    alert("Hello JS");//定义弹出框
</script> -->

外部JS文件

效果

3、JS基础语法

  • 书写语法
  • 变量
  • 数据类型、运算符、流程控制语句

3.1、书写语法

输出语句：window.alert()、document.write()、console.log()

示例代码

javascript 复制代码 
<!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>JS-基本语法</title>
</head>
<body>
   
    
   <script>
    window.alert("Hello JS"); //弹出框

    document.write("Hello JS"); //写入HTML页面

    console.log("Hello JS"); //浏览器控制台
   </script>
</body>
</html>

效果图

3.2、变量

示例代码

代码

效果

3.3、数据类型

原始数据类型（5种）：

示例代码

为什么typeof null 会返回 object：

3.4、运算符

示例代码：

类型转换：

示例代码：（其它类型转为数字）

示例代码：（其它类型转为boolean）

3.5、流程控制语句

4、JS函数

4.1、第一种函数定义方式 function funcName(参数1，......)

4.2、第二种函数定义方式 var funcName = function(参数1，......)

代码

5、JS对象

重点关注五种对象：

BOM：浏览器对象模型

DOM：文档对象模型

5.1、Array

注意事项：JavaScript中的数组相当于Java中集合，数组的长度是可变的 ，而JavaScript是弱类型，所以存储任意的类型的数据（长度可变、类型可变）

示例代码：

javascript 复制代码 
//定义数组
    // var arr = new Array(1,2,3,4);
    // var arr = [1,2,3,4];

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点: 长度可变 类型可变
    // var arr = [1,2,3,4];
    // arr[10] = 50;

    // console.log(arr[10]);
    // console.log(arr[9]);
    // console.log(arr[8]);

    // arr[9] = "A";
    // arr[8] = true;

    // console.log(arr);

效果：

遍历数组（与Java相同）

Array的成员函数：

箭头函数ES6：类似与Lambda表达式

示例代码：forEach()：仅遍历有值元素

push()：添加元素

splice()：删除元素

5.2、String

示例代码：

javascript 复制代码 
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    //获取字符串的长度
    console.log(str.length);

    //charAt
    //获取指定位置的字符
    console.log(str.charAt(4));

    //indexOf
    //检索字符串xx所在的位置
    console.log(str.indexOf("lo"));

    //trim
    //去除字符串左右两侧的空格
    var s = str.trim();
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>

5.3、JS自定义对象

示例代码：

javascript 复制代码 
 //自定义对象
    // var user = {
    //     name: "Tom",
    //     age: 10,
    //     gender: "male",
    //     // eat: function(){
    //     //     alert("用膳~");
    //     // }


    // 方法简写
    //     eat(){
    //         alert("用膳~");
    //     }
    // }

    // alert(user.name);
    // user.eat();

效果

5.4、JSON

Key-value键值对但key必须 要用双引号引起来

javascript 复制代码 
 //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

    //json字符串--js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);

    //js对象--json字符串
    alert(JSON.stringify(obj));

5.5、BOM（浏览器对象模型）

BOM五大方法

  • JS Browser BOM
  • JS Window
  • JS Screen
  • JS Location
  • JS history
  • JS Navigate

重点了解和掌握Windows和Location对象即可

示例代码：confirm()

javascript 复制代码 
//定时器 - setInterval -- 周期性的执行某一个函数
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);

Location对象：

javascript 复制代码 
//location
    alert(location.href);

    location.href = "https://www.itcast.cn";

5.6、DOM（文档对象模型）

DOM树：

DOM可以进行的操作：

DOM案例：

更改标题内容和颜色

删除最后一个

DOM分3种

如何获取指定的元素对象：

示例代码：

javascript 复制代码 
<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

第一步：获取Element元素

javascript 复制代码 
//1. 获取Element元素

    //1.1 获取元素-根据ID获取
    // var img = document.getElementById('h1');
    // alert(img);

    //1.2 获取元素-根据标签获取 - div
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }


    //1.3 获取元素-根据name属性获取
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //     alert(ins[i]);
    // }


    //1.4 获取元素-根据class属性获取
    // var divs = document.getElementsByClassName('cls');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);
    // }

第二步：查询官方手册，找到对应方法

javascript 复制代码 
    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "传智教育666";

5.7、DOM案例

javascript 复制代码 
<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 : src 属性值
    var img = document.getElementById('h1');
    img.src = "img/on.gif";


    //2. 将所有div标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
    var divs = document.getElementsByTagName('div');
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "<font color='red'>very good</font>"; 
    }


    //3. 使所有的复选框呈现选中状态
    var ins = document.getElementsByName('hobby');
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;//选中
    }

</script>

6、JS事件监听

6.1、事件绑定

点击事件：

示例代码

效果

6.2、常见事件

javascript 复制代码 
<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>

6.3、事件监听案例

完整代码

javascript 复制代码 
<!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>JS-事件-案例</title>
</head>
<body>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick
    function on(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/on.gif";
    }

    function off(){
        //a. 获取img元素对象
        var img = document.getElementById("light");

        //b. 设置src属性
        img.src = "img/off.gif";
    }



    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
    function lower(){//小写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为小写
        input.value = input.value.toLowerCase();
    }

    function upper(){//大写
        //a. 获取输入框元素对象
        var input = document.getElementById("name");

        //b. 将值转为大写
        input.value = input.value.toUpperCase();
    }



    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = true;
        }

    }
    
    function reverse(){
        //a. 获取所有复选框元素对象
        var hobbys = document.getElementsByName("hobby");

        //b. 设置未选中状态
        for (let i = 0; i < hobbys.length; i++) {
            const element = hobbys[i];
            element.checked = false;
        }
    }



</script>
</html>

二、Vue快速入门

1、什么是Vue?

1.1、MVVM

1.2、Vue双向数据绑定书写流程

javascript 复制代码 
<!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>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
</script>
</html>

2、Vue的常用指令（v-xxx）

2.1、v-bind

使用v-bind绑定到了数据模型上的变量，这时，如果数据模型变量，那么v-bind的元素也会变

2,2、v-model

2.3、v-on

代码

2.4、v-if（符合条件才渲染）

结果

2.5、v-show（全部渲染）

2.6、v-for

javascript 复制代码 
<!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>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
</script>
</html>

2.7、案例：通过Vue完成表格数据的渲染展示

javascript 复制代码 
<!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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

3、Vue的生命周期

3.1、生命周期状态图

3.2、mounted示例代码

javascript 复制代码 
<!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>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

3.3、小结

相关推荐
To_OC3 小时前
别再串行写 await 了，Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
To_OC3 小时前
LC 17 电话号码的字母组合：我的回溯算法，就是从这道题开窍的
javascript·算法·leetcode
vipbic3 小时前
中后台越做越乱后，我用插件化把它救回来了
前端·vue.js
Hyyy3 小时前
Computer Use 适合做什么，不适合做什么——一次真实使用后的思考
前端
小和尚同志4 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble5 小时前
c端系统，其实更像一个信息展示平台
前端
你怎么知道我是队长5 小时前
JavaScript的变量和数据类型介绍
开发语言·javascript·ecmascript
李姆斯5 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜6 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司6 小时前
瑞芯微RV1126B开发板（EASY-EAI-PI2） INI文件操作
java·前端·javascript·网络·人工智能
热门推荐
01GitHub 镜像站点02幻兽帕鲁 - 服务器管理员权限与 GM 命令完全指南03AI科技热点日报 | 2026年07月01日042026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片052026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf062026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？092026 年 AI 大模型 & AI 编程工具实战全总结10【AI】2026 年具身智能模型和世界模型总结