JavaWeb开发-02-JavaScript-Vue

程序员希西子

已于 2023-09-19 20:27:22 修改

阅读量98

点赞数 1

分类专栏： JavaWeb开发文章标签：前端

于 2023-05-24 18:47:46 首次发布

本文链接：https://blog.csdn.net/wangjh11234/article/details/130814153

版权

JavaWeb开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JS

一.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>JS引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->

    <!-- 外部脚本 -->
    <script src="/JS/Demo.js"></script>

</head>
<body>
    
    
    
</body>
    
</html>

alert('Hello JS');

二.js基础语法

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>
    
    

</head>
<body>
    
    
    
</body>
<script src="/JS/Demo.js"></script>
</html>

//方式一:弹出警告框
window.alert("hello word1");

//方式二:直接写入HTML页面中
document.write("hello word2");

//方式三:控制台输出
console.log("hello word3");

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>JS引入方式</title>
    
    

</head>
<body>
    
    
    
</body>
<script src="/JS/Demo.js"></script>
</html>

//定义变量
// var a = 10;
// a = "坤坤";

// alert(a);

//特点1:作用域比较大,全局变量

//特点2:可以重复定义的
// {
//     var x = 1;
//     alert(x);
//     var x = 'A';


// }

//let : 局部变量; 不能重复定义
// {
//     let x = 1;
//     //let x = 2;
//     alert(x);
// }
// alert(x);

//const: 常量, 不能给改变的
const pi = 3.14;
pi = 3.15;  //在控制台报错!
alert(pi);

3.数据类型运算符流程控制语句

//原始数据类型

document.write(typeof 3 + "\n");    //number
document.write(typeof 3.14 + "\n"); //number

document.write(typeof 'A' + "\n");  //String
document.write(typeof "A" + "\n");  //String
document.write(typeof 'hello' + "\n");  //String

document.write(typeof true + "\n"); //boolean
document.write(typeof false + "\n");    //boolean

document.write(typeof null + "\n"); //object

document.write(typeof b + "\n");    //undefined

var a;
document.write(typeof a + "\n");    //undefined

var age = 18;
var age2 = "18";
var age3 = 18;

alert(age == age2); //true
alert(age === age2); //false
alert(age === age3); //true

类型转换 - 其他类型转换为数字
alert(parseInt("12"))   //12
alert(parseInt("123Q2W"))   //123
alert(parseInt("a46"))  //NaN (not a number)

类型转换 - 其他类型转换为boolean
if(0){
    alert("0 转换为 false");    //不执行
}
if(NaN){
    alert("NaN 转换为 false");    //不执行
}
if(-1){
    alert("0 转换为 true");    //执行
}


if(""){
    alert("false");    //不执行
}
if(null){
    alert("false");    //不执行
}
if(undefined){
    alert("false");    //不执行
}

三.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>标题</title>
</head>
<body>
    
</body>
<script>
    //方式一:
    //定义函数
    function add(a, b){
        return a + b;
    }
    //调用函数
    var rs1 = add(10, 20);
    alert(rs1);
    
    //方式二:
    var add = function(a, b){
        return a + b;
    }
    //调用函数
    var rs2 = add(40, 20);
    //var rs2 = add(40, 20, 60, 80); //即使大于形参,也只能接受方法体的个数
    alert(rs2);
</script>
</html>

四.js对象

1.Array

<!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>
    
</body>
<script>
    //定义数组  --> 相当于Java中的集合
    //var arr = new Array(1,2,3,4);
    var arr = [1,2,3,4];

    console.log(arr[0]);    //1
    console.log(arr[1]);    //2
    
    console.log(arr[9]);    //undefined
    console.log(arr[8]);    //undefined
    //特点:长度可变,类型可变
    //var arr = [1,2,3,4];
    arr[10] = 50;
    console.log(arr[10]);   //50

    arr[8] = '你好'; 
    arr[9] = 'A'; 

    console.log(arr[9]);    //A
    console.log(arr[8]);    //你好

    
    //遍历数组
    console.log("数组开始遍历");  
     for(let i = 0; i <= arr.length; i++){
        console.log(arr[i]);
    }
    
    //forEach: 遍历数组中有值的元素
    arr.forEach(function(e){
        console.log(e);    
    })
    
    console.log("====================");
    //ES6 箭头函数: (...) => {}
    arr.forEach(e1 => {
            console.log(e1);
    });

    //push: 添加元素到数组末尾
    arr.push(7, 8, 9);
    console.log(arr);
    
    //splice: 删除元素
    arr.splice(2, 2);   //索引 2 开始,删除2个元素
    console.log(arr);


</script>
</html>

2.String

<!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>
    
</body>
<script>
    //定义字符串对象
    var str1 = new String(" Hello String! ");
    var str =  "Hello String!";
    
    console.log(str);   //Hello String!

    //length
    console.log(str.length);    //13

    //charAt
    console.log(str.charAt(3)); //l
    console.log(str.charAt(4)); //o

    //indexOf
    console.log(str.indexOf("lo")); //3

    //trim
    console.log(str1.length);    //15  -> " Hello String! "
    var s = str1.trim();
    console.log(s.length);  //13 -> "Hello String!"

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

    
</script>
</html>

3.JSON

<!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>
    
</body>
<script>
    //自定义对象
    var user = {
        name : "Tom",
        pwd : "123456",
        age : 18,
        gender : "male",

        // eat : function(){
        //     alert("吃饭!");
        // }
        eat(){
            alert("吃饭!");
        }
    }


    console.log(user.name); //Tom
    console.log(user.eat);  
    // ƒ eat(){
    //         alert("吃饭!");
    //     }

    user.eat();

    
</script>
</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>JS对象</title>
</head>
<body>
    
