前端技术栈和Vue学习总结

  • 前端技术栈和Vue学习总结已关闭评论
  • 24 次浏览
  • A+
所属分类:Web前端
摘要

1)let声明有严格的局部作用域​ 此时”console.log(“job= “+job)”将报错2)let只能声明一次


前端技术栈+Vue笔记

ES6新特性

1.let

1)let声明有严格的局部作用域

​ 此时"console.log("job= "+job)"将报错

	{         var name = "zy学习";         let job = "java工程师";         console.log("name= "+name)         console.log("job= "+job)     }     console.log("name2= "+name)     console.log("job= "+job) 

2)let只能声明一次

​ 此时业因为let的重复声明

​ 会报错SyntaxError (语法错误):redeclaration of let num2

//let 只能声明1次 var num1 = 100; var num1 = 200; console.log(num1); let num2 = 100; let num2 = 200; console.log(num2); 

3)当var变量 定义在后面,不会报错未定义,而是提升变量为undefind。

let变量则不会,会毫不留情的报错

//let不存在变量提升 var存在变量提升 console.log("x=",x); var x = "tom";  console.log("z=",z); let z = "zzz"; 

2.count

1)常量在定义时,需要赋值

//常量在定义时,需要赋值 const PI=3.14;//SyntaxError: missing = in const declaration console.log("PI= ",PI) 

2)常量赋值后不能修改

会报错 invalid assignment to const 'PI'

const PI=3.14; PI = 3.14159256; 

3.解构赋值

3.1 数组解构

1)传统方法

let arr = [1, 2, 3];         //解构(取出数据):         let x = arr[0], y = arr[1], z = arr[2];         console.log("x= " + x + " ,y= " + y + " ,z= " + z); 

2)ES6

let [a,b,c] = arr; console.log("a= " + a + " ,b= " + b + " ,c= " + c);  let [n1,n2,n3] = [100,200,300]; console.log("n1= " + n1 + " ,n2= " + n2 + " ,n3= " + n3); 

3.2 对象解构

注意事项:

1.{name,age}中的name,age 名字要和monster中的对象属性名保持一致

2.使用{ } 不要使用[ ]

3.{name,age}顺序无所谓

1)传统方法

//传统 对象名.属性名 let monster = {name: '牛魔王', age: 880}  console.log(monster.name," ",monster.age) 

2)ES6

let {name,age} = monster; console.log("name= ",name," ",",age= ",age)   console.log("age= ",age," ",",name= ",name)      let {name,age} = {name: '牛魔王', age: 880} 

方法的形参对象也可以解构

function f1(name,age){     console.log("f1-name= ",name," ",",f1-age= ",age) } f1(monster) 

3.3 方法解构

4.模板字符串

注意事项:

1.反引号 ``包裹

2.可作为普通字符串使用

3.可以原生输出代码 (意思是不需要加很多 n 拼接字符串)

let str1 = `for(int i = 0 ;i <10 ; i++){     System.out.println("i= "+i); }`; console.log("str1=", str1) 

4.字符串插入变量和表达式,使用${ }

​ *类似于el表达式

let name = "zy88"; let str2 = `学习=${name}`; let str3 = `1+2=${1 + 2}`; let n1 = 80; let n2 = 20; let str4 = `n1+n2=${n1 + n2}`; console.log("str2=", str2) console.log("str3=", str3) console.log("str4=", str4) 

5.字符串中调用函数

function sayHi(name) {     return "hi "+name; } let name2 = 'tom' let str5 = `sayHi()返回结果= ${sayHi(name2)}` console.log("str5=", str5) 

5.对象相关新特性

注意事项:

1.自动从上面找到相应变量

2.对象方法简写

1)传统对方法的定义

let monster = {     name:"红孩儿",     age:100,     sayHi:function () {         console.log("信息:name=",this.name,"age=",this.age)     } } monster.sayHi(); 

2)ES6对方法的定义

let monster2 = {     name:"红孩儿~",     age:900,     sayHi() {         console.log("信息:name=",this.name,"age=",this.age)     } } 

3.对象扩展运算符--拷贝

1)传统拷贝

let cat2 = cat; cat2.name = "大花猫" console.log("cat=>",cat) console.log("cat2=>",cat2) 

2)ES6深拷贝

let cat2 = {...cat};//深拷贝 cat2.name = "中花猫" console.log("cat=>",cat) console.log("cat2=>",cat2) 

3)ES6并对象

