国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue & Axios——前端技術棧

2年前作者：小菜0-o分類：Toy博客閱讀(26)違法舉報

這篇具有很好參考價值的文章主要介紹了Vue & Axios——前端技術棧。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

基本介紹

Vue是什么？

Vue (讀音 /vju?/，類似于 view) 是一個前端框架, 易于構建用戶界面
Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或項目整合
支持和其它類庫結合使用
開發(fā)復雜的單頁應用非常方便
Vue 是 Vue.js 的簡稱

官網(wǎng): https://cn.vuejs.org/
git 地址: https://github.com/vuejs

MVVM

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript
思想：

M∶即 Model，模型，包括數(shù)據(jù)和一些基本操作
V∶即View，視圖，頁面渲染結果
VM∶即 View-Model，模型與視圖間的雙向操作(無需開發(fā)人員干涉)
在 MVVM之前，開發(fā)人員從后端獲取需要的數(shù)據(jù)模型，然后要通過 DOM 操作 Model渲染到View 中。而后當用戶操作視圖，我們還需要通過 DOM獲取 View 中的數(shù)據(jù)，然后同步到Model 中。
而 MVVM中的VM 要做的事情就是把DOM 操作完全封裝起來，開發(fā)人員不用再關心Model 和View 之間是如何互相影響的
只要我們 Model 發(fā)生了改變，View上自然就會表現(xiàn)出來
當用戶修改了View，Model 中的數(shù)據(jù)也會跟著改變。
結果：把開發(fā)人員從繁瑣的 DOM操作中解放出來，把關注點放在如何操作 Model上, 大大提高開發(fā)效率

Vue的使用

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript
下載下面的文件：vue.js

導入到當前項目路徑下：

快速入門

使用插值表達式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue快速入門</title>
</head>
<body>
<div id="app">
  <h1>歡迎你，{{message}}, {{name}}</h1>
</div>

<script src="vue.js"></script>
<script>
  <!--創(chuàng)建vue對象-->
  let vm = new Vue({
    el:"#app",    <!--創(chuàng)建的vue實例掛載到id=app的div上, el是element的簡寫-->
    data:{        <!--data{}表示數(shù)據(jù)池(model的數(shù)據(jù)), 有很多數(shù)據(jù),以k-v形式設置-->
      message:"helllo!!",
      name:"彭于晏"
    }
  })

  console.log("vm=>", vm);
  console.log(vm.name);
</script>

</body>
</html>

注意事項和使用細節(jié)

注意代碼順序，要求 div 在前，script 在后，否則無法綁定數(shù)據(jù)

Vue 數(shù)據(jù)綁定機制分析

數(shù)據(jù)單向渲染

v-bind 指令可以完成基本數(shù)據(jù)渲染/綁定
v-bind 簡寫形式就是一個冒號（:）
大白話就是后端的改變可以直接改變前端。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>單項數(shù)據(jù)渲染</title>
</head>
<body>
<div id="kkkb">
    <h1>{{message}}</h1>
    <!--1. 使用插值表達式引用data數(shù)據(jù)池數(shù)據(jù)是在標簽體內(nèi)-->
    <!--2. 如果是在標簽元素的屬性上去引用data數(shù)據(jù)池數(shù)據(jù)時, 不能使用插值表達式.需要使用v-bind表達式.-->
    <!--3. 寫法為 v-bind:標簽名,或者可以直接省略v-bind, 寫成:標簽名 -->
    <img v-bind:src="img_src" v-bind:width="img_width">
    <img :src="img_src" :width="img_width">         <!--可以省略v-bind,直接寫:標簽名 -->
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue
    ({
        el:"#kkkb",   //#根據(jù)id選擇是JQuery中的內(nèi)容
        data:{
            message:"我朝!",
            img_src:"1.jpg",
            img_width:"200px"
        }
    })

</script>
</body>
</html>

注意事項和細節(jié)

插值表達式是用在標簽體的
如果給標簽屬性綁定值，則使用 v-bind 指令

雙向數(shù)據(jù)綁定

v-model 可以完成雙向數(shù)據(jù)綁定
大白話就是前端的改變會影響后端，后端的改變也會影響前端。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙向數(shù)據(jù)渲染飯</title>
</head>
<body>
<div id="afk">
    <!--
    1. v-bind 是數(shù)據(jù)單向渲染: data 數(shù)據(jù)池綁定的數(shù)據(jù)變化，會影響 view (后端影響前端)
    2. v-model="hobby.val" 是數(shù)據(jù)的雙向渲染,
        (1)data 數(shù)據(jù)池綁定的數(shù)據(jù)變化，會影響 view 【底層的機制是 Data Bindings】
        (2)view 關聯(lián)的的元素值變化, 會影響到 data 數(shù)據(jù)池的數(shù)據(jù)【底層機制是 DomListeners】
    -->
    <h1>hi,輸入你的愛好</h1>
    <input type="text" v-model="hobby.val"><br/>
    <input type="text" :value="hobby.val"><br/>
    你輸入的愛好是:{{hobby.val}}
