526互联

Javascript、axios、vue基础命令快速学习

发布时间 2023-10-14 22:19:10作者: 201812

1.js: JavaScript

基础学习

JavaScript基础学习

简单案例

1.点击img1，则展示img1图片默认，点击img2则展示img2图片
2.输入框鼠标聚焦onfocus后，显示小写toLowerCase()，失去焦点onblur后显示大写toUpperCase()
3.点击全选按钮，所有复选框为被选中状态，点击反选则取消勾选状态
JavaScript案例

 

2.Vue2入门

官方文档：介绍 — Vue.js (vuejs.org)

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

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

2.1下载Vue.js文件，引入到项目中

<script src="js/vue.js"></script>

2.2Vue基础指令

v-bind:给标签属性绑定vue中定义的模型数据，可简写为：

v-model：给表单项双向绑定vue中定义的模型数据

v-on：给标签绑定事件，v-on:事件名="方法名()"，可简写为@事件名="方法名()"

v-if、v-else-if、v-else; v-show、v-for

 

<div id = "study01">
        <!-- 插值表达式{{message}}:将变量的值显示到标签内容体 -->
        <p>{{message}}</p>
        <!-- 展示到标签中使用 v-model -->
        <input type="text" v-model="message">
    </div>


    
    <div id = "study02">

        <!-- v-bind:href、v-model的使用 -->
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <br>
        <!-- 在text里面修改网址，也会直接修改了链接12的网址：双向绑定 -->
        <input type="text" v-model="url">
        <br>



        <!-- v-on使用:给HTML标签绑定事件 -->
        <input type="button" value="按钮1" v-on:click="handle()">
        <input type="button" value="按钮2" @click="handle()">
        <br>

        <!-- v-if、v-else-if、v-else; v-show -->
        年龄<input type="text" v-model="age">经判定，为：
        <span v-if="age <= 35">年轻人</span>
        <span v-else-if="age>35&&age<=60">中年人</span>
        <span v-else>老年人</span>
        <br>
        <!-- v-show -->
        年龄<input type="text" v-model="age">经判定，为：
        <span v-show="age <= 35">年轻人</span>
        <span v-show="age>35&&age<=60">中年人</span>
        <span v-show>老年人</span>
        <br>

        <!-- v-for -->
        <p v-for="ithem in addrs">{{ithem}}</p>
        <p v-for="(ithem,index) in addrs">{{index+1}},{{ithem}}</p>


    </div>


    
    



    <script>

        new Vue({
            //定义Vue接管的区域
            el:"#study01",
            data: {
                //定义模型数据
                message: "hello Vue"
            }

        })


        new Vue({
            
            el: "#study02",
            data: {

                url:"http://www.baidu.com",
                age: 20,
                addrs: ["北京","上海","广州","深圳"]
            },
            methods:{
                //定义绑定的自定义函数
                handle: function(){
                    alert("按钮被点击了...");
                }
            }
        })


    </script>

 

2.3案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue案例1</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>{{user.gender==1?"男":"女"}}</td>
                <td>{{user.score}}</td>
                <td v-if="user.score<60" style="color: red;">不及格</td>
                <td v-else-if="user.score>=60&&user.score<80">及格</td>
                <td v-else>优秀</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
                }
            ]
        }
    })
</script>

</html>

 3.Ajax和Axios

3.1Ajax

Asynchronous JavaScript And XML，异步的JavaScript和XML

作用：

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

异步交互：可以在不刷新加载整个页面的情况下，与服务器交换数据且更新部分网页的技术

3.2Axios

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

Axios对原生的Ajax进行封装，简化书写，快速开发。

3.2.1下载并引入Axios的js文件

3.2.2基础学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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({
            
            method: "get",//发送get请求
            url: "https://mock.apifox.cn/m1/2954513-0-default/emp/list"//请求地址

        }).then(result=>{
            console.log(result.data);//获取响应回来的数据要加data
        })


        //优化写法
        // axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{
        // console.log(result.data);
        // })

    }


    function post(){

        axios({

            method: "post",
            url: "https://mock.apifox.cn/m1/2954513-0-default/emp/deleteById",
            data: "id=10"  //获取id=10的数据
        }).then(result=>{
            console.log(result.data);
        })

    }


</script>

</html>

3.3.3案例

页面刷新 vue中：mounted()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios案例1</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<!-- 页面加载的函数vue中：mounted() -->
<body>
    
    <div id = "app">

        <table border="1" cellspacing="0" width="60%">

            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index+1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img v-bind:src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    {{emp.gender==1?"男":"女"}}
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>

</body>

<script>

    new Vue({

        el:"#app",
        data:{
            emps: [
                {name: "小名",img: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",gender: 1,job: "班主任",entrydate: "2018-09-10",updatetime:"2020-02-28"}
            ]
        },
        //mounted:页面加载完成后的方法
        mounted(){

            axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{
                //注意result.data得到响应回来的数据，该数据中又有code、message、data，数据在data中
                console.log(result.data.data);
                //给emps赋值
                //不能直接写emps=result.data.data,这里的emps不是指vue中的ems，而是外层的
                this.emps=result.data.data;
            })
        }
    })
</script>

</html>