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、小结

相关推荐
珹洺5 分钟前
从 HTML 到 CSS：开启网页样式之旅（二）—— 深入探索 CSS 选择器的奥秘
前端·javascript·css·网络·html
竺梓君16 分钟前
JavaScript内存管理机制解析
javascript·全栈
冰冻果冻29 分钟前
vue--制作随意滑动的相册
前端·javascript·vue.js
GISer_Jing1 小时前
前端测试工具（Jest与Mock）
前端·测试工具
licy__1 小时前
HTML 元素类型介绍
前端·css·html
谢尔登1 小时前
【Next】路由处理
服务器·javascript·css
一雨方知深秋1 小时前
WEB APIS（DOM对象，操作元素内容，属性，表单属性，自定义属性，定时器）
开发语言·前端·javascript
EasyNTS1 小时前
视频流媒体播放器EasyPlayer.js网页直播/点播播放器：如何清除浏览器缓存
开发语言·javascript·缓存
三金121381 小时前
整站使用Vue(工程化)
前端·javascript·vue.js
爱喝羊奶1 小时前
0 基础 新手应该看的AI编程导论
前端
热门推荐
01Docker 夺命连环 15 问02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码