</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#afk",
        data: {
            hobby: {
                val: "購物"
            }
        }
    })
</script>
</body>
</html>

事件綁定

使用 v-on 進行事件處理，比如: v-on:click 表示處理鼠標點擊事件
事件調用的方法定義在 vue 對象聲明的 methods 節(jié)點中
v-on:事件名可以綁定指定事件

示例：

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件處理</title>
</head>
<body>
<div id="app">
  <button v-on:click="sayHi()">點擊輸出</button>        <!-- v-on:click="sayHi()" 表示給這個按鈕綁定一個click事件, sayHi()表示這個事件綁定的方法-->
  <button v-on:click="sayOK">點擊輸出</button>          <!--如果沒有參數(shù),可以省略()-->
  <button @click="sayOKK()">點擊輸出</button>       <!-- v-on:可以省略成@ -->
  <button v-on:click="sayOKKK()">點擊輸出</button>
</div>
<!--引入vue.js-->
<script src="vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      message:"Hello",
      name:"wxy",
    },
    methods: {  //表示methods屬性, 后面對應的值是對象. 在這里可以寫很多方法, 前面的data可以寫很多屬性.
      sayHi() {
        console.log("hi, 銀角大王");
      },
      sayOK() {
        console.log("hi, 金角大王");
      },
      sayOKK() {
        console.log("hi, 第三個按鈕");
      },
      sayOKKK() {
        console.log("hi, 第四個按鈕");
      }
    }
  })
</script>
</body>
</html>

注意事項和使用細節(jié)

如果方法沒有參數(shù)，可以省略()[需要瀏覽器支持]
v-on 指令的簡寫形式 @ [需要瀏覽器支持]

課后作業(yè)1

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件綁定機制</title>
</head>
<body>
<div id="lgq">
  <h1>演示Vue事件綁定操作</h1>
  <button @click="addOne">點擊增加+1</button><br/>
  <button @click="addTwo">點擊增加+2</button><br/>
  <button v-on:click="times += 3">點擊增加+3 </button><br/>    <!--可以直接寫個表達式 times += 3-->
  你的按鈕被點擊了{{times}}次
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el:"#lgq",
    data:{
      times:0,
    },
    methods:{
      addOne(){
        this.times += 1;
      },
      addTwo(){
        this.times += 2;
      }
    }
  })
</script>
</body>
</html>

課后作業(yè)2

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>事件綁定機制</title>
</head>
<body>
<div id="lgq">
  <h1>演示Vue事件綁定操作</h1>
  書名:<input type="text" v-model=name><br/>
  <button @click="show">點擊顯示輸入框的內(nèi)容</button>
</div>
<script src="vue.js"></script>
<script>
  new Vue({
    el:"#lgq",
    data:{
      name:"請輸入書名"
    },
    methods:{
      show(){
        alert("您當前輸入的書名是:" + this.name);
      }
    }
  })
</script>
</body>
</html>

修飾符

修飾符 (Modifiers) 是以(.)指明的后綴，指出某個指令以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對于觸發(fā)的事件調用 event.preventDefault()即阻
止事件原本的默認行為
事件修飾符
.stop 阻止事件繼續(xù)傳播
.prevent 阻止標簽默認行為
.capture 使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理
.self 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù)
.once 事件將只會觸發(fā)一次
.passive 告訴瀏覽器你不想阻止事件的默認行為
鍵盤事件的修飾符
比如: 項目經(jīng)常需要監(jiān)聽一些鍵盤事件來觸發(fā)程序的執(zhí)行，而 Vue 中允許在監(jiān)聽的時候添加關鍵修飾符

官方文檔：

示例

需求: 演示 v-on:submit.prevent 的使用, 如果沒有輸入名字，控制臺輸出 “請輸入名字”，否則輸出 "提交表單
Vue & Axios——前端技術棧,Java,前端,vue.js,javascript
為什么在開發(fā)中, 有時需要 , 讓某個指令以特殊方式綁定, 比如表單提交

我們不希望將這個表單進行整體提交, 而是是 Ajax 的方式進行提交
因為表單整體提交會導致重載頁面, 而 Ajax 方式可以有選擇性提交數(shù)據(jù)，并且局部刷新

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件修飾符的使用</title>
</head>
<body>
<div id="app">
    <form action="https://www.baidu.com" v-on:submit.prevent="onMySubmit">	<!-- v-on 是對事件進行綁定 -->
        <!-- v-on:submit.prevent表示按照自己的方式提交表單,不使用默認方式提交 -->
        妖怪名
        <input type="text" v-model="monster.name"><br/> <!--和屬性monster的name雙向綁定-->
        <button type="submit">提交</button>
    </form>


    <h1>按鍵修飾符</h1>
    <button v-on:click.once="clickOnce">僅點擊第一次有用</button>
    <br/><br/>

    <h1>點擊回車會有提示</h1>
    <input type="text" v-on:keyup.enter="onInputSubmit">

    <h1>自動去掉空格</h1>
    <input type="text" v-model.trim="count">    <!-- v-model: 雙向數(shù)據(jù)渲染-->
