前端基础 JS Vue3 Ajax

发布于:2025-07-25 ⋅ 阅读:(17) ⋅ 点赞:(0)

一、JS

alert(' .... ') //弹出框

console.log(' ....... ') //输出到控制台浏览器

JS引入方式:1、内部脚本:将JS代码定义在HTML页面中位于<script></script>标签之间

                       2、外部脚本:将JS代码写在外部JS文件中,在HTML页面中使用

                                <script src = ' ./js/eventDemo.js'></script>引入      (src就是js的地址)

在js中引入其他js:import { printLog } from "地址",{ }中间是其他js文件中的函数,这就是模块化JS

要想使用JS文件中的函数:1、这个函数必须加上export 关键字

                                            2、在html页面中,必须加上type=”module“代表使用的时模块化的js

html中:
<script src = "js/eventDemo.js" type="module"> 
</script>

eventDemo.js:
import {printlog} from "./utils.js" ;
  //click: 鼠标点击事件
    document.querySelector('#b2').addEventListener('click', () => {
      printlog("我被点击了...");
  })


utils.js:
//export使代码能被别的地方使用
export function printlog(msg){
  console.log(msg);
}

1、函数

函数:是被设计用来执行特定任务的代码块,方便程序的封装复用。

通过function关键字进行定义,语法:

  //1. 函数的定义-具名函数

    function add(a, b) {
      return a + b;
    }
    let sum = add(10, 20);
    alert(sum); 


 //2. 函数的定义-匿名函数
   
     //2.1 函数表达式

    let add = function(a,b){
      return a-b;
    }
    let result = add(20,10);
    alert(result);


    //2.2 箭头函数

    let add = (a , b)=> { 
        return a + b;
    }
    let result = add(100,200);
    alert(result);

2、自定义对象

let 对象名 = {

    属性名1:属性值1,
    属性名2:属性值2,
    属性名3:属性值3,
    方法名: function (形参列表) { }

}

如:

let user = {

    name: 'Tom',
    age: '18',
    gender: '男',
    sing: function () {
    alert(this.name + '悠悠地唱着最炫的民族风')
    }

    //方法简化方式:
    sing() {
        alert(this.name+'唱着最炫的民族风')
    }
}

调用格式:

对象名.属性名;
对象名.方法名();

console.log(user.name);
user.sing();

注:在自定义对象时尽量不要使用箭头函数,因为箭头函数中的this并不指向当前对象,而是指向当前对象的父级对象。

3、JSON

JSON.stringify (...) 将JS对象转为JSON格式的字符串

JSON.parse (...) JSON格式的字符串转为JS中的对象 

    let user = {
      name: 'Tom',
      age: '18',
      gender: '男',
      sing() {
        alert(this.name + '悠悠地唱着最炫的民族风');
      }
    }

    //js对象——>json字符串(JSON.stringify)
    alert(JSON.stringify(user));

    //json字符串——>js对象(JSON.parse)  
    let personJson = '{"name":"Tom","age":"18","gender":"男"}';
    alert(JSON.parse(personJson).name);

4、DOM

将HTML文件中,所有的元素都封装成了JS对象,采用面向对象的方式来操作页面中的所有的元素。

Document:整个文档对象    整个HTML

ELement:元素对象             每一个html的标签都会封装成一个元素对象 <html> <head> <body>等

Attribute:属性对象              如 href等属性

Text:文本对象                     文本内容

Comment:注释对象            注释

DOM操作核心思想:将网页中所有的元素当作对象来处理。

操作步骤:

  • 获取要操作的DOM元素对象
  • 操作DOM对象的属性或方法(查看文档或AI)   

document.querySelector('选择器') 根据css选择器来获取匹配到的第一个元素

document.querySelectorAll('选择器')                             获取匹配到的所有元素

5、事件监听

语法:事件源.addEventListener('事件类型',事件触发执行的函数);

三要素:事件源:哪个DOM元素触发了事件

              事件类型:用什么方式触发,比如:鼠标单击 click

              事件触发执行的函数:要做什么事

 <input type="button" id="btn1" value="点我一下试试1">
  <input type="button" id="btn2" value="点我一下试试2">

  <script>
    //事件监听,可以多次绑定同一事件
    document.querySelector('#btn1').addEventListener('click', function () {
      alert('试试就试试');
    });
    document.querySelector('#btn1').addEventListener('click', function () {
      alert('我还就得试试就试试');
    });
  </script>

常见事件:

  • click:鼠标点击
  • mouseenter:鼠标移入
  • mouseleave:鼠标移出

  • keydown:键盘按下触发
  • keyup:键盘抬起触发

  • focus:获得焦点触发
  • blur:失去焦点触发

  • input:用户输入时触发
  • submit:表单提交时触发

二、Vue3 

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

1、使用Vue

  • 引入Vue模块
  • 创建Vue程序的实例化,控制视图的元素
  • 准备元素,被Vue控制
<body>
  <div id="app">
     <!-- {{}}插值表达式渲染数据 -->
    <h1>{{message}}</h1>
    <h1>{{count}}</h1>
  </div>

  <script type="module">
    //引入模块
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    //创建应用实例(调用createApp函数,在里面传递一个对象{})
    createApp({
      // 准备数据
      //对象中声明方法data,之后声明方法的返回值,返回值就是所要定义的数据 ,要返回对象,返回值就是对象,对象中声明变量,变量的值就是数据 */
      data() {
        return {
          count: 100,
          message: 'Hello Vue!'
        }
      },
    }).mount('#app');/* 作用:创建的createApp实例,接管了id为"app"的div标签 */
  </script>