</body>
<script>
    //自定义对象
    var user = {
        name : "Tom",
        pwd : "123456",
        age : 18,
        gender : "male",

        // eat : function(){
        //     alert("吃饭!");
        // }
        eat(){
            console.log("吃饭!");
        }
    }


    console.log(user.name); //Tom
    console.log(user.eat);  
    // ƒ eat(){
    //         alert("吃饭!");
    //     }
    user.eat();

    //定义JSON
    var userStr = '{"name":"Jerry", "age":18, "addr":["北京","上海","西安"]}';
    console.log(userStr.name);  //undefined

    //JSON字符串转化JS对象
    var obj = JSON.parse(userStr);  
    console.log(obj.name);  //Jerry'
    //打印上海
    console.log(obj.addr[1]);   //上海
    //在addr加南昌
    obj.addr.push("南昌");
    console.log(obj.addr);  //['北京', '上海', '西安', '南昌']

    //js对象转换成JSON
    var newUserStr = JSON.stringify(obj);
    console.log(newUserStr);    //{"name":"Jerry","age":18,"addr":["北京","上海","西安","南昌"]}

    
</script>
</html>

4.BOM

<!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>
    
</body>
<script>
    //1.BON - window对象
    //获取
    // window.alert("Hello BOM1");
    // alert("Hello BOm2");

    //方法
    //confirm - 对话框 --确认:true; --取消:false
    // var flag = confirm("是否确定删除这条数据?");
    // alert(flag);
    
    //定时器 - setInterval -- 周期性地执行某一个函数
    // var count = 0;
    // setInterval(function(){
    //     count++;
    //     console.log("定时器执行了" + count + "次");
    // },2000); //单位:ms

    //定时器 - setTimeout -- 延迟指定时间执行一次
    // setTimeout(function(){
    //     console.log("setTimeout定时器执行了");
    // },3000);

    //2.BON - location对象:地址栏对象
    alert(location.href);
    
    location.href = "https://www.baidu.com";


</script>
</html>

5.DOM

<!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="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.获取Element元素
   //a.获取元素-根据ID获取
//     var img = document.getElementById('h1');
//     alert(img); //[object HTMLImageElement]


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

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

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

   //2.查询参考手册,属性,方法
   var div2 = document.getElementsByClassName('cls');
   var div1 = div2[0];
   div1.innerHTML = "iKun666"



</script>
</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>案例</title>
</head>
<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.点亮灯泡
   var img = document.getElementById('h1');
   img.src = "img/on.gif";

   //2.将所有div标签的内容后面加上: very good(红色字体)
   var div1 = document.getElementsByTagName('div');
//    div1[0].innerHTML = "小黑子666";
//    div1[1].innerHTML = "拿什么励志666";
    for (let i = 0; i < div1.length; i++) {
        const div2 = div1[i];
        div2.innerHTML += "<font color = 'redGreen'>666</font>";
    }

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


</script>
</html>

五.js事件监听

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>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">
    
</body>
<script>
    //方式一
    function on(){
        alert("我被点击了!")
    }

    //方式二:
    document.getElementById('btn2').onclick = function(){
        alert("哎呦你干嘛!")
    }

</script>
</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>JS-事件-常见事件</title>
</head>

<body onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<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>
</html>

3.案例

//将值转换为小写
//  变量.value = document.value.toLowerCase();


//将值转换为大写
//  变量.value = document.value.toUpperCase();

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="Vue/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>

一.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="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接一:点我一下</a><br><br>
        <a :href="url">链接二:点我一下</a><br><br>

        <input type="text" v-model="url">


    </div>
    
    
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{
            url: "https://www.baidu.com"
        }
    })


</script>
</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>Vue-快速入门</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮1" v-on:click="handle()">

        <input type="button" value="按钮2" @click="handle()">

    </div>
    
    
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{
            
        },
        methods:{
            handle: function(){
                alert("哎呦你干嘛")
            }
        }
    })


</script>
</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>Vue-快速入门</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        年龄 <input type="text" v-model="age">经判定为:
        <span v-if="age <= 35">年轻人(35以下)</span>
        <span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
        <span v-else="age > 60">老年人(60以上 )</span>

        <br><br>

        年龄 <input type="text" v-model="age">经判定为:
        <span v-show="age <= 35">年轻人(35以下)</span>
        <span v-show="age > 35 && age < 60">中年人(35-60)</span>
        <span v-show="age > 60">中年人(35-60)</span>
    </div>
    
    
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{
            age: 200
        },
        methods:{
           
        }
    })


</script>
</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>Vue-快速入门</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for="addresses in address">{{addresses}}</div><hr>
        <div v-for="(addresses, index) in address">{{index + 1}} : {{addresses}}</div><br>
    
        
    </div>
    
    
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{
            address : ["北京", "上海", "武汉", "广州", "南昌"]
        },
        methods:{
           
        }
    })


</script>
</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>Vue-快速入门</title>
    <script src="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        <table width="60%" border="1" cellspacing="0" align="center">
            <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.sex == 1">男</span>
                    <span v-if="user.sex == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score < 60" style="color: red;">不及格</span>
                    <span v-else-if="user.score > 60 && user.score <80">及格</span>
                    <span v-else="user.score >= 80 && user.score <=100">优秀</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{
            users: [
                {name: "Tom", age: 20, sex: 1, score: 78},
                {name: "Rose", age: 18, sex: 2, score: 86},
                {name: "Jerry", age: 26, sex: 1, score: 98},
                {name: "Tony", age: 30, sex: 1, score: 52},

        ]},
        methods:{
           
        }
    })


</script>
</html>

二.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="Vue/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管的区域
        data:{

            },
        methods:{
           
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端");
        }
    })


</script>
</html>