</div>

<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            count:0,
            monster: {}
        },
        methods: {
            onMySubmit() {
                // "", null, undefined都表示為false
                if (this.monster.name) {
                    alert("提交表單");
                } else {
                    alert("請輸入名字！");
                }
            },
            clickOnce() {
                alert("點擊成功!");
            },
            onInputSubmit() {
                alert("輸入成功!");
            }
        }
    })
</script>
</body>
</html>

條件渲染/控制: v-if v-show

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if的使用</title>
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="sel">是否同意條款[v-if實現(xiàn)]
    <h1 v-if="sel">你同意條款</h1>
    <h1 v-else>你不同意條款</h1>
</div>

<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            sel:false,
        }
    })
</script>
</body>
</html>

v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-show的使用</title>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="sel">是否同意條款[v-show實現(xiàn)]
  <h1 v-if="sel">你同意條款</h1>
  <h1 v-else="!sel">你不同意條款</h1>
</div>

<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      sel:false,
    }
  })
</script>
</body>
</html>

v-if VS v-show

v-if 會確保在切換過程中，條件塊內(nèi)的事件監(jiān)聽器和子組件銷毀和重建。
v-show 機制相對簡單, 不管初始條件是什么，元素總是會被渲染，并且只是對 CSS 進行切換

課后作業(yè)

1、如圖,當用戶輸入成績時, 可以輸出對應的級別

90 分以上, 顯示優(yōu)秀
70 分以上, 顯示良好
60 分以上, 顯示及格
低于 60 分, 顯示不及格
如果用戶輸入的成績大于 100, 就修正成 100, 如果用戶輸入的成績小于 0, 就修正成0

<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>顯示成績</title>
</head>
<body>
<div id="app">
    輸入成績1-100:
    <input type="text" v-model="score" v-on:blur="check"><br/>  <!--要實現(xiàn)判斷大于100時變成100, 小于0時變成0,需要進行事件綁定:v-on:blur="check"-->
    你當前的成績是:{{score}}
    <p v-show="score>100">成績不合法</p>
    <p v-show="score<=100&&score>90">優(yōu)秀</p>
    <p v-show="score<=90&&score>70">良好</p>
    <p v-show="score<=70&&score>=60">及格</p>
    <p v-show="score<60">不及格</p>

</div>
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            score: 0,
        },
        methods:{
            check(){
                if(this.score > 100) {
                    this.score=100;
                }
                if(this.score < 0 ){
                    this.score = 0;
                }
            }
        }
    })
</script>

</body>
</html>

列表渲染: v-for

官方文檔：https://cn.vuejs.org/v2/guide/list.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍歷數(shù)組</title>
</head>
<body>
<h1>使用v-for遍歷數(shù)組</h1>
<ul id="app">
  <li v-for="item in items">
    {{item.message}}
  </li>
<br/><br/>
  <li v-for="(item, index) in items">
    {{index}} - {{item.message}}
  </li>
</ul>

<h1>使用v-for遍歷一個對象的property</h1>
<ul id="v-for-property">
  <li v-for="(value, name) in object">
    {{name}} : {{value}}
  </li>
</ul>

<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el:"#app",
    data:{
      items:[
        {message:'foo'},
        {message:'bar'}
      ]
    }
  })

  let vm1 = new Vue({
    el:"#v-for-property",
    data:{
      object:{
        title:"How to do lists in Vue",
        author:"Jane Doe",
        publishedAt:'2001-2-2',
      }
    }
  })
</script>
</body>
</html>

應用實例

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍歷數(shù)組</title>
</head>
<body>

<ul id="app">
    <h1>簡單的列表渲染</h1>
    <li v-for="item in items">
        {{item}}
    </li>
    <h1>帶索引的列表渲染</h1>
    <br/><br/>
    <li v-for="(item, index) in items">
        {{index}} - {{item }}
    </li>
    <h1>列表渲染table</h1>
    <table width="400px" border="1px">
        <th>下標</th>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <tr v-for="(monster,index) in monsters">
            <td>{{index}}</td>
            <td>{{monster.id}}</td>
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
        </tr>
    </table>
</ul>


<ul id="v-for-property">
    <li v-for="(value, name) in object">
        {{name}} : {{value}}
    </li>
</ul>

<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            items: [
                1, 2, 3
            ],

            monsters: [
                {id: 1, name: '牛魔王', age: 800},
                {id: 2, name: '黑山老妖', age: 900},
                {id: 3, name: '紅孩兒', age: 200}
            ]
        }
    })
</script>
</body>
</html>

課后練習