2、常用指令

v-for :  <tr v-for="(item, index) in items" :key="item.id">{{item}}</tr>

  • item 为遍历的数组
  • item 为遍历出来的元素
  • index 为索引/下标 从0开始;可以省略 省略index语法:v-for = " item in items" 
  • key:给元素添加唯一标识,便于vue进行列表项的正确排序复用,提升渲染性能,推荐使用id作为key。

v-bind:    v-bind:属性名=“属性值”  

     简化::属性名= “属性值”

v-if:      v-if=" 表达式 "      要么渲染,要么不渲染,不频繁切换的场景

v-show:  v-show = '' 表达式 ''   全都渲染,控制显示与隐藏,用于频繁切换的场景

v-model: v-model = " 变量名 ''

v-on: v-on:事件名 = “方法名”

       简写: @事件名 = “ ... ”

 <!-- 表格主体内容 -->
            <tbody>
                <!-- 想让哪个标签循环展示多次,就在哪个标签上使用v-for指令 -->
                <tr v-for="(e, index) in empList" :key="e.id">
                    <td>{{index + 1}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.gender ==1?'男' : '女'}}</td>
                    <!-- 插值表达式不能出现在标签内部 -->
                    <!-- <td><img class="avatar" src="{{e.image}}" alt="{{e.name}}"></td> -->
                    <td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>

                    <!-- v-if 控制元素的显示与隐藏 -->
                    <td>
                        <span v-if="e.job == 1">班主任</span>
                        <span v-else-if="e.job == 2">讲师</span>
                        <span v-else-if="e.job == 3">学工主管</span>
                        <span v-else-if="e.job == 4">教研主任</span>
                        <span v-else-if="e.job == 5">咨询师</span>
                        <span v-else>其他</span>
                    </td>

                    <!-- v-show 控制元素的显示与隐藏
                    <td>
                        <span v-show="e.job == 1">班主任</span>
                        <span v-show="e.job == 2">讲师</span>
                        <span v-show="e.job == 3">学工主管</span>
                        <span v-show="e.job == 4">教研主任</span>
                        <span v-show="e.job == 5">咨询师</span>
                    </td> -->

                    <td>{{e.entrydate}}</td>
                    <td>{{e.updatetime}}</td>
                    <td class="action-buttons">
                        <button type="button">编辑</button>
                        <button type="button">删除</button>
                    </td>
                </tr>

            </tbody>
        </table>
//使用v-model分别将数据双向绑定
<input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">
<select id="gender" name="gender" v-model="searchForm.gender">
<select id="position" name="position" v-model="searchForm.job">
            <button type="button" v-on:click="search">查询</button>
            <button type="button" @click="clear">清空</button>


 <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例(调用createApp函数,在里面传递一个对象{})
        createApp({ 
            // 准备数据
            data() {
                return {
                    searchForm: {//定义数据模型,采集员工搜索表单数据   ,是一个对象
                        name: '',
                        gender: '',
                        job: ''
                                }
                        }
                    },
                //声明methods属性,在里面定义方法
             methods: {
                //方法
                search(){
                    //将搜索条件,输出到控制台
                    console.log(this.searchForm);
                },
                clear(){
                    this.searchForm = {
                        name: '',
                        gender: '',
                        job: ''
                    }
                }
            }
 
</script>

createApp中data是声明数据的

                    与data平级的method: {} 是定义方法。

三、Ajax

作用:通过ajax可以向服务器端发送请求,并获取服务器响应的数据。

           异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术。

<body>
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script> //这里的js是已经提供的,所以自己引入官方js文件
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {///* 事件监听器 */
            axios({
                method: 'GET',
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
            }).then((result) => {  //成功回调函数
                console.log(result.data);  
            }).catch((error) => {   //失败回调函数
                console.log(error);
            })
        })
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            axios({
                method: 'POST',
                url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
                data: 'id=1'  //post请求方式,请求体的数据
            }).then((result) => {   //成功回调函数
                console.log(result.data);
            }).catch((error) => {   //失败回调函数
                console.log(error);
            })
        })
    </script>
</body>

另一种写法(推荐写法):

axios.请求方式(url [,data[,config]])

<body>
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script>
    <script>
        //发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {
            axios.get(' https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
                console.log(result.data);
            }).catch((error) => {
                console.log(error);
            })
            console.log('++++++++++++++++++++++++++++');
        })
        //发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {
            axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then((result) => {
                console.log(result.data);
            }).catch((error) => {
                console.log(error);
            })
        })
    </script>
</body>

使用async & await使异步变为同步

await关键字只在async函数内有效,await关键字取代then函数,就不用写成功失败回调了。

  methods: {
                //方法
            async search() { //async(加在search前) + await(加在axios请求服务器前)让异步操作变为同步
                 
                   //让异步变成同步操作,即会等待服务器响应
                      let result = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`)
                       this.empList = result.data.data 
                }

 Vue生命周期

生命周期八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子方法)

声明与生命周期相关的钩子方法,需要与data,method 平级,

必须掌握的 mounted  在这个方法中可以发送请求,获取数据,用于加载就查询一次

 //钩子函数
            mounted(){
                //当页面加载完成后,自动调用search方法
                this.search();
            }


网站公告

今日签到

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