前端技術棧和Vue學習總結

来源:https://www.cnblogs.com/zydevelop/p/18107147/zy_frontEnd
-Advertisement-
Play Games

前端技術棧+Vue筆記 ES6新特性 1.let 1）let聲明有嚴格的局部作用域 ​ 此時"console.log("job= "+job)"將報錯 { var name = "zy學習"; let job = "java工程師"; console.log("name= "+name) conso ...


前端技術棧+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）的概念來實現模塊化編程, 解決非模塊化編程問題

模塊化編程分類

1.CommonJS 模塊化規範/ES5 的寫法

2.ES6 模塊化規範

CommonJS 模塊化規範/ES5 的寫法
規則

  1. 每個js 文件就是一個模塊，有自己的作用域。在文件中定義的變數、函數、類/對象，
    都是私有的，對其他js 文件不可見

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

圖解

代碼

這是 "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" 導入模塊

圖解

代碼

導出：

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思想

  • 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 的修飾符
    比如: 自動過濾用戶輸入的首尾空格

<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

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

<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 提供了v-for 列表迴圈指令

1、對數組進行遍歷


2、用v-for 來遍歷一個對象的property




<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. 鉤子函數的作用就是在某個階段, 給程式員一個做某些處理的機會

  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 請求頁面執行流程

  • 整個頁面渲染過程中，main.js 是中心，也是連接各個組件，路由器的關鍵

通過修改成完整的寫法， 清晰思路

D:\vue_project\vue_project_quickstart\src\main.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 字元串，方便觀察分析

本文學習內容來自韓順平老師的課程

僅供個人參考學習


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【Pavia】遙感圖像數據集下載地址和讀取數據集代碼
    【Pavia】遙感圖像數據集下載地址和讀取數據集代碼 目錄【Pavia】遙感圖像數據集下載地址和讀取數據集代碼前言Pavia數據集Pavia數據集地址：Pavia數據集預覽PaviaU.matPaviaU_gt.matPavia數據集的Matlab讀取方式Pavia數據集中PaviaU.mat的ma ...
  • mysql統計所有分類下的數量，沒有的也要展示
    要求統計所有分類下的數量，如果分類下沒有對應的數據也要展示。這種問題在日常的開發中很常見，每次寫每次忘，所以在此記錄下。 這種統計往往不能直接group by，因為有些類別可能沒有對應的數據 這裡有兩個思路（如果您有更好的方法，請一定要告訴我，求求了）： 每種類型分別統計，用union 連接（比較適 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Button）
    一、Button Button（按鈕）是一種常見的用戶界面控制項，通常用於觸發操作或提交數據。Button 擁有文本標簽和一個可點擊的區域，用戶點擊該區域即可觸發相應的操作或事件。 Button 的主要功能有： 觸發操作：用戶點擊 Button 可以觸發相應的操作，例如提交表單、搜索、切換頁面等。 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Swiper）
    一、Swiper 1.概述 Swiper可以實現手機、平板等移動端設備上的圖片輪播效果，支持無縫輪播、自動播放、響應式佈局等功能。Swiper輪播圖具有使用簡單、樣式可定製、功能豐富、相容性好等優點，是很多網站和移動應用中常用的輪播圖插件。 2.佈局與約束 Swiper是一個容器組件，如 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（Grid/GridItem）
    一、Grid/GridItem 1.概述 網格佈局是一種新型的佈局方式，它按照網格來劃分頁面，通過列和行來定義網格，使得頁面的佈局更加靈活、簡潔、易於維護。網格佈局能夠將頁面分成多個單元格，可以在這些單元格中佈置各種元素，例如文本、圖片、媒體等，從而實現頁面的排版。網格佈局支持自適應佈局，能 ...
  • Android 手勢相關(二)
    Android 手勢相關(二) 本篇文章繼續記錄下android 手勢相關的內容. 1: GestureOverlayView簡介 GestureOverlayView是Android中的一個視圖組件，用於捕捉和處理手勢操作. GestureOverlayView的主要用途: 手勢識別: 通過Ges ...
  • Android 手勢相關(一)
    Android 手勢相關(一) 本篇文章主要記錄下android 手勢相關的一些內容. Android 提供了一套強大的手勢識別框架,可以用來檢測和處理用戶的手勢操作. 1: 手勢識別 Android 提供了GestureDetector類來識別手勢,通過GestureDetector可以檢測用戶的 ...
  • 鴻蒙HarmonyOS實戰-ArkUI組件（List）
    一、List 1.概述 列表是一種非常有用且功能強大的容器，它常用於呈現同類型或多類型數據集合，例如圖片、文本、音樂、通訊錄、購物清單等。列表對於顯示大量內容而不耗費過多空間和記憶體是非常有幫助的，因為當列表項數量超過屏幕大小時，可以自動提供滾動功能。這使得列表成為構建結構化、可滾動信息的理想 ...
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統學習（BaseCity頁面）
    C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手，剛進公司跟領導報道，我說我是java全棧，他問我會不會C#，我說大學學過，他說這個TMS系統就給你來管了。外包已經把代碼給我了，這幾天先把增刪改查的代碼背一下，說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • C# - 委托與事件
    委托與事件 委托 委托的定義 委托是C#中的一種類型，用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法，實現回調、事件處理和動態調用等功能。通俗來講，就是委托包含方法的記憶體地址，方法匹配與委托相同的簽名，因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法：委托允許存儲對方法的引用， ...
  • 解析 ABP vNext 依賴註入實現【屬性註入】的原理
    前言 這幾天閑來沒事看看ABP vNext的文檔和源碼，關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式，構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下： 這時候我就開始疑惑了，因為我知道 ...
  • C#TMS系統學習（ShippingNotice頁面）
    C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面，ok，領導開完會就被裁掉了，很突然啊，他收拾東西的時候我還以為他要旅游提前請假了，還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走，怕被偷嗎？還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多，這邊的 ...
  • C#動態查詢：巧用Expression組合多條件表達式
    概述：在C#中，通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`，實現多條件動態查詢。通過創建表達式樹，可輕鬆構建複雜的查詢條件。 在C#中，可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 在Biwen.QuickApi中整合一個極簡的發佈訂閱(事件匯流排)
    閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • WPF 穩定的全屏化視窗方法
    1. 案例 成某三甲醫預約系統， 該項目在2024年初進行上線測試，在正常運行了兩天後，業務系統報錯：The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用
    背景 我們有些工具在 Web 版中已經有了很好的實踐，而在 WPF 中重新開發也是一種費時費力的操作，那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF？莫問為什麼，老 C# 開發的堅持，另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • C#事件
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 發佈到 Win7+
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
所有分類