1、如圖, 顯示成績及格的學生列表

將學生對象, 存放在數(shù)組中
遍歷顯示所有學生, 只顯示成績及格的學員

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>遍歷數(shù)組</title>
</head>
<body>
<!--顯示及格的學生的信息-->
<ul id="app">
  <h1>列表渲染table</h1>
  <table width="400px" border="1px">
    <th>下標</th>
    <th>id</th>
    <th>name</th>
    <th>age</th>
    <th>score</th>
    <tr v-if="student.score>=60" v-for="(student,index) in students" >    <!--成績大于等于60-->
      <td>{{index}}</td>
      <td>{{student.id}}</td>
      <td>{{student.name}}</td>
      <td>{{student.age}}</td>
      <td>{{student.score}}</td>
    </tr>
  </table>
</ul>

<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      students: [
        {id: 1, name: 'jack', age: 8, score:90},
        {id: 2, name: 'tom', age: 9, score:70},
        {id: 3, name: 'mary', age: 7, score:50}
      ]
    }
  })

</script>
</body>
</html>

組件化編程

在大型應用開發(fā)的時候，頁面可以劃分成很多部分，往往不同的頁面，也會有相同的部分。例如可能會有相同的頭部導航。
但是如果每個頁面都獨自開發(fā)，這無疑增加了我們開發(fā)的成本。所以我們會把頁面的不同部分拆分成獨立的組件，然后在不同頁面就可以共享這些組件，避免重復開發(fā)(如圖)

組件(Component) 是 Vue.js 最強大的功能之一(可以提高復用性[1.界面2.業(yè)務處理])
組件也是一個Vue實例，也包括∶ data、methods、生命周期函數(shù)等
組件渲染需要 html模板，所以增加了template 屬性，值就是 HTML 模板
對于全局組件，任何vue 實例都可以直接在 HTML 中通過組件名稱來使用組件
data 是一個函數(shù)，不再是一個對象，這樣每次引用組件都是獨立的對象/數(shù)據(jù)

組件化編程-全局組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用全局組件</title>
</head>
<body>
<div id="app">
    <!--  使用全局組件-->
    <counter></counter><br/>
    <counter></counter>
</div>
<script src="vue.js"></script>
<script>
    /*
    * 1. 定義一個全局組件, 名稱為counter
    * 2. {} 表示的是我們組件的相關的內(nèi)容
    * 3. template 指定該組件的界面, 因為會引用到數(shù)據(jù)池的數(shù)據(jù),所以需要使用模板字符串
    * 4. 這里要把組件視為一個Vue實例, 也有自己的數(shù)據(jù)池和methods
    * 5. 對于組件, 數(shù)據(jù)池的數(shù)據(jù),是使用函數(shù)/方法返回return的[目的是為了保證每個組件的數(shù)據(jù)是獨立的],不能使用原來的方式.
    * 6. 全局組件屬于所有的vue實例, 因此可以在所有的vue實例中使用
    * */
    Vue.component("counter", {
        template: `<button v-on:click="click()">點擊次數(shù)={{count}}</button>>`,
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            click() {
                this.count++;
            }
        }
    })

    // 創(chuàng)建vue實例, 必須有
    let vm = new Vue({
        el:"#app",
    })
</script>
</body>
</html>

組件化變成——局部組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用局部組件</title>
</head>
<body>
<div id="app">
    <!--  使用局部組件-->
    好處:
    1. 可以把常用的組件定義在某個commons.js中,然后export.
    2. 如果某個頁面需要使用, 直接import即可
    <my_counter></my_counter>
    <my_counter></my_counter>
    <my_counter></my_counter>
</div>
<script src="vue.js"></script>
<script>

    // 使用 const 定義局部組件
    const buttonCounter = {
        template: `<button v-on:click="click()">點擊次數(shù)={{count}}</button>>`,
        data() {
            return {
                count: 0,
            }
        },
        methods: {
            click() {
                this.count++;
            }
        }
    }

    // 創(chuàng)建vue實例, 必須有
    let vm = new Vue({
        el: "#app",
        components: { //引入/注冊某個組件, 此時 my_counter 就是一個組件, 是一個局部組件,他的使用范圍在當前 vue
            'my_counter': buttonCounter,
        }
    })
</script>
</body>
</html>

生命周期和監(jiān)聽函數(shù)(鉤子函數(shù))

Vue 實例有一個完整的生命周期，也就是說從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載
DOM、渲染-更新-渲染、卸載等一系列過程，我們稱為 Vue 實例的生命周期
鉤子函數(shù)(監(jiān)聽函數(shù)): Vue 實例在完整的生命周期過程中(比如設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 、在數(shù)據(jù)變化時更新 DOM 等), 也會運行叫做生命周期鉤子的函數(shù)
鉤子函數(shù)的作用就是在某個階段, 給程序員一個做某些處理的機會

Vue 實例的生命周期示意圖 , 地址：

