JavaWeb - 4 - Vue & Ajax

发布于：2024-09-19 ⋅ 阅读:(9) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

一.Vue

Vue

· Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

· 基于MVVM（Model-VIew-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

· 官网：https://cn.vuejs.org/

什么是框架？

        是一个半成品软件，是一套可重用的、通用的、软件基础代码模型。基于框架进行开发，更加快捷和高效

1.1 Vue快速入门

· 新建HTML页面，引入Vue.js文件

· 在JS代码区域，创建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>

插值表达式

        形式：{{表达式}}

        内容可以是：变量、三元运算符、函数调用、算数运算

1.2 Vue常用指令

常用指令

· 指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如：v-if、v-for……

· 常用指令

指令 作用
v-bind 为HTML标签绑定属性值，如设置href，css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

1.2.1 v-bind

        为HTML标签绑定属性值，如设置href，css样式等

1.2.2 v-model

        在表单元素上创建双向数据绑定

注意事项：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

<!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">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>

        <input type="text" v-model="url">
    </div>
</body>

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

1.2.3 v-on

        为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="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
    </div>
</body>

<script>
    //定义Vue对象
    new Vue({
        el:"#app", //vue接管区域
        data:{
            
        },
        methods:{
            handle:function(){
                alert("你点了我一下……")
            }
        }
    })
</script>
</html>

1.2.4 v-if、v-else-if、v-else

        条件性的渲染某元素，判定为true时渲染，否则不渲染

1.2.5 v-show

        根据条件展示某元素，区别在于切换的是display属性的值

<!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="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">老年人（60及以上）</span>
    </div>
</body>

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

1.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-指令</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>

1.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-else="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <!-- <span v-if="user.score>=90">优秀</span>
                    <span v-else-if="user.score<90 && user.score>=60">及格</span>
                    <span style="color:red;" v-else="user.score<60">不及格</span> -->
                    <span v-if="user.score>=90">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span style="color:red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
</body>

<script>
    //定义Vue对象
    new Vue({
        el:"#app", //vue接管区域
        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>

1.3 Vue生命周期

生命周期

· 生命周期：指一个对象从创建到销毁的整个过程

· 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

mounted：挂载完成，Vue初始化成功，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="js/vue.js"></script>
</head>

<body>
    <div id="app">

    </div>
</body>

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

二.Ajax

2.1 Ajax

· 概念：Asynchronous JavaScript And XML，异步的JavaScript和XML

· 作用：

        数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据

        异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等

同步和异步

原生Ajax

        1.准备数据地址

        2.创建XMLHttpRequest对象：用于和服务器交换数据

        3.向服务器发送请求

        4.获取服务器响应数据

<!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>原生Ajax</title>
</head>

<body>
    <input type="button" value="获取数据" onclick="getData()">
    <div id="div1"></div>
</body>

<script>
    function getData(){
        //1.创建XMLHttpRequest
        var xmlHttpRequest = new XMLHttpRequest();

        //2.发送异步请求
        xmlHttpRequest.open('GET','https://www.baidu.com'); //网址无法成功
        xmlHttpRequest.send(); //发送请求

        //3.获取服务器响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

2.2 Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发

官网：Axios中文文档 | Axios中文网 (axios-http.cn)

Axios入门

1.引入Axios的js文件

2.使用Axios发送请求，并获取响应结果

Axios请求方式别名

        axios.get(url[,config])

        axios.delete(url[,config])

        axios.post(url[,data[,config]])

        axios.put(url[,data[,config]])

<!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>Ajax-Axios</title>
    <script src="js/axios-0.18.0.js"></script>
</head>

<body>
    <input type="button" value="获取数据GET" onclick="get()">
    <input type="button" value="删除数据POST" onclick="post()">
</body>

<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method:"get",
        //     url:"https://www.baidu.com"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.get("https://www.baidu.com").then(result => { //网址无法成功
            console.log(result.data);
        })
    }
    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method:"post",
        //     url:"https://www.baidu.com",
        //     data:"id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("https://www.baidu.com","id=1").then(result => { //网址无法成功
            console.log(result.data);
        })
    }
</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>Ajaxs-axios</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.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-else="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <!-- <span v-if="user.score>=90">优秀</span>
                    <span v-else-if="user.score<90 && user.score>=60">及格</span>
                    <span style="color:red;" v-else="user.score<60">不及格</span> -->
                    <span v-if="user.score>=90">优秀</span>
                    <span v-else-if="user.score>=60">及格</span>
                    <span style="color:red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
</body>

<script>
    //定义Vue对象
    new Vue({
        el:"#app", //vue接管区域
        data:{
            users:[]
        },
        mounted() {
            //发送异步请求，加载数据
            axios.get("https://www.baidu.com").then(result => {
                this.users = result.data.data;
            })
        },
        methods:{
            
        }
    })
</script>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布