JavaScript、Vue、Ajax

最新推荐文章于 2024-11-12 11:19:19 发布

叫我罗少

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量143

点赞数 3

文章标签： javascript vue.js ajax

本文链接：https://blog.csdn.net/2301_76600558/article/details/131969392

版权

JavaScript常用对象

Array对象方法

String对象方法

自定义对象

var 对象名称 = {
    属性名称1:属性值1,
    属性名称2:属性值2,
    ...,
    函数名称:function (形参列表){},
	...
};

调用方式：对象.属性名/对象.函数名称

JSON

本质就是一个字符串，该字符串一定的格式要求的

var 变量名 = '{"key":value,"key":value,...}';

如果它是一个 js 对象，我们就可以通过 js对象.属性名 的方式来获取数据。JS 提供了一个对象 JSON ，该对象有如下两个方法：
parse(str) ：将 JSON串转换为 js 对象。使用方式是： var jsObject = JSON.parse(jsonStr);
stringify(obj) ：将 js 对象转换为 JSON 串。使用方式是：var jsonStr = JSON.stringify(jsObject)

 var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
    alert(jsonStr);
	
    //2. 将 JSON 字符串转为 JS 对象
    let jsObject = JSON.parse(jsonStr);
    alert(jsObject)
    alert(jsObject.name)
    
    //3. 将 JS 对象转换为 JSON 字符串
    let jsonStr2 = JSON.stringify(jsObject);
    alert(jsonStr2)

BOM

浏览器对象模型，允许JavaScript与浏览器进行对话， JavaScript 将浏览器的各个组成部分封装为对象。

BOM 中包含了如下对象：

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window对象

window 对象是 JavaScript 对浏览器的窗口进行封装的对象。该对象不需要创建直接使用 window，其中 window. 可以省略。

Window对象函数

setTimeout(function,毫秒值) : 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值) :在一定的时间间隔后执行一个function，循环执行

Location对象

Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。使用 window.location获取，其中window. 可以省略

Location对象常用的只有一个属性 href

alert("要跳转了");
location.href = "https://www.baidu.com";

DOM

文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

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

作用：

JavaScript 通过 DOM，就能够对 HTML进行操作了

改变 HTML 元素的内容

改变 HTML 元素的样式（CSS）

对 HTML DOM 事件作出反应

添加和删除 HTML 元素

获取 Element对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

getElementById()：根据id属性值获取，返回单个Element对象
getElementsByTagName()：根据标签名称获取，返回Element对象数组
getElementsByName()：根据name属性值获取，返回Element对象数组
getElementsByClassName()：根据class属性值获取，返回Element对象数组

事件监听

事件监听是JavaScript 可以在事件被侦测到时==执行一段逻辑代码

JavaScript 提供了两种事件绑定方式：

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数

<input type="button" onclick="on()">

下面是点击事件绑定的 on() 函数
● 方式二：通过 DOM 元素属性绑定如下面代码是按钮标签，

<input type="button" id="btn">

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

事件属性

Vue

Vue 是前端框架，用于化简JS中的DOM操作，简化书写

vue使用步骤

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

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

2，在JS代码区域，创建Vue核心对象，进行数据绑定

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：

- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到

new Vue({
    el: "#app",
    data: {
        return {
            username: ""
        }
    }
});

3，编写视图

<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>

插值表达式：

- 形式：{{ . . . }}

- 内容可以是：

A. 变量：{{message}}

B. 三元表达式：{{message ? '有值':'没值'}}

C. 函数调用：{{message.toUpperCase()}}

D. 算术运算：{{10 + 20}}

常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性

Ajax

作用

与服务器进行数据交换

异步交互

Axios

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

引入 axios 的 js 文件

<script src="js/axios-0.18.0.js"></script>

使用axios 发送请求，并获取响应结果，发送 get 请求

axios({
  method:"get",
  url:"http://yapi.eehp.cn/mock/47/web/day02/emp/list"
}).then((result) => {
  console.log(result.data);
});

叫我罗少

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