new Vue()
new 了一個 Vue 的實例對象，此時就會進入組件的創(chuàng)建過程。
Init Events & Lifecycle
初始化組件的事件和生命周期函數(shù)
beforeCreate
組件創(chuàng)建之后遇到的第一個生命周期函數(shù)，這個階段 data 和 methods 以及 dom 結構都未被初始化，也就是獲取不到 data 的值，不能調用 methods 中的函數(shù)
Init injections & reactivity
這個階段中, 正在初始化 data 和 methods 中的方法
created
這個階段組件的 data 和 methods 中的方法已初始化結束，可以訪問，但是 dom 結構未初始化，頁面未渲染

老師說明：在這個階段，經(jīng)常會發(fā)起 Ajax 請求

編譯模板結構(在內(nèi)存)

beforeMount
當模板在內(nèi)存中編譯完成，此時內(nèi)存中的模板結構還未渲染至頁面上，看不到真實的數(shù)據(jù)
Create vm.$el and replace ‘el’ with it
這一步，再在把內(nèi)存中渲染好的模板結構替換至真實的 dom 結構也就是頁面上
mounted
此時，頁面渲染好，用戶看到的是真實的頁面數(shù)據(jù)，生命周期創(chuàng)建階段完畢，進入到了運
行中的階段
生命周期運行中
10.1 beforeUpdate
當執(zhí)行此函數(shù)，數(shù)據(jù)池的數(shù)據(jù)新的，但是頁面是舊的
10.2 Virtual DOM re-render and patch
根據(jù)最新的 data 數(shù)據(jù)，重新渲染內(nèi)存中的模板結構，并把渲染好的模板結構，替換至頁面上

updated
頁面已經(jīng)完成了更新，此時，data 數(shù)據(jù)和頁面的數(shù)據(jù)都是新的

beforeDestroy
當執(zhí)行此函數(shù)時，組件即將被銷毀，但是還沒有真正開始銷毀，此時組件的 data、methods數(shù)據(jù)或方法還可被調用

Teardown…… 注銷組件和事件監(jiān)聽
destroyed
組件已經(jīng)完成了銷毀

幾個重要的鉤子函數(shù) (beforeCreate, created, beforeMount, mounted,
beforeUpdate, updated)

在這幾個鉤子函數(shù)中, 數(shù)據(jù)模型是否加載/使用? 自定義方法是否加載/可用? html 模
板是否加載/使用? html 模板是否完成渲染?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--這里可以視為用戶看到的頁面-對應前面講解的頁面dom-->
<div id="app">
  <span id="num">{{num}}</span>
  <button @click="num++">贊！</button>
  <h2>{{name}}，有{{num}}次點贊</h2>
</div>
<script src="vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {//數(shù)據(jù)池
      name: "kristina",
      num: 0
    },
    methods: {
      show() {
        return this.name;
      },
      add() {
        this.num++;
      }
    },
    beforeCreate() {//生命周期函數(shù)-創(chuàng)建vue實例前
      console.log("=============beforeCreate==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[no]", this.name, " ", this.num);
      //console.log("自定義方法是否加載/使用?[no]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom是否被渲染?[no]", document.getElementById("num").innerText);
    },
    created() {//生命周期函數(shù)-創(chuàng)建vue實例
      console.log("=============created==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);
      console.log("自定義方法是否加載/使用?[yes]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom是否被渲染?[no]", document.getElementById("num").innerText);
      //可以發(fā)出Ajax
      //接收返回的數(shù)據(jù)
      //再次去更新data數(shù)據(jù)池的數(shù)據(jù)
      //編譯內(nèi)存模板結構
      //.....

    },
    beforeMount() {//生命周期函數(shù)-掛載前
      console.log("=============beforeMount==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);
      console.log("自定義方法是否加載/使用?[yes]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom是否被渲染?[no]", document.getElementById("num").innerText);

    },
    mounted() {//生命周期函數(shù)-掛載后
      console.log("=============mounted==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);
      console.log("自定義方法是否加載/使用?[yes]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom是否被渲染?[yes]", document.getElementById("num").innerText);

    },
    beforeUpdate() {//生命周期函數(shù)-數(shù)據(jù)池數(shù)據(jù)更新前
      console.log("=============beforeUpdate==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);
      console.log("自定義方法是否加載/使用?[yes]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom數(shù)據(jù)是否被更新?[no]", document.getElementById("num").innerText);
      //驗證數(shù)據(jù)==>修正
      // if(this.num < 10 ) {
      //     this.num = 8;
      // }
    },
    updated() {//生命周期函數(shù)-數(shù)據(jù)池數(shù)據(jù)更新后
      console.log("=============updated==========");
      console.log("數(shù)據(jù)模型/數(shù)據(jù)池的數(shù)據(jù)是否加載/使用?[yes]", this.name, " ", this.num);
      console.log("自定義方法是否加載/使用?[yes]", this.show());
      console.log("用戶頁面dom是否加載/使用?[yes]", document.getElementById("num"));
      console.log("用戶頁面dom數(shù)據(jù)是否被更新?[yes]", document.getElementById("num").innerText);

    }

  })
</script>
</body>
</html>

Vue2 腳手架模塊化開發(fā)

為什么需要 Vue Cli 腳手架?

目前開發(fā)模式的問題

開發(fā)效率低
不夠規(guī)范
維護和升級, 可讀性比較差

Vue Cli 文檔地址: https://cli.vuejs.org/zh/

搭建 Vue 腳手架工程，需要使用到 NPM(node package manager), npm 是隨 nodejs 安裝
的一款包管理工具, 類似 Maven。所以我們需要先安裝 Nodejs

Vue2腳手架配置教程&IDEA配置VUE

Vue 項目結構分析

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

分析執(zhí)行流程

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript

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

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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


/* eslint-disable no-new */
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 引入的組件的名字
})

