0x02 js、Vue、Ajax

文章目录

js
Vue
- vue简介
- v-for
- v-bind
- v-if&v-show
- v-model&v-on
Ajax

js

核心概念

JavaScript ：是一门跨平台、面向对象的脚本语言，用来控制网页行为实现交互效果，由ECMAScript 、BOM 、DOM组成

ECMAScript：规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等

BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口

DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内的字体样式

js脚本引入html的方式

内部引入

html 复制代码

<body>
    <script>
        alert('hello world')
    </script>
</body>

引入外部js文件

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>外部脚本示例</title>
    <!-- 方式1：在 head 中引入（需谨慎） -->
    <script src="js/script.js"></script>
</head>
<body>
    <button onclick="showMessage()">点击我</button>

    <!-- 方式2：推荐在 body 末尾引入 -->
    <script src="js/script.js"></script>
</body>
</html>

javascript 复制代码

function showMessage() {
    alert("Hello from external JS!");
}

基础语法

变量和常量

JS中用let关键字来声明变量，javascript是弱类型语言，变量可以存放不同类型的值。

变量名：

只能用字母、数字、下划线、**美元符号（$）**组成，且数字不能开头
变量名严格区分大小写
不能使用关键字

JS中用const关键字来声明常量，一旦声明，常量的值就不能够改变（不可重新赋值）

alert是输出一个窗口，console是输出到控制台，这两种方式可以用于代码调试

数据类型：JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）

基本数据类型：

number：数字（整数、小数、NaN）
boolean：布尔。true、false
null：对象为空
undefined：当声明的变量未初始化时，该变量的值默认为undefined
string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

typeof 可以获取数据类型

反引号定义的是模板字符串，类似python中的f字符串

JavaScript中函数通过function关键字进行定义

javascript 复制代码

function functionName(参数1, 参数2 ...) {
    ...
}
function add(a, b) {
    return a + b;
}

调用

javascript 复制代码

let result = add(10, 20)
console.log(result)

匿名函数的定义

javascript 复制代码

//函数表达式
let add = function(a, b) {
    return a + b;
}

//箭头函数
let add = (a, b) => {
    return a + b;
}

对象类型

javascript 复制代码

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

let user = {
    name: 'Tom',
    age: 20,
    gender: '男',
    sing: function () {
        alert(`${this.name}唱着最炫民族风`)
    }
    //sing () {
    //    alert(`${this.name}唱着最炫民族风`)
    //}
}

//对象中的函数是可以进行简化的

需要注意的是在对象的方法中，使用箭头函数时，this并不是指向当前对象，而是指向当前对象的父对象

json：JavaScript Object Notation，Javascript对象标记法，由于json语法简单，层次结构鲜明，现多用作为数据载体，在网络中进行数据传输

DOM：Document Object Model，文档对象模型

将标记语言的各个组成部分封装为对应的对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

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

操作步骤：

获取要操作的DOM元素对象
操作DOM对象的属性或方法

获取DOM对象最灵活常用的方式是根据css选择器来获取DOM对象

javascript 复制代码

//获取匹配到的第一个元素
document.querySelector('选择器')
//获取匹配到的所有元素，返回的是一个数组
document.querySelectorAll('选择器')

事件监听

事件监听：JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称事件绑定 或注册事件

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

事件监听三要素：

事件源：哪个dom元素触发了事件，要获取dom元素
事件类型：用什么方式触发，比如：鼠标单击 click
事件触发执行的函数：要做什么事

常见事件

鼠标事件：click（鼠标点击）、mouseenter（鼠标移入）、mouseleave（鼠标移出）
键盘事件：keydown（键盘按下触发）、keyup（键盘抬起触发）
焦点事件：focus（获得焦点触发）、blur（失去焦点触发）
表单事件：input（用户输入时触发）、submit（表单提交时触发）

Vue

vue简介

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

渐进式指的是可以使用vue的一部分来构建我们的页面

html 复制代码

<body>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>

  <script type="module">
    // 1. 导入Vue
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          msg: 'Hello Vue'
        }
      }
    }).mount('#app')
  </script>

script标签中的type属性module指使用模块化js
.mount('#app')是指让vue接管id为app部分

v-for

在html标签上带有**v-**前缀的就是vue指令

v-for：用于列表渲染，遍历容器的元素或者对象的属性

html 复制代码

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

items为遍历的数组
item为遍历出来的元素
index为索引/下标，从0开始；可以省略v-for="item in items"
key是给元素添加的唯一标识，便于vue进行列表项的正确排序复用

v-bind

v-bind 的作用是动态地为HTML标签绑定属性值，如设置href、src、style样式等

语法：

html 复制代码

<img v-bind:src="item.image" width="30px">

简化后的语法：

html 复制代码

<img :src="item.image" width="30px">

动态的为标签的属性绑定值，不能使用插值表达式，需要使用v-bind指令。且绑定的数据需要在data中定义

v-if&v-show

v-if和v-show这两类指令都是用来控制元素的显示与隐藏的

html 复制代码

<span v-if="gender == 1">男生</span>
<span v-show="gender == 1">男生</span>

v-if：基于条件判断，来控制创建或移除元素节点，可以配合v-else-if、v-else进行使用

v-show：基于css样式display来控制显示与隐藏，都会渲染只是控制显示与隐藏

对用户来说达到的效果是一样的

v-model&v-on

v-model：在表单元素上使用，双向数据绑定。可以方便的获取或设置表单项数据

语法：

html 复制代码

v-model="变量名"

html 复制代码

<body>
    <input type="text" id=name v-model="searchForm.name">
    <script type="module">
    	import {createApp} from  'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data(){
                return {
                    searchForm: {
                        name: '',
                        gender: '',
                        job: ''
                    }
                }
            }
        }).mount('#container')
    </script>
</body>

v-model中绑定的变量，必须在data中定义

v-on：为html标签绑定事件（添加事件监听）

语法：v-on:事件名="方法名"

简写为：@事件名="方法名"

html 复制代码

<body>
    <div id="app">
        <button type="button" v-on:click="handle">点我</button>
        <button type="button" @click="handle">再点我</button>
    </div>
    <script type="module">
    	import {createApp} from  'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
            data(){...},
  			methods: {
                handle() {
                	console.log('hello v-on')   
                }
            }
        }).mount('#app')
    </script>
</body>

methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据

Ajax

Ajax：Asynchronous JavaScript And XML，异步的Javascript和XML

XML ：Ex tensible M arkup L anguage 可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

Ajax作用

数据交换：通过Ajax可以给服务器发送请求，并获取服务器相应的数据
异步交互：可以在不重新加载整个页面的情况下 ，与服务器交换数据并更新部分网页，如搜索联想、用户名是否可用的验证

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

要使用Axios，需要先引入，可以通过script标签进行引入

html 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>