APP
Vue.js
一、Vue.js概述
1. Vue.js介紹
-
Vue.js和Vue相同(讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架
漸進(jìn)式框架要實(shí)現(xiàn)的目標(biāo)就是方便項(xiàng)目增量開發(fā)(即插即用)
2. Vue.js庫(kù)的引入方法
-
在HTML頁(yè)面使用script標(biāo)簽引入Vue.js的庫(kù)即可使用
遠(yuǎn)程CDN <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 本地 <script src="vue.min.js"></script>
3. Vue.js的基本組成
-
Vue.js的基本組成
-
標(biāo)簽內(nèi)容中：插值表達(dá)式
{{}}作用：通常用來(lái)獲取Vue實(shí)例中定義的各個(gè)數(shù)據(jù)(data)
使用場(chǎng)景：可以作為div標(biāo)簽的內(nèi)容
標(biāo)簽屬性中不能使用插值表達(dá)式
-
Vue實(shí)例中：掛載點(diǎn)(element)
el:'xxx'作用：定義Vue實(shí)例掛載的元素節(jié)點(diǎn)，表示Vue接管該區(qū)域，Vue會(huì)管理el選項(xiàng)命中的元素及其內(nèi)部元素
使用場(chǎng)景：一般寫在Vue實(shí)例中，xxx為選擇器
el選擇掛載點(diǎn)時(shí)，建議使用id選擇器
-
Vue實(shí)例中：數(shù)據(jù)對(duì)象
data:{xxx}作用： Vue中用到的數(shù)據(jù)定義在data中
使用場(chǎng)景：一般寫在Vue實(shí)例中，xxx可以是定義的不同類型數(shù)據(jù)
data中的類型
- 普通
key:value，value可以是數(shù)字、字符串、布爾值 - 對(duì)象類型數(shù)據(jù)(value是
{}，在{}中可以包含多組普通key:value) - 數(shù)組類型(value是
[]，在[]中包含多個(gè)value)
- 普通
-
Vue實(shí)例中：方法
methods:{xxx}作用：在
{}中可以包含多組方法定義方法名:function(){}使用場(chǎng)景：一般寫在Vue實(shí)例中，其中在一個(gè)方法的定義中可以使用this獲取當(dāng)前實(shí)例數(shù)據(jù)對(duì)象data中的某字段的value，獲取后的字段可以看作是一個(gè)全局變量，可以在多個(gè)方法的定義中對(duì)其value進(jìn)行改變
-
Vue實(shí)例中的其他屬性
- computed
- filters
- watch
- components
-
示例Code
<body> <div id="app"> <!-- {{}} 雙括號(hào)是 VUE 中的差值表達(dá)式,將表達(dá)式的值輸出到 HTML 頁(yè)面 --> {{name}} <br> {{student.name}} {{student.age}} <ul> <li>{{names[0]}}</li> <li>{{names[1]}}</li> <li>{{names[2]}}</li> </ul> </div> </body> <script> var VM = new Vue({ // 定義 Vue 實(shí)例掛載的元素節(jié)點(diǎn),表示 vue 接管該 div el:"#app", // 定義 model 模型數(shù)據(jù)對(duì)象 data:{ name:"hello, how are you doing", // 對(duì)象類型 student: { name: "Jeff", age: "18" }, // 數(shù)組類型 names: ["Kim", "Chris", "Jack"] } }) </script>
-
4. Vue.js的特點(diǎn)
-
Vue.js聲明式渲染的好處
聲明數(shù)據(jù)，Vue幫我們將數(shù)據(jù)渲染到HTML，將數(shù)據(jù)和DOM分離
使用jQuery將數(shù)據(jù)渲染到HTML有時(shí)需要將數(shù)據(jù)和標(biāo)簽進(jìn)行拼接，這種方式將會(huì)影響程序執(zhí)行效率
在Vue中不需要考慮如何更改DOM元素, 重點(diǎn)放在更改數(shù)據(jù), 數(shù)據(jù)更新之后, 使用數(shù)據(jù)的那個(gè)元素會(huì)同步更新
二、Vue.js常用指令
1. 指令概述
- 指令是帶有
v-前綴的特殊屬性，通過(guò)指令來(lái)操作DOM元素（HTML標(biāo)簽）
2. v-text (獲取data中的數(shù)據(jù))
-
作用: 獲取data中的數(shù)據(jù)，設(shè)置標(biāo)簽的內(nèi)容（類似用插值表達(dá)式）
v-text與插值表達(dá)式的區(qū)別：
若v-text所在的標(biāo)簽中有內(nèi)容，v-text 獲取data數(shù)據(jù)，設(shè)置標(biāo)簽內(nèi)容，會(huì)覆蓋當(dāng)前標(biāo)簽的內(nèi)容
插值表達(dá)式會(huì)將標(biāo)簽的內(nèi)容拼接到v-text獲取的內(nèi)容之后
-
v-text的value中可以使用運(yùn)算符
+拼接額外內(nèi)容（拼接內(nèi)容支持?jǐn)?shù)字或字符串） -
示例Code
<body> <div id="app"> <h1>{{message}}</h1> <!-- 使用插值表達(dá)式,不會(huì)覆蓋 --> <h1>{{message}}golang</h1> <!-- v-text 獲取data數(shù)據(jù),設(shè)置標(biāo)簽內(nèi)容,會(huì)覆蓋之前的內(nèi)容體--> <!-- 拼接字符串 --> <h2 v-text="message+1">golang</h2> <h2 v-text="message+'abc'"></h2> </div> </body> <script> var VM = new Vue({ el: "#app", data: { message: "Java Developer" } }) </script>
2. v-html (設(shè)置標(biāo)簽的 innerHTML)
-
作用： 設(shè)置元素的 innerHTML，可以向當(dāng)前的標(biāo)簽中寫入新的標(biāo)簽
與v-text和插值表達(dá)式一樣可以獲取data中的數(shù)據(jù)，前兩種僅僅是獲取數(shù)據(jù)，v-html可以獲取整個(gè)標(biāo)簽
-
使用場(chǎng)景：
當(dāng)data數(shù)據(jù)中某個(gè)key對(duì)應(yīng)的value是帶鏈接的a標(biāo)簽時(shí)，可以將屬性v-html指定屬性值為這個(gè)數(shù)據(jù)的key
-
示例Code
<body> <div id="app"> <!-- 獲取普通文本 --> {{name}} <h1 v-text="name"></h1> <h1 v-html="name"></h1> <!-- 設(shè)置元素的innerHTML --> <h1 v-html="url"></h1> </div> </body> <script> var VM = new Vue({ el: "#app", data: { name: "JavaScript Developer", url: "<a href='http://www.baidu.com'>baidu</a>" } }) </script>
3. v-on (為標(biāo)簽綁定事件)
-
作用：為元素綁定事件, 比如:
v-on:click="方法名"，可以簡(jiǎn)寫為@click="方法名"綁定的方法定義在 Vue實(shí)例的, methods屬性中定義
-
事件綁定方法，可以傳入自定義參數(shù)（定義方法時(shí),需要定義形參,來(lái)接收實(shí)際的參數(shù)）
-
事件的后面跟上
.修飾符可以對(duì)事件進(jìn)行限制，如.enter可以限制觸發(fā)的按鍵為回車 -
示例Code
Vue實(shí)例methods定義的方法中，使用this代表當(dāng)前實(shí)例的data數(shù)據(jù)對(duì)象來(lái)調(diào)用當(dāng)前實(shí)例data中的字段對(duì)應(yīng)的value
<body> <div id="app"> <!-- 單擊事件 --> <input type="button" value="f1 click here" v-on:click="f1"> <!-- 單擊事件省略寫法 --> <input type="button" value="f2 click here" @click="f2"> <!-- 雙擊事件 --> <input type="button" value="f1 double click" @dblclick="f1"> <!-- 雙擊事件調(diào)用方法并傳參 --> <input type="button" value="hello double click" @dblclick="hello(1, 'a')"> <!-- 輸入后按下回車調(diào)用方法hi --> <input type="text" @keyup.enter="hi"> <h2 @click="f1">{{name}}</h2> </div> </body> <script> var VM = new Vue({ el: "#app", data: { name: "Jeff", hobby: "hiking" }, methods: { f1: function() { alert("123!") }, f2: function() { alert(this.name) console.log(this.hobby) }, hi: function() { alert("hi") }, hello: function(p1, p2) { alert(p1+p2) } }, }) </script>
4. v-show (切換內(nèi)容顯示狀態(tài))
-
作用：根據(jù)布爾值，切換元素內(nèi)容(可以是h1、img標(biāo)簽等)的顯示狀態(tài)（值為true顯示, 為false則隱藏），數(shù)據(jù)改變之后,顯示的狀態(tài)會(huì)同步更新
-
原理：是修改元素的display屬性，實(shí)現(xiàn)顯示或者隱藏
-
使用方法：v-show的屬性值設(shè)置為Vue實(shí)例數(shù)據(jù)對(duì)象data中的值為布爾的字段名
-
示例Code
<body> <div id="app"> <h1 v-show="isShow">Hi, How are you doing?</h1> <button v-on:click="f1">click here</button> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow: true }, methods: { f1: function(){ this.isShow = !this.isShow; } } }) </script>
5. v-if (切換標(biāo)簽的顯示狀態(tài))
-
作用：作用同v-show，根據(jù)布爾值切換元素的顯示狀態(tài)
-
原理：通過(guò)操作DOM元素（隱藏整個(gè)當(dāng)前標(biāo)簽），來(lái)切換顯示狀態(tài)，效率較低
-
使用場(chǎng)景：頻繁切換使用v-show，反之使用v-if
-
示例Code
<body> <div id="app"> <h1 v-if="isShow">Have a good day</h1> <button v-on:click="f1">click here</button> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ isShow: true }, methods: { f1: function(){ this.isShow = !this.isShow; } } }) </script>
6. v-bind (為標(biāo)簽綁定屬性)
-
作用：標(biāo)簽屬性中不能使用插值表達(dá)式，需要使用v-bind為標(biāo)簽綁定屬性
-
使用方法：完整寫法
v-bind:屬性名，可以簡(jiǎn)寫為:屬性名 -
示例Code:
<body> <div id="app"> <!-- 使用v-bind設(shè)置src屬性值 --> <img v-bind:src="imgSrc" > <!-- v-bind簡(jiǎn)寫 設(shè)置src屬性值和設(shè)置title屬性值 --> <img :src="imgSrc" :title="imgTitle" > <!-- 設(shè)置class --> <div v-bind:style="{fontSize: size + 'px'}">v-bind</div> <div :style="{fontSize: size + 'px'}">v-bind</div> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ imgSrc:"./img/icon01.jpg", imgTitle:"image01", size:100 } }) </script>
7. v-for (遍歷數(shù)組生成列表項(xiàng))
-
作用：根據(jù)數(shù)據(jù)生成列表結(jié)構(gòu)
-
數(shù)組經(jīng)常和 v-for結(jié)合使用，數(shù)組有兩個(gè)常用方法:
push()向數(shù)組末尾添加一個(gè)或多個(gè)元素shift()把數(shù)組中的第一個(gè)元素刪除 -
數(shù)組的長(zhǎng)度可以進(jìn)行動(dòng)態(tài)的變化，會(huì)同步更新到頁(yè)面上，是響應(yīng)式的
-
示例Code
<body> <div id="app"> <input type="button" value="add" v-on:click="f1"> <input type="button" value="remove" v-on:click="f2"> <!-- 對(duì)普通數(shù)組進(jìn)行遍歷 --> <ul> <li v-for="(item, index) in arr"> {{index}} city: {{item}} </li> </ul> <!-- 對(duì)對(duì)象數(shù)組進(jìn)行遍歷 --> <ul> <li v-for="p in persons"> {{p.name}} </li> </ul> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ // 普通數(shù)組 arr:["Detroit", "Chicago", "San Francisco"], // 對(duì)象數(shù)組 persons:[ {name: "Jeff"}, {name: "Lucy"}, {name: "Helen"} ] }, methods: { f1: function(){ this.persons.push({name: "Chris"}); }, f2: function(){ this.persons.shift(); } }, }) </script>
三、MVVM模式
1. MVVM概述
-
MVVM模式將頁(yè)面,分層了 M 、V、和VM ,解釋為：
Model: 負(fù)責(zé)數(shù)據(jù)存儲(chǔ)
View: 負(fù)責(zé)頁(yè)面展示
View Model: 負(fù)責(zé)業(yè)務(wù)邏輯處理（比如Ajax請(qǐng)求等），對(duì)數(shù)據(jù)進(jìn)行加工后交給視圖展示
-
示例Code
<body> <div id="app"> <!-- View 視圖部分 --> <h2>{{name}}</h2> </div> </body> <script> //創(chuàng)建的vue實(shí)例,就是 VM ViewModel var VM = new Vue({ el: "#app", //data就是MVVM模式中的 model data: { name: "hello", }, }); </script>
2. 數(shù)據(jù)雙向綁定
-
MVVM提供了數(shù)據(jù)的雙向綁定
-
單向綁定: 就是把Model綁定到View，當(dāng)我們用JavaScript代碼更新Model時(shí)，View就會(huì)自動(dòng)更新
<body> <div id="app"> <input type="text" v-bind:value="message"> <input type="button" value= "next one" v-on:click="f1"> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"how are you doing" }, methods:{ f1:function(){ this.message="I am good" } } }) </script> -
雙向綁定: 用戶更新了View，Model的數(shù)據(jù)也自動(dòng)被更新了，這種情況就是雙向綁定
更新View的情況：
填寫表單就是一個(gè)最直接的例子。當(dāng)用戶填寫表單時(shí)，View的狀態(tài)就被更新了，如果此時(shí)
MVVM框架可以自動(dòng)更新Model的狀態(tài)，那就相當(dāng)于我們把Model和View做了雙向綁定
-
-
v-mode指令實(shí)現(xiàn)數(shù)據(jù)雙向綁定
v-model 指令的作用：
- 便捷的設(shè)置和獲取表單元素的值
- 綁定的數(shù)據(jù)會(huì)和表單元素值相關(guān)聯(lián)
- 雙向數(shù)據(jù)綁定
<body> <div id="app"> <!-- 通過(guò)在view輸入內(nèi)容來(lái)修改model --> <input type="text" v-model="message"><br/> <input type="text" v-model="password"><br/> <!-- 按鈕通過(guò)調(diào)用方法修改model來(lái)改變view上的輸出結(jié)果 --> <input type="button" value="update" @click="f1"><br/> {{message}}<br/> {{password}}<br/> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"how are you doing", password:"123" }, methods: { f1:function(){ this.message="this item has been changed"; this.password="this item has been changed"; } }, }) </script>
四、axios庫(kù)
1. axios概述
-
axios：目前十分流行網(wǎng)絡(luò)請(qǐng)求庫(kù), 專門用來(lái)發(fā)送請(qǐng)求, 其內(nèi)部還是Ajax, 進(jìn)行封裝之后使用更加方便
Vue2.0之后建議用axios替換jQuery Ajax
-
作用: 在瀏覽器中可以幫助我們完成Ajax異步請(qǐng)求的發(fā)送
Ajax 是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù), 維護(hù)用戶體驗(yàn)性, 進(jìn)行網(wǎng)頁(yè)的局部刷新
-
axios庫(kù)的引入方法
<!-- 官網(wǎng)提供的 axios 在線地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 本地引入axios --> <script src="./js/axios.min.js"></script>
2. axios發(fā)送請(qǐng)求
-
GET
-
一般格式
axios.get(URL?key=value&key2=value2).then(function(response){},function(error) {});要訪問(wèn)接口的URL和key主要由接口文檔提供
then方法中的傳參是回調(diào)函數(shù)：
function(response){}表示請(qǐng)求后有響應(yīng)就會(huì)觸發(fā)function(error) {}表示請(qǐng)求后失敗就會(huì)觸發(fā)通過(guò)回調(diào)函數(shù)的形參可以獲取響應(yīng)的內(nèi)容或者錯(cuò)誤信息
-
示例Code
接口文檔
請(qǐng)求地址:https://autumnfish.cn/api/joke/list 請(qǐng)求方法:get 請(qǐng)求參數(shù):num(笑話條數(shù),數(shù)字) 響應(yīng)內(nèi)容:隨機(jī)笑話從URL中獲取2條笑話，打印在console上
<body> <input type="button" value="get請(qǐng)求" id="get"/> </body> <script> document.getElementById("get").onclick = function() { axios.get("https://autumnfish.cn/api/joke/list?num=2").then( //請(qǐng)求成功,調(diào)用 function(resp) { console.log(resp); }, //請(qǐng)求失敗,調(diào)用 function(err) { console.log(err); } ); }; </script>
-
-
POST
-
一般格式
axios.post(URL,{key:value,key2:value2}).then(function(response) {},function(error){})要訪問(wèn)接口的URL和key主要由接口文檔提供
then方法中的傳參是回調(diào)函數(shù)：
function(response){}表示請(qǐng)求后有響應(yīng)就會(huì)觸發(fā)function(error) {}表示請(qǐng)求后失敗就會(huì)觸發(fā)通過(guò)回調(diào)函數(shù)的形參可以獲取響應(yīng)的內(nèi)容或者錯(cuò)誤信息
-
示例Code
接口文檔
請(qǐng)求地址:https://autumnfish.cn/api/user/reg 請(qǐng)求方法:post 請(qǐng)求參數(shù):username(用戶名,字符串) 響應(yīng)內(nèi)容:注冊(cè)成功或失敗通過(guò)username進(jìn)行注冊(cè)，將注冊(cè)結(jié)果打印在控制臺(tái)上
<body> <input type="button" value="post請(qǐng)求" id="post"/> </body> <script> document.getElementById("post").onclick = function() { axios.post("https://autumnfish.cn/api/user/reg", {username:"123456"}).then( //請(qǐng)求成功,調(diào)用 function(resp) { console.log(resp); }, //請(qǐng)求失敗,調(diào)用 function(err) { console.log(err); } ); }; </script>
-
3. axios案例
-
通過(guò)Vue+axios 完成一個(gè)獲取笑話的案例
接口文檔：
請(qǐng)求地址:https://autumnfish.cn/api/joke 請(qǐng)求方法:get 請(qǐng)求參數(shù):無(wú) 響應(yīng)內(nèi)容:隨機(jī)笑話示例Code
axios回調(diào)函數(shù)中this指向已經(jīng)改變, 無(wú)法訪問(wèn)data中的數(shù)據(jù)
解決方案:
- 將this進(jìn)行保存, 回調(diào)函數(shù)中直接使用保存的this即可
- 或者使用ES6的箭頭函數(shù)，就可以使用this
<body> <div id="app"> <input type="button" value="get請(qǐng)求" id="get" v-on:click="getJoke()"/> {{message}} </div> </body> <script> var VM = new Vue({ el:"#app", data:{ message:"default content" }, methods: { getJoke:function() { // 回調(diào)函數(shù)中無(wú)法直接調(diào)用this，需要進(jìn)行保存 var that = this; // 異步訪問(wèn) axios.get("https://autumnfish.cn/api/joke").then( function(resp) { console.log(resp); console.log(resp.data); console.log(that.message); that.message = resp.data; }, function(err) { console.log(err); } ); } }, }) </script> -
解決插值表達(dá)式閃爍的問(wèn)題
-
問(wèn)題：當(dāng)網(wǎng)絡(luò)較慢，網(wǎng)頁(yè)還在加載 Vue.js ，而導(dǎo)致 Vue 來(lái)不及渲染，這時(shí)頁(yè)面就會(huì)顯示出 Vue 源代碼
-
解決方法：可以使用 v-cloak 指令來(lái)解決這一問(wèn)題，可以使頁(yè)面加載完成后再進(jìn)行渲染
-
添加樣式
<style> /* 通過(guò)屬性選擇器,設(shè)置 添加了v-cloak */ [v-cloak] { display: none; } </style> -
在id為app的div中添加v-cloak
<div class="wrap" id="app" v-cloak>
-
-
五、computed
1. 計(jì)算屬性概述
-
作用: 減少運(yùn)算次數(shù)，緩存運(yùn)算結(jié)果，運(yùn)用于重復(fù)相同的計(jì)算
-
定義函數(shù)也可以實(shí)現(xiàn)與 計(jì)算屬性相同的效果,都可以簡(jiǎn)化運(yùn)算
不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值
2. 計(jì)算屬性案例
-
示例Code
<body> <div id="app"> <!-- 重復(fù)調(diào)用插值表達(dá)式 --> <h1>{{a*b}}</h1> <h1>{{a*b}}</h1> <!-- 調(diào)用方法res1 --> <h1>{{res1()}}</h1> <h1>{{res1()}}</h1> <!-- 計(jì)算屬性直接使用屬性名 --> <h1>{{res2}}</h1> <h1>{{res2}}</h1> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ a:10, b:20 }, methods:{ res1:function(){ console.log("res1 is running..."); return this.a*this.b; } }, computed:{ res2:function(){ console.log("res2 is running..."); return this.a*this.b; } } }) </script>
六、filter和watch
1. 過(guò)濾器概述
- 過(guò)濾器常被用來(lái)處理文本格式化的操作
- 過(guò)濾器使用的兩個(gè)位置：插值表達(dá)式
{{}}、v-bind表達(dá)式中 - 過(guò)濾器通過(guò)管道(
|)傳輸數(shù)據(jù)
2. 局部過(guò)濾器
-
示例Code
需求: 通過(guò)過(guò)濾器給電腦價(jià)格前面 添加一個(gè)符號(hào)￥
<body> <div id="app"> <p>price of computer: {{price | addIcon}}</p> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ price:200 }, methods: { }, computed: { }, //局部過(guò)濾器 filters: { //處理函數(shù)，value = price ，是固定參數(shù)，表示"|"前的部分 addIcon(value) { return "￥" + value; } } }) </script>
3. 全局過(guò)濾器
-
示例Code
需求: 將用戶名開頭字母大寫
<body> <div id="app"> <p>{{user.name | changeName}}</p> </div> </body> <script> //在創(chuàng)建Vue實(shí)例之前 創(chuàng)建全局過(guò)濾器 Vue.filter("changeName", function(value){ //將姓名開頭字母大寫,然后再重新拼接 return value.charAt(0).toUpperCase()+value.slice(1); }); var VM = new Vue({ el:"#app", data:{ user:{ name:"tom", } }, }) </script>
4. 偵聽(tīng)器
-
watch：用于觀察Vue實(shí)例上的數(shù)據(jù)變動(dòng)，觀察變量的變化，進(jìn)行相應(yīng)的處理
-
作用：當(dāng)有一些數(shù)據(jù)需要隨其他數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)，可以使用偵聽(tīng)屬性
-
示例Code
<body> <div id="app"> <h2>counter:{{count}}</h2> <input type="button" @click="count++" value="click here"> </div> </body> <script> var VM = new Vue({ el:"#app", data: { count:1 }, watch: { // 監(jiān)聽(tīng)器中的方法名必須是data中的指定數(shù)據(jù)名 count:function(nval, oval) { alert("counter has been changed from : " + oval + " to " + nval); } } }) </script>
5. 偵聽(tīng)器案例
-
需求: 監(jiān)聽(tīng)輸入的firstName和lastName的變化，實(shí)時(shí)顯示fullName
-
示例Code
<body> <div id="app"> <div>firstName: <input type="text" v-model="userFirstName"></div> <div>lastName: <input type="text" v-model="userLastName"></div> {{userFullName}} </div> </body> <script> var VM = new Vue({ el:"#app", data: { userFirstName:"default_firstName", userLastName:"default_lastName", userFullName:"default_fullName" }, watch: { //監(jiān)聽(tīng)，程序在運(yùn)行的時(shí)候，實(shí)時(shí)監(jiān)聽(tīng)事件 userFirstName:function(nval, oval){ this.userFullName = nval + " " + this.userLastName; }, userLastName:function(nval, oval){ this.userFullName = this.userFirstName + " " + nval; } } }) </script>
七、component
1. 組件概述
- 將相同的功能進(jìn)行抽取，封裝為組件；在組件化開發(fā)時(shí)，只需要書寫一次代碼，隨處引入即可使用
- 調(diào)用全局組件或是局部組件只能是在Vue接管的區(qū)域中，以標(biāo)簽
<組件名></組件名>方式調(diào)用
2. 全局組件
-
基本格式
Vue.component("組件名", { template:"<xxx> </xxx>", data(){ return { xxx:"xxx" } }, methods:{ 方法名(){ } } }) -
template模板表示組件的內(nèi)容，在template模板中, 只能有一個(gè)根元素
-
組件中的data 必須是一個(gè)函數(shù), 注意與Vue實(shí)例中的data區(qū)分
在data函數(shù)中的return中定義數(shù)據(jù)的格式與Vue示例中的data相同
-
組件名以小寫開頭，采用短橫線分割命名: 例如 hello-Word
-
示例Code
<body> <div id="app"> <!-- 可以多次使用組件 --> <cony-header></cony-header> <cony-header></cony-header> <cony-header></cony-header> </div> </body> <script> //全局組件位置在Vue實(shí)例之外 Vue.component("cony-header", { //組件的命名一般使用短橫線方式, 組件中的模板只能有一個(gè)根元素 template: "<div>header component code<h1 @click='hello'>{{msg}}</h1></div>", //組件中的data是一個(gè)函數(shù) data() { return { msg: "I am good" } }, methods: { hello(){ alert("hi, how are you doing?"); } }, }); var VM = new Vue({ el:"#app", data:{ }, methods: { }, }); </script>
3. 局部組件
-
基本格式
var VM = new Vue({ el:"app", components: { 組件名: { template: "", data() { return { xxx:"xxx" } } } } }) -
局部組件components指的是寫在Vue實(shí)例中的組件，與el、methods、data同級(jí)
-
在components中可以定義多個(gè)組件
-
示例Code
<body> <div id="app"> <web-msg></web-msg> </div> </body> <script> var VM = new Vue({ el:"#app", data:{ }, methods: { }, components: { "web-msg": { template:"<div><h1>{{msg1}}</h1><h2>{{msg2}}</h2></div>", data() { return{ msg1:"developing...", msg2:"complete!" } } } } }) </script>
4. template和組件分離
-
由于把HTML寫在組件里面不方便也不好看，所以將它們分開寫
-
分離后，瀏覽器會(huì)把 HTML 里的 template 標(biāo)簽過(guò)濾掉，所以 template 標(biāo)簽的內(nèi)容是不會(huì)在頁(yè)面中展示的。直到它被 JS 中的 Vue 調(diào)用
-
在 html 中，template 標(biāo)簽一定要有一個(gè) id，因?yàn)橥ㄟ^(guò) id 是最直接被選中的。 data 和 methods等參數(shù)，全部都要放到 Vue 實(shí)例里面寫
-
示例Code
<body> <div id="app"> <web-msg></web-msg> </div> <!-- 將模板寫在HTML中, 給模板指定一個(gè)ID --> <template id="temp1"> <div> <button @click="show">{{msg}}</button> </div> </template> </body> <script> var VM = new Vue({ el:"#app", data:{ }, methods: { }, components: { "web-msg": { // 模板內(nèi)容與使用id選擇器類似 template:"#temp1", data() { return{ msg: "click here" } }, methods: { show() { alert("wait a moment...") } }, } } }) </script>
八、Vue.js的生命周期
1. 生命周期概述
- 每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程，這個(gè)過(guò)程就是Vue.js的生命周期
2. 常用的鉤子函數(shù)
-
beforeCreate在Vue對(duì)象實(shí)例化之前執(zhí)行 -
created執(zhí)行時(shí)，組件的實(shí)例化已經(jīng)完成，但是DOM還未生成使用場(chǎng)景：定義created函數(shù)在DOM生成之前進(jìn)行查詢操作，created執(zhí)行完成后顯示DOM
-
beforeMount執(zhí)行時(shí)，模板已經(jīng)在內(nèi)存中編輯完成了，但還沒(méi)有渲染到頁(yè)面中beforeMount執(zhí)行時(shí)，模板的插值表達(dá)式原樣顯示，不顯示掛載組件中的內(nèi)容
-
mounted執(zhí)行時(shí)，模板已經(jīng)被渲染到頁(yè)面，執(zhí)行完就會(huì)顯示頁(yè)面的內(nèi)容 -
beforeUpdate執(zhí)行時(shí)，內(nèi)存中的數(shù)據(jù)已經(jīng)更新了，但是還沒(méi)有渲染頁(yè)面 -
updated執(zhí)行時(shí)，內(nèi)存中的數(shù)據(jù)已經(jīng)更新了，此方法執(zhí)行完顯示頁(yè)面
九、router庫(kù)
1. 路由與SPA概述
- 路由：實(shí)現(xiàn)了根據(jù)指定的URL分配到對(duì)應(yīng)的處理程序
- SPA(single page web application)：只有一張Web頁(yè)面的應(yīng)用，加載單個(gè)HTML頁(yè)面并在用戶與應(yīng)用程序交互時(shí)動(dòng)態(tài)局部更新該頁(yè)面Web應(yīng)用程序
3. Vue.js中的路由
-
router：是 Vue.js 官方的路由管理器
-
route：route相當(dāng)于一條路由，一個(gè)路由就對(duì)應(yīng)了一條訪問(wèn)路徑，route也代表一個(gè)路由對(duì)象，一個(gè)路由對(duì)象中包含了path和component兩部分
-
routes：routes代表一組路由，相當(dāng)于是route數(shù)組
-
router-link組件：用于設(shè)置一個(gè)導(dǎo)航鏈接，切換不同 HTML內(nèi)容，to 屬性為目標(biāo)地址， 即要顯示的內(nèi)容
router-link 是對(duì)a標(biāo)簽的封裝,通過(guò)to屬性指定連接
-
router-view組件：路由導(dǎo)航到指定組件后，進(jìn)行渲染顯示頁(yè)面
2. 路由的使用
-
使用步驟：
-
導(dǎo)入Vue.js的router庫(kù)
-
定義路由所需的組件（作為下一步中的臨時(shí)變量）
-
定義路由（數(shù)組），每個(gè)路由有兩個(gè)部分（path和component）
-
創(chuàng)建路由管理實(shí)例VueRouter并初始化實(shí)例中的routes屬性
-
創(chuàng)建Vue實(shí)例，將router注入到vue實(shí)例中，讓整個(gè)應(yīng)用都有路由的功能，使用
$mount()指定掛載點(diǎn)Vue 的$mount()為手動(dòng)掛載，在項(xiàng)目中可用于延時(shí)掛載（例如在掛載之前要進(jìn)行一些其他操作、判斷等）， 之后要手動(dòng)掛載上。new Vue時(shí)，el和$mount并沒(méi)有本質(zhì)上的不同。
-
添加超鏈接：使用router-link組件來(lái)進(jìn)行導(dǎo)航，to屬性指定鏈接(route中定義的path)，指定的鏈接會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的component下
-
添加路由匹配到組件之后的出口：使用router-view組件
-
-
示例Code
測(cè)試效果：
- 打開頁(yè)面后
- 單擊go to homePage后
- 單擊go to newsPage后
<body> <div id="app"> <h1>test router</h1> <p> <!-- 使用 router-link 組件來(lái)導(dǎo)航,to屬性指定鏈接 --> <router-link to="/home">go to homePage</router-link> <router-link to="/news">go to newsPage</router-link> </p> <!-- 路由的出口, 路由匹配到的組件(頁(yè)面)將渲染在這里 --> <router-view></router-view> </div> </body> <script> //1.定義路由所需的組件(作為定義路由中的中間變量) const home = {template: "<div>首頁(yè)</div>"}; const news = {template: "<div>新聞</div>"}; //2.定義路由 每個(gè)路由都有兩部分 path和component const routes = [ {path: "/home", component: home}, {path: "/news", component: news}, ]; //3.創(chuàng)建router路由器實(shí)例,對(duì)路由對(duì)象routes進(jìn)行管理 const router = new VueRouter({ routes: routes, }); //4.創(chuàng)建Vue實(shí)例, 調(diào)用掛載mount函數(shù),讓整個(gè)應(yīng)用都有路由功能 const VM = new Vue({ router }).$mount("#app");//$mount是手動(dòng)掛載代替el </script>
本文摘自 ：https://www.cnblogs.com/