Element UI

Element UI的使用，需要什么模板就去官網(wǎng)找什么模板就可以。
ElementUI 官網(wǎng):
一句話: ElementUI 是組件庫，網(wǎng)站快速成型工具

Element UI 配置

安裝 element-ui 組件庫, cmd 下進入到項目，指令 npm i element-ui@2.12.0（這里遇到一個小坑，之前安裝的是2.15版本，但是顯示不了Element-UI的表格。需要卸載原來的版本，然后再下載該版本。）。
關于為什么要在項目路徑下執(zhí)行指令：

Vue & Axios——前端技術棧,Java,前端,vue.js,javascript 3. 修改項目目錄下的\src\main.js，添加如下的語句：


import ElementUI from 'element-ui
import 'element-ui/lib/theme-chalk/index.css';

//  使用ElementUI插件。
Vue.use(ElementUI);

要求效果：

Code：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <el-row>
      <el-button>默認按鈕</el-button>
      <el-button type="primary">主要按鈕</el-button>
      <el-button type="success">成功按鈕</el-button>
      <el-button type="info">信息按鈕</el-button>
      <el-button type="warning">警告按鈕</el-button>
      <el-button type="danger">危險按鈕</el-button>
    </el-row>
    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="feaf餓啊分"></el-input-number>

    <table align="center">
      <tr>
        <td>第1行第1列</td>
        <td>第1行第2列</td>
        <td>第1行第3列</td>
      </tr>
      <tr>
        <td rowspan="2">第2行第1列</td>
        <td>第2行第2列</td>
        <td>第2行第3列</td>
      </tr>
      <tr>
        <td>第3行第1列</td>
        <td>第3行第2列</td>
      </tr>
      <tr>
        <td rowspan="2">第4行第1列</td>
        <td>第4行第2列</td>
        <td>第4行第3列</td>
      </tr>
      <tr>
        <td>紅燒肉 <img src="../assets/img.png" width="100"></td>
        <td>第5行第3列</td>
      </tr>
    </table>
    <br/>

    <el-table
      :data="tableData"
      stripe
      style="width: 80%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      msg: "Welcome to Table",
      num: 1,

      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>

<style scoped>
div {
  width: 900px;
  background-color: aliceblue;
  margin: 0 auto;
}

h1 {
  color: red;
}

table, tr, td {
  border: 1px solid red;
//邊界的寬度 width: 600px; border-collapse: collapse; //合并邊界 height: 50px;
}
</style>

做出樹形控件

<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

</template>