let monster = {name:"白骨精",age:100} let car = {brand:"xiaomi",price:149000} let monster_car = {...monster,...car} 

6.箭头函数

1)基本语法:

​ (参数列表)=> {

​ 函数体...

​ }

2)注意事项:

​ 1.没有参数或多个参数用括号( )括起来,一个参数可以省略括号

​ 2.函数体只有一行语句,并需要返回结果时,可以省略花括号{},结果自动返回

3)对比传统

​ a)传统

var f1 = function (n) {     return n * 2; } console.log(f1(2)) 

a)ES6

let f2 = (n) => {     return n * 2; } // console.log(f2) console.log(f2(3)) //简化 let f3 = n => n * 3; console.log(f3(10)) 

​ b)传统

var f1 = function (n,m) {     var res = 0;     for (var i = n; i <=m; i++) {         res += i     }     return res } console.log(f1(1,10)) 

​ b)ES6

let f2 = (n,m) => {     var res = 0;     for (var i = n; i <=m; i++) {         res += i     }     return res } // console.log(f2) console.log(f2(1,10)) 

4)箭头函数+解构

  • f2传入对象monster
  • f2形参时skill,所以根据es6对象解构特性,会把monster对象的skill赋给skill
  • 对象解构的前提是形参skill和monster对象属性 skill的属性名保持一致
const monster = {     name:"红孩儿",     age:10000,     skill:['红缨枪','三味真火'] }  //传统解构 function f1(monster) {     console.log("skill=",monster.skill) } f1(monster)  //ES6 let f2 = ({skill}) =>{     console.log("skill=",skill); } f2(monster) 

7.promise

promise的引出

promise是为了解决传统ajax异步调用需要多个操作时,会导致回调函数嵌套引起代码冗余的问题

原生的jquery 对于需要多次异步请求时表现:
<script type="text/javascript">     $.ajax({         url: "data/monster.json",         success(resultData) {             console.log("第一次ajax请求 monster基本信息= ", resultData);             $.ajax({                 url: `data/monster_detail_${resultData.id}.json`,                 success(resultData) {                     console.log("第二次ajax请求 monster详细信息= ", resultData);                 },                 error(err) {                     console.log("出现异常= ", err)                 }             })         },         error(err) {             console.log("出现异常= ", err)         }     }) </script> 

可以看出代码有非常多的嵌套,很不美观。

使用promise来完成多次ajax请求时表现:

先请求到monster.json
1. 创建Promise对象
2. 构造函数传入一个箭头函数
3. (resolve, reject) 参数列表resolve: 如果请求成功, 调用resolve函数
4. 如果请求失败, 调用reject函数
5. 箭头函数体, 仍然是通过jquery发出ajax

