JavaWeb——002JS & Vue快速入门

已于 2024-02-21 20:11:25 修改
阅读量1k 收藏 22
点赞数 21
分类专栏： JavaWeb 文章标签： vue.js javascript 前端
于 2024-02-21 20:10:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangyaqi/article/details/136204772
版权

目录

一、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.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、示例代码

<!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()

示例代码 

<!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是弱类型，所以存储任意的类型的数据（长度可变、类型可变）

示例代码：

//定义数组
    // 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

示例代码： 

<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自定义对象

示例代码：

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


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

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

 效果

5.4、JSON

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

 

 //定义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()

 

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

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

 Location对象：

//location
    alert(location.href);

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

5.6、DOM（文档对象模型）

 DOM树：

DOM可以进行的操作：

 DOM案例：

 更改标题内容和颜色

 删除最后一个

DOM分3种 

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

示例代码：

<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元素

//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]);
    // }

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


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

5.7、DOM案例

<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、常见事件

<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、事件监听案例

完整代码

<!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双向数据绑定书写流程

<!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

<!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完成表格数据的渲染展示

<!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示例代码

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

小琪爱学习
关注
  • 21
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——003Axios & Vue组件库（Element）
pangyaqi的博客
02-22 1407
render 是一个函数，它的作用就是将 App 当中定义的视图创建出对应的虚拟DOM 元素，然后挂载到 #app 这个区域为什么要学Element？主要是方便和优美-- button按钮 -->默认按钮主要按钮成功按钮
JavaWeb笔记——VUE&Element
weixin_62993347的博客
11-06 192
JavaWeb笔记——VUE&Element
零基础入门JavaWeb——Vue的数据绑定
星霖的博客
12-06 174
前端技术学习
JavaWeb笔记——Filter&Listener&Ajax
weixin_62993347的博客
10-29 492
JavaWeb笔记——Filter&Listener&Ajax Filter；Listener；Ajax；axios；JSON；案例
11_JavaWeb——Cookie&Session案例资源
05-01
此资源是我的博客11_JavaWeb——Cookie&Session中的案例资源，关于比较难以编写的工具类我已在博客中给出，下载此资源后可直接运行，实现登录注册功能。其中登录功能能够记住用户使得下次登录不需要重复输入用户名和...
12_JavaWeb——Filter&Listener案例资源
05-02
此资源与我的博客12_JavaWeb——Filter&Listener中的案例对应，在11_JavaWeb——Cookie&Session案例资源基础上加上了过滤器，实现了对未登录用户的拦截，希望有所帮助。
14_JavaWeb——Vue配套资源
05-09
在本资源包“14_JavaWeb——Vue配套资源”中，主要涵盖了使用Vue.js框架在JavaWeb项目中实现前端交互的功能。Vue.js是一个轻量级的JavaScript库，旨在简化前端开发，提供强大的数据绑定和组件化能力。下面将详细阐述...
Javaweb——疫情出入信息管理系统
06-23
疫情出入信息管理系统（其他修改版本） 项目开发工具 1. IDEA 2020.1 2. Navicat Premium 15 项目开发环境 1.java version“1.8.0.... 有源代码包，数据库文件和说明文件 详细信息分布内容参考 此项目仅供学习使用
javaweb——serlvet简单登录案例.rar
11-28
本案例"javaweb——serlvet简单登录案例"是用于演示如何使用Servlet实现一个基本的用户登录功能。 首先，Servlet生命周期包括加载、初始化、服务、销毁四个阶段。在这个登录案例中，我们关注的是初始化和服务阶段。...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 396
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
epitomizelu的专栏
07-20 1002
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 988
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
前端三大主流框架Vue React Angular有何不同？
2401_85955297的博客
07-21 1300
前端三大主流框架Vue React Angular比较，前端三大主流框架Vue React Angular有何不同？
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 213
vue3——利用自定义指令实现下拉框分页懒加载
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1038
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue2关于Object.defineProperty实现响应式
qq_50853940的博客
07-19 314
当 Vue实例化时，会遍历`data` 选项中的属性，并使用 `Object.defineProperty` 将它们转换为 getter 和 setter。这样一来，每当访问或修改这些属性时， Vue就能捕获到这些操作，从而实现响应式更新。`Object.defineProperty` 是一个 JavaScript 的方法，它允许我们精确地添加或修改对象的属性。在 Vue 中，它用来定义每个属性的 getter 和 setter。
基于vue3 + vite产生的 TypeError: Failed to fetch dynamically imported module
本郡主是喵
07-20 591
反正挺扯淡的，错误来源于基于ry-vue-plus来进行二次开发的时候遇到的问题。
vue网络请求
liu1shi的博客
07-23 161
【代码】vue网络请求。
JavaWeb——HTTP
10-07
JavaWeb中的HTTP指的是在JavaWeb开发中使用的超文本传输协议(HTTP)。HTTP是一种简单的请求-响应协议，通常在TCP/IP协议上运行。它通过客户端和服务器之间的交互来传输文本和超文本数据，如HTML、图片、音乐、视频等。JavaWeb开发中使用HTTP协议来实现客户端和服务器之间的通信，通过HTTP请求向服务器发送请求，服务器接收请求后处理并返回相应的HTTP响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值