<script>
export default {
  data() {
    return {
      data: [{
        label: '家用電器',
        children: [{
          label: '電視',
          children: [{
            label: '全屏電視',
          },
            {
              label: '教育電視'
            }]
        },
          {
            label: '空調',
            children: [{
              label:'格力空調',
            },
              {
                label: '美的空調',
              }]
          }]
      }, {
        label: '手機',
        children: [{
          label: 'iPhone',
          children: [{
            label: 'iphone 15',
          },
            {
              label: 'iphone 14'
            }]
        },
          {
            label: '華為',
            children: [{
              label:'mate 60 pro',
            },
              {
                label: 'P50',
              }]
          }]
      }, {
        label: '電腦',
        children: [{
          label: '玩家國度',
          children: [{
            label: 'ROG',
          },
            {
              label: '敗家之眼'
            }]
        },
          {
            label: '聯(lián)想',
            children: [{
              label:'Y9000P',
            },
              {
                label: 'Y7000P',
              }]
          }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
}
</script>

<style scoped>

</style>

Axios

axios 是獨立于 vue 的一個項目，不是 Vue 的一部分
axios 通常和 Vue 一起使用，實現(xiàn) Ajax 操作
Axios 是一個基于 promise 的 HTTP 庫
學習文檔

Axios 庫文件

1、使用 axios 需要引入 axios 庫文件
2、可以直接引入
Vue & Axios——前端技術棧,Java,前端,vue.js,javascript
3、也可以下載 axios.min.js ，在本地引入

使用方式

/*
                1. axios.get() 表示發(fā)出ajax請求
                2. ()中的表示請求的url
                3. axios發(fā)出ajax請求的基本語法:
                    axios.get(url).then(箭頭函數(shù)).then(箭頭函數(shù))...catch(箭頭函數(shù))
                    (1) 如果get請求成功就進入到第一個then
                    (2) 可以再在第一個then()中繼續(xù)發(fā)出axios的ajax請求
                    (3) 如果有異常,會進入到catch
                4. list()方法在生命周期函數(shù)created()中調用.*/

			axios.get("url")
				.then(箭頭函數(shù))
				.then(箭頭函數(shù))
				...
				.catch(err =>{
					// 處理異常
				})

示例

需求: 在 Vue 項目中使用 Axios, 從服務器獲取 json 數(shù)據(jù), 顯示在頁面

本地資源：
Vue & Axios——前端技術棧,Java,前端,vue.js,javascript
展現(xiàn)效果：

用到了生命周期函數(shù)、axios、vue文章來源地址http://www.zghlxwxcb.cn/news/detail-799680.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="script/axios.min.js"></script>
    <script src="script/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <table border="1px" width="800px">
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
        <tr v-for="monster in monsterList" align="center">
            <td>{{monster.name}}</td>
            <td>{{monster.age}}</td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            monsterList: [],
            msg:"妖怪信息列表"
        },
        methods: {
            // 定義方法
            list() {
                /*
                1. axios.get() 表示發(fā)出ajax請求
                2. ()中的表示請求的url
                3. axios發(fā)出ajax請求的基本語法:
                    axios.get(url).then(箭頭函數(shù)).then(箭頭函數(shù))...catch(箭頭函數(shù))
                    (1) 如果get請求成功就進入到第一個then
                    (2) 可以再在第一個then()中繼續(xù)發(fā)出axios的ajax請求
                    (3) 如果有異常,會進入到catch
                4. list()方法在生命周期函數(shù)created()中調用.


 				* 1. 使用 axios 發(fā)送 ajax 請求
                * 2. 語 法 格 式 axios. 請 求 方 式 ( 請 求 路 徑 ).then( 箭 頭 函數(shù)).catch(箭頭函數(shù))
                * 3. 請求成功，執(zhí)行 then 的函數(shù), response 就是返回的數(shù)據(jù), 名字有程序員確定
                * 4. 請求失敗, 執(zhí)行 catch 的函數(shù)
                * 5. this.monsterList = response.data.data.items 把 返 回 的data.items 賦給 monsterList
                * 6. 這里的 http://127.0.0.1:63342/axios/response.data.json 路徑需要根據(jù)實際的端口和資源名來修改
                  */
                axios.get("http://localhost:63342/axios/data/response.data.json")	// 讀取本地的資源
                    .then((responseData) =>{    // 只有一個參數(shù), (responseData)可以省略括號
                        console.log(responseData.data.data.items)
                        //上面顯示的數(shù)據(jù)是個對象形式,比較亂.
                        // 可以使用JSON.stringify(json) 把json對象轉成一個字符串
                        console.log(JSON.stringify(responseData.data.data.items))
                        // 將妖怪信息數(shù)組 綁定到data數(shù)據(jù)池的monsterList
                        this.monsterList = responseData.data.data.items;

                        // 可以使用return axios.get()再次發(fā)出ajax請求
                        // return axios.get("url"), 然后再用then寫請求成功后的操作...
                    }).catch(err => {
                        console.log("異常=" + err);
                })
            }
        },
        
        // created()是生命周期函數(shù),不能在methods中寫, 這是自己定義的方法
        // 使用生命周期函數(shù)，在方法和數(shù)據(jù)都加載好后調用list()方法
        created(){
            this.list()
        }
    })
</script>

</body>
</html>

到了這里，關于Vue & Axios——前端技術棧的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如若轉載，請注明出處：如若內(nèi)容造成侵權/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領支付寶紅包贊助服務器費用

前端框架Vue學習 ——（四）Axios
介紹: Axios 對原生的 Ajax 進行了封裝，簡化書寫，快速開發(fā)。（異步請求）官網(wǎng): https://www.axios-http.cn/ 官網(wǎng)介紹：Axios 是一個基于 promise 網(wǎng)絡請求庫，作用于node.js 和瀏覽器中。它是 isomorphic 的(即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生 node.js http 模塊
2024年02月05日
瀏覽(46)
基于vue.js前端+java后臺購物商城系統(tǒng)設計與實現(xiàn)
?博主介紹：黃菊華老師《Vue.js入門與商城開發(fā)實戰(zhàn)》《微信小程序商城開發(fā)》圖書作者，CSDN博客專家，在線教育專家，CSDN鉆石講師；專注大學生畢業(yè)設計教育和輔導。所有項目都配有從入門到精通的基礎知識視頻課程，學習后應對畢業(yè)設計答辯。項目配有對應開發(fā)文檔、
2024年04月14日
瀏覽(22)
【vue】vue前端、生產(chǎn)（線上）環(huán)境請求unicloud云服務空間axios報錯
使用axios的時候，如果是開發(fā)環(huán)境下，WebStorm（IDEA）會自帶跨域功能，說白了就是不用考慮跨域的事情了。但是在生產(chǎn)環(huán)境下，vue前端編譯成靜態(tài)文件，只是普通的http請求，所以根據(jù)瀏覽器的跨域規(guī)則（域名、端口、協(xié)議，一個不同就是跨域），不能發(fā)送請求，所以要借助反
2024年02月07日
瀏覽(25)
【Vue.js】Vue3全局配置Axios并解決跨域請求問題
對于前后端分離項目，前端和后端端口不能重復，否則會導致前端或者后端服務起不來。例如前端訪問地址為： http://localhost:8080/ ，后端訪問地址為 http://localhost:8081/ 。后端寫好Controller，當用Axios訪問該接口時，將會報錯： Access to XMLHttpRequest at \\\' http://localhost:8081/login \\\' from
2024年02月05日
瀏覽(30)
前端項目部署自動檢測更新后通知用戶刷新頁面（前端實現(xiàn)，技術框架vue、js、webpack）——方案一：編譯項目時動態(tài)生成一個記錄版本號的文件
當我們重新部署前端項目的時候，如果用戶一直停留在頁面上并未刷新使用，會存在功能使用差異性的問題，因此，當前端部署項目后，需要提醒用戶有去重新加載頁面。 vue、js、webpack 編譯項目時動態(tài)生成一個記錄版本號的文件輪詢（20s、自己設定時間）這個文件，判斷版
2024年02月02日
瀏覽(57)
前端實現(xiàn)vue3使用axios調用后端接口
作用是：拋出基礎請求方式、基礎前綴、請求頭信息、參數(shù)、超時時間、憑證、后端接口返回數(shù)據(jù)類型！作用是：使用請求攔截器和響應攔截器解決下邊的問題從瀏覽器中創(chuàng)建 XMLHttpRequests 從 node.js 創(chuàng)建 http 請求支持 Promise API 攔截請求和響應轉換請求數(shù)據(jù)和響應數(shù)據(jù) 取消
2024年01月20日
瀏覽(24)
SSM(Vue3+ElementPlus+Axios+SSM前后端分離)--搭建Vue 前端工程[二]
需求分析效果圖思路分析使用Vue3+ElementPlus 完成。代碼實現(xiàn) 修改ssm_vuesrcApp.vue 成如下形式, 會刪除部分用不上的代碼，增加修改ssm_vuesrcviewsHomeView.vue , 刪除ssm_vuesrccomponentsHelloWorld.vue 創(chuàng)建ssm_vuesrccomponentsHeader.vue 修改ssm_vuesrcApp.vue , 引入Header 組件創(chuàng)建全局的global
2024年02月13日
瀏覽(50)
vue2 利用網(wǎng)絡代理axios實現(xiàn)開發(fā)環(huán)境前端跨域
vue2 利用網(wǎng)絡代理axios實現(xiàn)前端跨域 vue.config.js 配置代理 vue文件實現(xiàn)開發(fā)環(huán)境跨域請求測試生產(chǎn)環(huán)境跨域跳轉 https://blog.csdn.net/weixin_43858851/article/details/137518111?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22137518111%22%2C%22source%22%3A%22weixin_43858851%22%7D
2024年04月12日
瀏覽(32)
JavaScript - 判斷當前時間是否在指定區(qū)間內(nèi)，例如：9:00~12:00（檢查當前時間是否處于規(guī)定的兩個時間段范圍內(nèi)），適用于 vue.js / uniapp / 微信小程序等前端項目
例如，您想知道當前時間是否處于 9:00 ~ 12:00 時間區(qū)間內(nèi)，然后根據(jù)這個判斷進而實現(xiàn)業(yè)務邏輯。如下示例所示，本文提供一個函數(shù)，您只需要傳入 2 個時間區(qū)間，便可得出當前時間是否在該時間區(qū)間范圍內(nèi)：您可以一鍵復制，直接粘貼到您的項目中。您只需要傳入開始時
2024年02月16日
瀏覽(50)
前端實現(xiàn)真實可動態(tài)變化進度條,axios+ Ant Design Vue實現(xiàn).
最近有一個新需求,要求在前端實現(xiàn)真實的進度條展示,我首先想到了 ?Ant Design Vue的upload組件, 在antd官網(wǎng)里upload組件不僅有上傳功能,并且還附帶了 Progress?進度條組件, 還擁有上傳成功和失敗的兩種狀態(tài)的區(qū)分,可以說是十分貼心了,如圖 ?但是很可惜這個組件上傳文件的話,你要
2024年02月09日
瀏覽(39)