<script type="text/javascript">         let p = new Promise((resolve, reject) => {         //发出ajax         $.ajax({             url: "data/monster.json",             success(resultData) {//成功的回调函数                 console.log("promise发出的第1次ajax monster基本信息=", resultData);                 resolve(resultData);             },             error(err) {                 //console.log("promise 1发出的异步请求异常=", err);                 reject(err);             }         })     })      //这里我们可以继续编写请求成功后的业务     p.then((resultData) => {         //这里我们可以继续发出请求         //console.log("p.then 得到 resultData", resultData);         return new Promise((resolve, reject) => {             $.ajax({         url:`data/monster_detail_${resultData.id}.json`,  		success(resultData) { //第2次ajax请求成功,回调函数     	console.log("第2次ajax请求 monster的详细信息=", resultData);      //继续进行下一次的请求      resolve(resultData);                 },                 error(err) { //第2次ajax请求失败,回调函数                     //console.log("promise2 发出的异步请求异常=", err);                     reject(err);                 }             })         })     }).then((resultData) => {          console.log("p.then().then(), resultData", resultData)         //即可以在这里发出第3次ajax请求=》 获取该妖怪的女友         return new Promise((resolve, reject) => {             $.ajax({                 url: `data/monster_gf_${resultData.gfid}.json`,                  success(resultData) { //第3次ajax请求成功,回调函数                     console.log("第3次ajax请求 monster女友的详细信息=", resultData);                     //继续进行下一次的请求                     //resolve(resultData);                 },                 error(err) { //第2次ajax请求失败,回调函数                     //console.log("promise2 发出的异步请求异常=", err);                     //reject(err);                 }             })         })      }).catch((err) => { //这里可以对多次ajax请求的异常进行处理         console.log("promise异步请求异常=", err);     })  </script> 

使用了promise后 将传统的嵌套模式,改成了链式调用。

但代码依旧是否冗余,因此我们可以抽取相同的部分。

promise 代码优化重排

首先我们可以抽取一个工具方法

function get(url, data) {     return new Promise((resolve, reject) => {         $.ajax({                 url: url,                 data: data,                 success(resultData) {                     resolve(resultData);                 },                 error(err) {                     reject(err);                 }             }         )     }) } 

之后调用此方法完成业务即可

get("data/monster.json").then((resultData) => {     //第1次ajax请求成功后的处理代码     console.log("第1次ajax请求返回数据=", resultData);     return get(`data/monster_detail_${resultData.id}.json`);  }).then((resultData) => {     //第2次ajax请求成功后的处理代码     console.log("第2次ajax请求返回数据=", resultData);     //return get(`data/monster_detail_${resultData.id}.json`);     return get(`data/monster_gf_${resultData.gfid}.json`); }).then((resultData) => {     //第3次ajax请求成功后的处理代码     console.log("第3次ajax请求返回数据=", resultData);     //继续.. }).catch((err) => {     console.log("promise请求异常=", err); }) 

8.模块化编程

  • 传统非模块化开发有如下的缺点:(1)命名冲突(2)文件依赖[代码演示]
  • Javascript 代码越来越庞大,Javascript 引入模块化编程,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块
  • Javascript 使用"模块"(module)的概念来实现模块化编程, 解决非模块化编程问题

前端技术栈和Vue学习总结

模块化编程分类

1.CommonJS 模块化规范/ES5 的写法

2.ES6 模块化规范

CommonJS 模块化规范/ES5 的写法
规则
  1. 每个js 文件就是一个模块,有自己的作用域。在文件中定义的变量、函数、类/对象,
    都是私有的,对其他js 文件不可见

  2. CommonJS 使用module.exports={} / exports={} 导出模块, 使用let/const 名称=
    require("xx.js") 导入模块

图解

前端技术栈和Vue学习总结

代码

这是 "function.js":

//这是function.js: //定义对象,变量,常量,函数 const sum = function (a, b) {   return parseInt(a) + parseInt(b); }  const sub = function (a, b) {   return parseInt(a) - parseInt(b); }  let name = "zy学习";  const PI = 3.14;  const monster = {   name:"牛魔王",   age:500,   hi(){       console.log("Hi,i am 牛魔王~")   } }  //导出 module.exports = {   sum:sum,   sub,sub,   myName,name } 

​ 这是 "use.js":

//导入 const m = require("./function")  //使用 console.log(m.sum(100,200)) console.log(m.sub(120,60)) console.log(m.myName) 
ES6 模块化规范 写法
规则

1、ES6 使用(1)export {名称/对象/函数/变量/常量} (2) export 定义= (3) export default {}
导出模块
2、使用import {} from "xx.js" / import 名称form "xx.js" 导入模块

图解

前端技术栈和Vue学习总结

代码

导出:

const cat = {     name:"小白",     age:3,     cry(){         console.log("小猫喵喵叫~")     } }  const dog = {     name:"大黄",     age:5,     hi(){         console.log("大黄 对你说 hi~")     } }  //1.使用批量导出 export {     cat,     dog } 
//2.创建时直接导出 export const cat = {     name:"小白",     age:3,     cay(){         console.log("小猫喵喵叫~")     } }  const dog = {     name:"大黄",     age:5,     hi(){         console.log("大黄 对你说 hi~")     } } 
//3.默认方式导出  export default {     cat: {         name: "小白",         age: 3,         cay() {             console.log("小猫喵喵叫~")         }     },     dog: {         name: "大黄",         age: 5,         hi() {             console.log("大黄 对你说 hi~")         }     }  } 

导入

//1 import {cat,dog} from "./hspcommon"; cat.cry(); dog.hi()  //2. import {cat} from "/./hspcommon2" cat.name  //3. import m from "./hspcommon3" m.cat.cay() 

Vue

基本介绍

  1. Vue 是一个前端框架, 易于构建用户界面
  2. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或项目整合
  3. 支持和其它类库结合使用
  4. 开发复杂的单页应用非常方便
  5. Vue 是Vue.js 的简称

MVVM思想

前端技术栈和Vue学习总结

  • M∶即Model,模型,包括数据和一些基本操作
  • V∶即View,视图,页面渲染结果
  • VM∶即View-Model,模型与视图间的双向操作(无需开发人员干涉)
  • 在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM 操作Model
    渲染到View 中。而后当用户操作视图,我们还需要通过DOM获取View 中的数据,
    然后同步到Model 中。
  • 而MVVM中的VM 要做的事情就是把DOM 操作完全封装起来,开发人员不用再关心
    Model 和View 之间是如何互相影响的
  • 只要我们Model 发生了改变,View上自然就会表现出来
  • 当用户修改了View,Model 中的数据也会跟着改变
  • 结果:把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上, 大
    大提高开发效率

Vue语法

插值表达式

  1. {{message}} : 插值表达式
  2. message 就是从model 的data 数据池来设置
  3. 当我们的代码执行时,会到data{} 数据池中去匹配数据, 如果匹配上, 就进行替换
    , 如果没有匹配上, 就是输出空

//

欢迎你{{message}}-{{name}}

let vm = new Vue({
el: "#app", //创建的vue 实例挂载到id=app 的div
data: { //data{} 表示数据池(model 的有了数据), 有很多数据,以k-v 形式设置(根据业务
需要来设置)
message: "Hello-Vue!",
name:"zy"
}
})

数据单向渲染

  • v-bind 指令可以完成基本数据渲染/绑定
  • v-bind 简写形式就是一个冒号(:)
1. 使用插值表达式引用 data数据池数据是在标签体内 2. 如果是在标签/元素 的属性上去引用data数据池数据时,不能使用插值表达式 3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析 
//<img v-bind:src="img_src" v-bind:width="img_width"> //<img :src="img_src" :width="img_width"> 

数据双向渲染

  • v-bind是数据单向渲染: data数据池绑定的数据变化,会影响view

  • v-model="hobby.val" 是数据的双向渲染,

    • data数据池绑定的数据变化,会影响view 【底层的机制是 Data Bindings】
    • view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】
    //<input type="text" v-model="hobby.val"><br/><br/> 

事件绑定

  1. v-on:click 表示我们要给button元素绑定一个click的事件
  2. 底层仍然是dom处理
  3. 如果方法不需要传递参数,可以省略()
  4. v-on:click可以简写@, 但是需要浏览器支持
<button v-on:click="sayHi()">点击输出</button> <button @click="sayOk">点击输出</button>  let vm = new Vue({         el: "#app", //创建的vue实例挂载到 id=app的div, el 就是element的简写         data: { //data{} 表示数据池(model中的数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置)             message: "Vue事件处理的案例",             name: "zzz"         },                // 1. 是一个methods属性, 对应的值是对象{}         // 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池         // 3. 这里需要小伙伴有js的基础=>java web第4章         methods: {             sayHi() {                 console.log("hi, 银角大王~");             },             sayOk() {                 console.log("ok, 金角大王~");             }         }     }) 

修饰符

  • 修饰符(Modifiers) 是以(.)指明的后缀,指出某个指令以特殊方式绑定
  1. 例如,.prevent 修饰符告诉v-on 指令对于触发的事件调用event.preventDefault()即阻
    止事件原本的默认行为
  2. 事件修饰符
    .stop 阻止事件继续传播
    .prevent 阻止标签默认行为
    .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进
    行处理
    .self 只当在event.target 是当前元素自身时触发处理函数
    .once 事件将只会触发一次
    .passive 告诉浏览器你不想阻止事件的默认行为
  3. 键盘事件的修饰符
    比如: 项目经常需要监听一些键盘事件来触发程序的执行,而Vue 中允许在监听的时候添
    加关键修饰符
  4. v-model 的修饰符
    比如: 自动过滤用户输入的首尾空格

前端技术栈和Vue学习总结

<button v-on:click.once="onMySubmit">点击一次</button><br/> <input type="text" v-on:keyup.enter="onMySubmit"> <input type="text" v-on:keyup.down="onMySubmit"> <input type="text" v-model.trim="count"> 

条件渲染

v-if

前端技术栈和Vue学习总结

<input type="checkbox" v-model="sel">是否同意条款[v-if 实现] <h1 v-if="sel">你同意条款</h1> <h1 v-else>你不同意条款</h1> 
v-show

前端技术栈和Vue学习总结

<input type="checkbox" v-model="sel">是否同意条款[v-show 实现] <h1 v-show="sel">你同意条款</h1> <h1 v-show="!sel">你不同意条款</h1> 
v-if VS v-show
  • v-if 会确保在切换过程中,条件块内的事件监听器和子组件销毁和重建
  • v-show 机制相对简单, 不管初始条件是什么,元素总是会被渲染,并且只是对CSS 进行切换
  • 使用建议:如果要频繁地切换,建议使用v-show ;如果运行时条件很少改变,使用v-if 较好

前端技术栈和Vue学习总结
前端技术栈和Vue学习总结

列表渲染

Vue 提供了v-for 列表循环指令

1、对数组进行遍历

前端技术栈和Vue学习总结
前端技术栈和Vue学习总结

2、用v-for 来遍历一个对象的property

前端技术栈和Vue学习总结
前端技术栈和Vue学习总结
前端技术栈和Vue学习总结
前端技术栈和Vue学习总结

<h1>简单的列表渲染-带索引</h1> <ul> <li v-for="(i,index) in 3">{{i}}-{{index}}</li> </ul>  <table width="400px" border="1px"> <tr v-for="(monster,index) in monsters"> <td>{{index}}</td> <td>{{monster.id}}</td> <td>{{monster.name}}</td> <td>{{monster.age}}</td> </tr> </table> 

组件化编程

  • 组件(Component) 是Vue.js 最强大的功能之一(可以提高复用性[1.界面2.业务处理])
  • 组件也是一个Vue实例,也包括∶ data、methods、生命周期函数等
  • 组件渲染需要html模板,所以增加了template 属性,值就是HTML 模板
  • 对于全局组件,任何vue 实例都可以直接在HTML 中通过组件名称来使用组件
  • data 是一个函数,不再是一个对象, 这样每次引用组件都是独立的对象/数据

全局组件

1、定义一个全局组件, 名称为counter

  1. {} 表示就是我们的组件相关的内容
  2. template 指定该组件的界面, 因为会引用到数据池的数据,所以需要是模板字符串
  3. 要把组件视为一个Vue 实例,也有自己的数据池和methods
  4. 对于组件,我们的数据池的数据,是使用函数/方法返回[目的是为了保证每个组件的数据是独立], 不能使用原来的方式
  5. 这时我们达到目前,界面通过template 实现共享,业务处理也复用
  6. 全局组件是属于所有vue 实例,因此,可以在所有的vue 实例使用
Vue.component("counter", {         template: `<button v-on:click="click()">点击次数= {{count}} 次【全局组件化】</button>`,         data() {//这里需要注意,和原来的方式不一样!!!!             return {                 count: 10             }         },         methods: {             click() {                 this.count++;             }         }     }) 

局部组件

  • 可以把常用的组件,定义在某个commons.js中 export
  • 如果某个页面需要使用, 直接import
 const buttonCounter = {//定义一个组件, 组件的名称为 buttonCounter         template: `<button v-on:click="click()">点击次数= {{count}} 次【局部组件化】</button>`,         data() {//这里需要注意,和原来的方式不一样!!!!             return {                 count: 10             }         },         methods: {             click() {                 this.count++;             }         }     }      //创建Vue实例,必须有     let vm = new Vue({         el: "#app",//Vue实例的挂载点         components: { //引入/注册某个组件, 此时my_counter就是一个组件, 是一个局部组件,他的使用范围在当前vue             'my_counter': buttonCounter         }     }) 

vue生命周期&钩子函数

  1. Vue 实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂载
    DOM、渲染-更新-渲染、卸载等一系列过程,我们称为Vue 实例的生命周期
  2. 钩子函数(监听函数): Vue 实例在完整的生命周期过程中(比如设置数据监听、编译模
    板、将实例挂载到DOM 、在数据变化时更新DOM 等), 也会运行叫做生命周期钩子的函
  3. 钩子函数的作用就是在某个阶段, 给程序员一个做某些处理的机会

前端技术栈和Vue学习总结

  1. new Vue()
    new 了一个Vue 的实例对象,此时就会进入组件的创建过程。
  2. Init Events & Lifecycle
    初始化组件的事件和生命周期函数
  3. beforeCreate
    组件创建之后遇到的第一个生命周期函数,这个阶段data 和methods 以及dom 结构都未
    被初始化,也就是获取不到data 的值,不能调用methods 中的函数
  4. Init injections & reactivity
    这个阶段中, 正在初始化data 和methods 中的方法
  5. created
  • 这个阶段组件的data 和methods 中的方法已初始化结束,可以访问,但是dom 结构未
    初始化,页面未渲染
  • 在这个阶段,经常会发起Ajax 请求
  1. 编译模板结构(在内存)
  2. beforeMount
    当模板在内存中编译完成,此时内存中的模板结构还未渲染至页面上,看不到真实的数据
  3. Create vm.$el and replace ‘el’ with it
    这一步,再在把内存中渲染好的模板结构替换至真实的dom 结构也就是页面上
  4. mounted
    此时,页面渲染好,用户看到的是真实的页面数据, 生命周期创建阶段完毕,进入到了运
    行中的阶段
  5. 生命周期运行中
    10.1 beforeUpdate
    当执行此函数,数据池的数据新的,但是页面是旧的
    10.2 Virtual DOM re-render and patch
    根据最新的data 数据,重新渲染内存中的模板结构,并把渲染好的模板结构,替换至页面

    10.3 updated
    页面已经完成了更新,此时,data 数据和页面的数据都是新的
  6. beforeDestroy
    当执行此函数时,组件即将被销毁,但是还没有真正开始销毁,此时组件的data、methods
    数据或方法还可被调用
  7. Teardown……
    注销组件和事件监听
  8. destroyed
    组件已经完成了销毁

Vue Cli脚手架

项目文件结构

前端技术栈和Vue学习总结

Vue 请求页面执行流程

  • 整个页面渲染过程中,main.js 是中心,也是连接各个组件,路由器的关键

前端技术栈和Vue学习总结

通过修改成完整的写法, 清晰思路

D:vue_projectvue_project_quickstartsrcmain.js import Vue from 'vue' import App from './App' //完整写法是import App from './App.vue' import router from './router'//完整写法是import router from './router/index.js'  Vue.config.productionTip = false new Vue({ 		el: '#app', //这里的#app 是挂到index.html 的<div id="app"></div> 		router, //完整写法是router: router, 第二个router 是import router[这里] from './router' 		components: {App }, //完整写法是components: { 'App':App } 因为名字相同可以省略'App' 		template: '<App/>' //这里的'<App/>' 的App 就是上面components 引入的组件的名字 

ElementUI

ElementUI 官网: https://element.eleme.cn/#/zh-CN

ElementUI 是组件库,网站快速成型工具

Axios

  • axios 是独立于vue 的一个项目,不是Vue 的一部分
  • axios 通常和Vue 一起使用,实现Ajax 操作
  • Axios 是一个基于promise 的HTTP 库
<script>     new Vue({         el: "#app",         data: {             msg: "妖怪信息列表",             monsterList: [] //表示妖怪的信息数组         },         methods: {//自定义方法             list() {//发送ajax请求,获取数据 axios                 /*                     1. axios.get() 表示发出ajax请求                     2. http://localhost:63342/axios/data/response.data.json 表示请求的url                        要根据实际情况来填写                     3. axios发出ajax请求的基本语法                        axios.get(url).then(箭头函数).then(箭头函数)...catch(箭头函数)                        (1) 如果get请求成功就进入到第一个then()                        (2) 可以再 第一个then()中继续发出axios的ajax请求                        (3) 如果有异常, 会进入到 catch(箭头函数)                     4. list在生命周期函数created() 中调用-自己去回顾vue的生命周期函数                  */                 axios.get("http://localhost:63342/axios/data/response.data.json")                     .then(responseData => {                         console.log("responseData= ", responseData)                         //使用JSON.stringify(json) 把json对象转成一个字符串,方便观察                         console.log("responseData= ", JSON.stringify(responseData));                                                console.log("responseData.data.data.item= ", responseData.data.data.items)                         //将妖怪列表数组信息, 绑定到 data数据池的 monsterList                         //要学会看返回的数据格式!!!                         this.monsterList = responseData.data.data.items;                         //可以再次发出ajax请求                         // return axios.get("http://localhost:63342/axios/data/response.data.json")                     })                     // .then(responseData => {                     //     console.log("第二次axios发出 ajax请求responseData= ", responseData)                     // })                     .catch(err => {                     console.log("异常=", err)                     })             }         },         created() {             this.list();         }     }) </script> 

将JSON 对象转成JSON.stringify(response)

  • 将JSON 对象转成JSON.stringify(response)

  • 格式化输出JSON 字符串,方便观察分析

前端技术栈和Vue学习总结

本文学习内容来自韩顺平老师的课程

仅供个人参考学习