vue总结

1，什么是json

JSON 是轻量级的文本数据交换格式。

2，JSON常用方法

JSON.parse() ：将数据转换为 JavaScript 对象。把字符串转换为数据对象过程,叫做反序列化

JSON.stringify() ：将 JavaScript 对象转换为字符串；把数据转换为字符串的过程,叫序列化

3，同步和异步的区别

同步：就是发出一个功能调用时，在没有得到结果之前，该调用就不返回或继续执行后续操作。 

异步：送⼀个请求，不需要等待响应返回，随时可以再发送下⼀个请求，即不需要等待。

3，什么是Ajax

Ajax 是⼀种⽤于创建快速动态⽹⻚的技术。是⼀种在⽆需重新加载整个⽹⻚的情况下，能够更新部分⽹⻚的技术。

核心对象：XMLHttpRequest ,用来实现异步数据请求（传输），实现无刷新效果（局部刷新），用户体验感更好。

4，XMLHttpRequest常用方法

XMLHttpRequest.open()：初始化一个请求

XMLHttpRequest.send(): 发送 HTTP 请求。

XMLHttpRequest.setRequestHeader() :设置HTTP请求头部。

5,操作步骤

1、创建XMLHttpRequest对象

2、调用open方法初始化请求（准备工作）

3、绑定事件：onreadystatechange （顺序可以调整）

4、设置请求头

5、调用send() 发送请求

 function f1() {
        //1、创建XMLHttPRequest
        let xhr = new XMLHttpRequest();
        //2、初始化请求信息
        xhr.open("get", "https://api.oioweb.cn/api/qq/nickname?qq=3080626744");
        //3、绑定事件处理
        //事件：当状态码改变后函数就会执行
        xhr.responseType = "json"; //默认值：test
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            let date = xhr.response;
            let nickname = document.querySelector("#nickname");
            if (date.code == 200) {
              nickname.innerHTML = date.result.nickname;
            } else {
              nickname.innerHTML = `<span>出错了</span>`;
            }
          }
        };
        xhr.send();
      }

6，什么是vue

 Vue是一种流行的JavaScript框架，用于构建用户界面和单页面应用程序

 // 创建Vue对象
      var vm = new Vue({
        el: "#app", //element:元素，dom元素的id
        // 以数据为导向，无需关注dom
        data: {
          //自定义的数据
          msg: "hello  vue",
          time: new Date().toLocaleTimeString(),
          table: `<table><tr><td>替代了innerHTML</td></tr></table>`,
          isShow: false,
        },
      });

7，插值语法{{}}

<h2>插值语法:{{msg}}</h2>

<h3>{{time}}</h3>

8，v-text，v-html，v-if，v-else

v-text 指令用于在元素内显示属性的值作为文本内容。

 v-html 指令用于在元素内显示属性的值作为HTML内容。

v-if 指令用于根据布尔值有条件地渲染元素。

v-else 指令与v-if一起使用，如果v-if条件为false，则渲染元素。

 <h3 v-text="msg"></h3>
      <div v-html="table" v-show="isShow"></div>
      <div v-if="isShow">我隐身了</div>
      <div v-if="Math.random() > 0.5">Now you see me</div>
      <div v-else>Now you don't</div>

9，v-for

• 遍历数组： v-for=“(item,index) in xxx”
• 遍历对象： v-for=“(value,key) in xxx”