來自拉鉤教育-就業集訓營

1.1Vue.js

1.2 Vue.js 基礎

1.3 axios

1.4 computed 計算屬性

1.5 filter 過濾器

1.6 watch 偵聽器

1.7 Component 組件

1.8 Vue生命周期

1.9 Vue Router 路由

___________________________________

1.1 Vue.js 介紹

1.1.1 Vue.js是什么?

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用.
Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
自底向上逐層應用：作為漸進式框架要實現的目標就是方便項目增量開發(即插即用)。

官方網站: https://cn.vuejs.org/v2/guide/ 作者尤雨溪是中國人.

1.1.2 為甚么使用Vue?

聲明式渲染: 前后端分離是未來趨勢
漸進式框架: 適用于各種業務需求
簡單易學: 國人開發,中文文檔,不存在語言障礙,易于理解和學習

1.2 Vue.js 基礎

1.2.1 Vue.js的使用

在html頁面使用script引入vue.js的庫即可使用。

遠程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

Vue-CLI腳手架:使用vue.js官方提供的CLI腳本架很方便去創建vue.js工程雛形

1.2.2 入門程序

創建一個vuetest目錄, 并且在目錄下創建 01_vue入門程序.html 文件.
代碼編寫步驟：
1.定義html,引入vue.js
2.定義app div,此區域為vue接管的區域
3.定義Vue實例,接管app區域
4.定義model(數據對象)
5.在app中展示數據

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入門</title>
  <!-- 1.創建HTML文件， 引入vue.js 有兩種方式-->
  <!-- 第一種 引入 vue.js的CDN地址 -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
  </script> -->
  <!-- 第二種 本地導入 -->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 2. 定義app div，此區域作為vue的接管區域 -->
  <div id="app">
    <!-- {{}} 雙括號是VUE中的差值表達式,將表達式的值輸出到HTML頁面 -->
    {{name}}
  </div>
</body>
<script>
//3. 創建vue實例
  var VM = new Vue({
  //定義 Vue實例掛載的元素節點,表示vue接管該div
  el:'#app',
  //4.定義model模型數據對象
  data:{
  name:"哈拉少"
  }
});
</script>
</html>

1. {{}}: 插值表達式

插值表達式的作用?
通常用來獲取Vue實例中定義的數據(data)
屬性節點中不能夠使用插值表達式

2. el: 掛載點

el的作用 ?
定義 Vue實例掛載的元素節點,表示vue接管該區域
Vue的作用范圍是什么 ?
Vue會管理el選項命中的元素,及其內部元素
el選擇掛載點時,是否可以使用其他選擇器 ?
可以,但是建議使用 ID選擇器
是否可以設置其他的DOM元素進行關聯 ?
可以但是建議選擇DIV, 不能使用HTML和Body標簽

3. data: 數據對象

Vue中用到的數據定義在data中
data中可以寫復雜類型
渲染復雜類型數據的時候,遵守js語法

<body>
<!-- 此區域作為vue的接管區域 -->
<div id="app">
{{name}} <br>
{{school.name}} {{school.mobile}}<br>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}}</li>
</ul>
</div>
</body>
<script>
//創建vue實例
var VM = new Vue({
el:'#app',
data:{
name:"雷霆八嘎",
//對象類型數據
school:{
name:"拉鉤教育",
mobile:"1001001"
},
//數組類型
names:["小斌","張百萬","劉能"]
}
});
</script>

1.2.3 聲明式渲染的好處

Vue中的聲明式渲染,簡單理解就是我們聲明數據,Vue幫我們將數據渲染到HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{name}}</h2>
</div>

</body>
<!--
jQuery中，如果 DOM 發生變化, js代碼也需要做相應的改變，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定義好展示數據，并把它放在 DOM 合適的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //掛載點
data: {
name: "Hello Word! !",
},
});
</script>
</html>

1.2.4 Vue常用指令

根據官網的介紹，指令是帶有 v- 前綴的特殊屬性。通過指令來操作DOM元素

1. v-text 指令
作用: 獲取data數據, 設置標簽的內容.
注意: 默認寫法會替換全部內容,使用插值表達式{{}}可以替換指定內容.

代碼示例

<body>
<div id="app">
<!-- v-text 獲取data數據,設置標簽內容,會覆蓋之前的內容體-->
<h2 v-text="message">百度</h2>
<!-- 使用插值表達式,不會覆蓋 -->
<h2>{{message}}百度</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
<script>
var VM = new Vue({
el:"#app",
data:{
message:"Java程序員"
}
})
</script>
</body>
</html>

2. v-html 指令
作用: 設置元素的 innerHTML (可以向元素中寫入新的標簽)

代碼示例

<body>
<div id="app">
<!-- 獲取普通文本 -->
{{message}}
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 設置元素的innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "Java程序員",
url: "<a ,
},
});
</script>

3. v-on 指令
作用: 為元素綁定事件, 比如: v-on:click,可以簡寫為 @click="方法"
綁定的方法定義在 VUE實例的, method屬性中

語法格式

<div id="app">
<!-- 使用v-on 綁定click 點擊事件 -->
<input type="button" value="點擊按鈕" v-on:click="方法名">
<!-- 使用 @符號也可以綁定-->
<input type="button" value="點擊按鈕" @click="方法名">
</div>
var VM = new Vue({
el:"#app",
//通過methods ,專門存放Vue中的方法
methods:{
方法名:function(){
alert("123!")
}
}
})

代碼示例

<body>
<div id="app">
<!-- 使用v-on 綁定click 點擊事件 -->
<input type="button" value="點擊按鈕" v-on:click="show">
<!-- 簡寫 @方式 -->
<input type="button" value="點擊按鈕" @click="show">
<!-- 雙擊事件 -->
<input type="button" value="雙擊擊按鈕" @dblclick="show">
<!-- 綁定點擊事件 -->
<h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
food:"麻辣小龍蝦"
},
//通過methods ,專門存放Vue中的方法
methods:{
show:function(){
alert("程序員!")
},
changeFood:function(){
//使用this獲取
console.log(this.food);
//在VUE中不需要考慮如何更改DOM元素, 重點放在更改數據,數據更新之后,使用數據的那個元素會同步更新
this.food+="真好吃!";
}
}
})
</script>

4. v-show指令
作用: v-show指令, 根據真假值,切換元素的顯示狀態

頁面準備

<body>
<div>
  <img src = "./img/car.gif"/>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代碼示例

<body>
<div id="app">
<input type="button" value="切換狀態" @click="changeShow"> 
<img v-show="isShow" src="./img/car.gif/>
<img v-show="age > 18" src="./img/car.gif/>
</div>
</body>

<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true,
age: 19,
},
methods: {
changeShow: function () {
//觸發方法, 對isShow進行取反
this.isShow = !this.isShow;
},
},
});
</script>

v-show 指令總結

原理是修改元素的display,實現顯示或者隱藏
指令后面的內容,最終會解析為布爾值
值為true 顯示, 為false 則隱藏
數據改變之后,顯示的狀態會同步更新

6. v-if 指令
作用: 根據表達值的真假,切換元素的顯示和隱藏( 操縱dom 元素 )

代碼示例

<body>
<div>
  <img src = "./img/car.gif"/>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代碼示例

<body>
<div id="app">
<input type="button" value="切換狀態" @click="changeShow"> 
<img v-if="isShow" src="./img/car.gif/>
</div>
</body>

<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true
},
methods: {
changeShow: function () {
//觸發方法, 對isShow進行取反
this.isShow = !this.isShow;
},
},
});
</script>

v-if 指令總結

v-if 指令的作用: 根據表達式的真假切換元素的顯示狀態
本質是通過操作dom元素,來切換顯示狀態
表達式為true 元素存在與dom樹,為false從dom樹中移除
頻繁切換使用 v-show ,反之使用v-if

7. v-bind 指令
作用: 設置元素的屬性（比如:src,title,class）

語法格式: v-bind:屬性名=表達式 
<img v-bind:src="imgSrc"/>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"圖片地址"
}
})
v-bind 可以省略，簡寫為冒號 ：
<img :src="imgSrc"/>

代碼示例

<body>
<div id="app">
<!-- 使用v-bind設置src屬性值 -->
<img v-bind:src="imgSrc">
<!-- 簡寫 設置title -->
<img :title="imgTitle">
<!-- 設置class -->
<div :style="{ fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"./img/lagou.jpg",
imgTitle:"拉鉤教育",
size:100
}
})
</script>

v-bind指令總結
v-bind 指令的作用是：為元素綁定屬性
完整寫法 v-bind:屬性名，可以簡寫為 :屬性名

8. v-for 指令
作用: 根據數據生成列表結構

語法結構

<div id="app">
<ul>
<li v-for="item in arr"></li>
</ul>
</div>
var VM = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"tom"},
{name:"jack"}
]
}
})

代碼示例

<body>
<div id="app">
<input type="button" value="添加數據" @click="add">
<input type="button" value="移除數據" @click="remove">
<ul>
<!-- 在li標簽中獲取數組元素 -->
<li v-for="(item,index) in arr">
{{index+1 }}城市: {{item}}
</li>
</ul>
<!-- 使用h2標簽顯示
v-for 結合 v-bind一起使用
-->
<h2 v-for="p in persons" v-bind:title="p.name">
{{p.name}}
</h2>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
//普通數組
arr:["上海","北京","天津","杭州"],
//對象數組
persons:[
{name:"尼古拉斯·趙四"},
{name:"萊安納多·小沈陽"}
]
},
methods: {
add:function(){
//push 添加
this.persons.push({name:"多利安·劉能"})
},
remove:function(){
this.persons.shift();
}
}
})
</script>

v-for指令總結

v-for 指令的作用: 根據數據生成列表結構
數組經常和 v-for結合使用,數組有兩個常用方法:
1. push() 向數組末尾添加一個或多個元素
2. shift() 把數組中的第一個元素刪除
語法是: (item,index) in 數據
item和index 可以結合其他指令一起使用
數組的長度變化,會同步更新到頁面上,是響應式的

9. v-on 指令補充

傳遞自定義參數 : 函數調用傳參
事件修飾符: 對事件觸發的方式進行限制

代碼示例

<body>
<div id="app">
<!-- 函數傳參 -->
<input
type="button"
value="禮物刷起來"
@click="showTime(666,'愛你老鐵!')"
/>
<!-- 事件修飾符 指定哪些方式可以觸發事件 -->
<input type="text" @keyup.enter="hi" />
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {},
methods: {
showTime: function (p1, p2) {
console.log(p1);
console.log(p2);
},
hi: function () {
alert("你好嗎?");
},
},
});
</script>

總結

事件綁定方法,可以傳入自定義參數
定義方法時,需要定義形參,來接收實際的參數
事件的后面跟上 .修飾符可以對事件進行限制
.enter 可以限制觸發的按鍵為回車
事件修飾符有許多使用時可以查詢文檔

10. MVVM模式

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式.
MVVM模式將頁面,分層了 M 、V、和VM ,解釋為：

Model: 負責數據存儲
View: 負責頁面展示
View Model: 負責業務邏輯處理（比如Ajax請求等），對數據進行加工后交給視圖展示

<body>
<div id="app">
<!-- View 視圖部分 -->
<h2>{{name}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//創建的vue實例,就是 VM ViewModel
var VM = new Vue({
el: "#app",
//data就是MVVM模式中的 model
data: {
name: "hello",
},
});
</script>

01.jpg

首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵。
1.從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據；
2.從Model側看，當我們更新Model中的數據時，Data Bindings工具會幫我們更新頁面中的DOM元素。
MVVM的思想,主要是為了讓我們的開發更加的方便,因為MVVM提供了數據的雙向綁定

11. v-mode 指令
作用: 獲取和設置表單元素的值(實現雙向數據綁定)

雙向數據綁定
1.單向綁定: 就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新。
2.雙向綁定: 用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定。
什么情況下用戶可以更新View呢？
1.填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，如果此時MVVM框架可以自動更新Model的狀態，那就相當于我們把Model和View做了雙向綁定：
代碼案例

<body>
<div id="app">
<input type="button" value="修改message" @click="update" />
<!-- View 視圖 -->
<!-- <input type="text" v-bind:value="message" /> -->
<!-- v-model 實現雙向數據綁定 -->
<input type="text" v-model="message" />
<input type="text" v-model="password" />
<h2>{{message}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//VM 業務邏輯控制
var VM = new Vue({
el: "#app",
//Model 數據存儲
data: {
message: "拉鉤教育訓練營",
password: 123,
},
methods: {
update: function () {
this.message = "拉鉤";
},
},
});
</script>

v-model指令總結

v-model 指令的作用是便捷的設置和獲取表單元素的值
綁定的數據會和表單元素值相關聯
雙向數據綁定

1.3 axios

1.3.1 Ajax回顧

1.3.1.1 什么是Ajax?

Ajax 是指一種創建交互式網頁應用的開發技術。Ajax = 異步 JavaScript 和 XML。

1.3.1.2 Ajax的作用

Ajax 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新（局部更新）。傳統的網頁如果需要更新內容，必須重載整個網頁頁面。
簡單記: Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術, 維護用戶體驗性, 進行網頁的局部刷新.

1.3.1.3 異步與同步

瀏覽器訪問服務器的方式
1.同步訪問: 客戶端必須等待服務器端的響應,在等待過程中不能進行其他操作
2.異步訪問: 客戶端不需要等待服務的響應,在等待期間,瀏覽器可以進行其他操作

12.jpg

1.3.1 axios介紹

VUE中結合網絡數據進行應用的開發
-目前十分流行網絡請求庫,專門用來發送請求,其內部還是ajax,進行封裝之后使用更加方便

axios作用: 在瀏覽器中可以幫助我們完成 ajax異步請求的發送.

Vue2.0之后，尤雨溪推薦大家用axios替換JQuery ajax

1.3.2 axios入門

使用步驟:

導包

<!-- 官網提供的 axios 在線地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

請求方式,以GET和POST舉例
GET

axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

05.jpg

POST

axios.post(地址,{key:value,key2:value2}).then(function(response)
{},function(error){})

1.3.3 axios總結

axios 必須導包才能使用
使用get或者post方法,就可以發送請求
then方法中的回調函數,會在請求成功或者請求失敗的時候觸發
通過回調函數的形參可以獲取響應的內容,或者錯誤信息

1.3.4 解決頁面閃爍問題

v-cloak指令
作用: 解決插值表達式閃爍問題
當網絡較慢，網頁還在加載 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 源代碼。我們可以使用 v-cloak 指令來解決這一問題。

添加樣式

<style>
/* 通過屬性選擇器,設置 添加了v-cloak */
[v-cloak] {
display: none;
}
</style>

在id為app的div中添加 v-cloak

<div class="wrap" id="app" v-cloak>

1.4 computed 計算屬性

1.4.1 什么是計算屬性

在Vue應用中，在模板中雙向綁定一些數據或者表達式，但是表達式如果過長，或者邏輯更為復雜時，就會變得臃腫甚至難以維護和閱讀，比如下面的代碼:

<div>
寫在雙括號中的表達式太長了,不利于閱讀
{{text.split(',').reverse().join(',')}}
</div>.
將這段操作text.split(',').reverse().join(',') 放到計算屬性中,最終返回一個結果值就可以

computed 的作用: 減少運算次數, 緩存運算結果. 運用于重復相同的計算

<body>
<div id="app">
<!-- <h1>{{a*b}}</h1>
<h1>{{a*b}}</h1> -->
<!-- <h1>{{res()}}</h1>
<h1>{{res()}}</h1> -->
<h1>{{res2}}</h1>
<h1>{{res2}}</h1>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
a: 10,
b: 20,
},
methods: {
res: function () {
console.log("res方法執行");
return this.a * this.b;
},
},
//使用計算屬性進行優化 減少運算次數,用于重復相同的運算
computed: {
res2: function () {
console.log("res2方法執行");
return this.a * this.b;
},
},
});
</script>

1.4.2 computed總結

定義函數也可以實現與計算屬性相同的效果,都可以簡化運算。
不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。

1.5 filter 過濾器

1.5.1 什么是過濾器

過濾器是對即將顯示的數據做進一步的篩選處理，然后進行顯示，值得注意的是過濾器并沒有改變原來的數據，只是在原數據的基礎上產生新的數據。
數據加工車間,對值進行篩選加工.

1.5.2 過濾器使用位置

雙括號插值內

{{ msg | filterA }} msg是需要處理的數據, filterA是過濾器, | 這個豎線是管道,通過這個管道將數據傳輸給過濾器進行過濾 加工操作

v-bind綁定的值的地方。

<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>

1.5.3 過濾器

1.局部過濾器
需求: 通過過濾器給電腦價格前面添加一個符號￥

<body>
<div id="app">
<p>電腦價格: {{price | addIcon}}</p>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //掛載點
data: {
price: 200,
},
methods: {}, //方法
computed: {}, //計算屬性
//局部過濾器
filters: {
//處理函數,value = price ,是固定參數
addIcon(value) {
return "￥" + value;
},
},
});
</script>

2.全局過濾器
需求: 將用戶名開頭字母大寫

<body>
<div id="app">
<p>{{user.name | changeName}}</p>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
//在創建Vue實例之前 創建全局過濾器
Vue.filter("changeName", function (value) {
//將姓名開頭字母大寫,然后再重新拼接
return value.charAt(0).toUpperCase() + value.slice(1);
});
var VM = new Vue({
el: "#app", //掛載點
data: {
user: { name: "tom" },
},
});
</script>

1.5.4 總結

過濾器常用來處理文本格式化的操作。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式
過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示

1.6 watch 偵聽器

1.6.1 什么是偵聽器

Vue.js 提供了一個方法 watch，它用于觀察Vue實例上的數據變動。
作用: 當你有一些數據需要隨著其它數據變動而變動時，可以使用偵聽屬性

1.6.2 案例演示

需求: 監聽姓名變化,實時顯示

image.png

<body>
<div id="app">
<label>名：<input type="text" v-model="firstName" /></label>
<label>姓：<input type="text" v-model="lastName" /></label>
{{fullNameComputed}}
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
firstName: "",
lastName: "",
fullName: "",
},
//監聽，程序在運行的時候，實時監聽事件
watch: {
//參數說明：1、新值，2、舊值
firstName(newValue, oldValue) {
this.fullName = newValue + " " + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + " " + newValue;
},
},
computed: {
fullNameComputed() {
return this.firstName + " " + this.lastName;
},
},
});
</script>

1.7 Component 組件

1.7.1 組件介紹

1.組件（Component）是自定義封裝的功能。在前端開發過程中，經常出現多個網頁的功能是重復的，而且很多不同的頁面之間，也存在同樣的功能。

2.我們將相同的功能進行抽取,封裝為組件,這樣，前端人員就可以在組件化開發時，只需要書寫一次代碼，隨處引入即可使用。

3.組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹

image.png

vue的組件有兩種: 全局組件和局部組件

1.7.2 全局組件

語法格式:

Vue.component("組件名稱", {
template: "html代碼", // 組件的HTML結構代碼
data(){ //組件數據
return {}
},
methods: { // 組件的相關的js方法
方法名(){
// 邏輯代碼
}
}
})

注意:

組件名以小寫開頭，采用短橫線分割命名: 例如 hello-Word
組件中的data 必須是一個函數,注意與Vue實例中的data區分
在template模板中, 只能有一個根元素

<body>
<div id="app">
<!-- 使用組件,可以使用多次 -->
<lagou-header></lagou-header>
<lagou-header></lagou-header>
<lagou-header></lagou-header>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
//全局組件
Vue.component("lagou-header", {
//組件的命名一般使用短橫線方式,組件中的模板只能有一個根元素
template: "<div>頭部組件的HTML代碼<h1 @click='hello'>{{msg}}</h1><div>",
data() {
//組件中的data是一個函數
return {
msg: "hello這里是組件中的data數據",
};
},
methods: {
hello() {
alert("嗨 你好!");
},
},
});
var VM = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>

1.7.3 局部組件

相比起全局組件，局部組件只能在同一個實例內才能被調用。局部組件的寫法和全局組件差不多。唯一不同就是：局部組件要寫在Vue實例里面。

new Vue({
el: "#app",
components: {
組件名: {
// 組件結構
template: "HTML代碼",
// data數據
data() { return { msg:"xxxx" };},
},
},
});

注意:
創建局部組件，注意 components，注意末尾有 ‘s’，而全局組件是不用+ ‘s’ 的。這意味著，components 里可以創建多個組件。

<body>
<div id="app">
<web-msg></web-msg>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
//組件名稱
"web-msg": {
//組件內容
template: "<div><h1>{{msg1}}</h1><h1>{{msg2}}</h1></div>",
data() {
return {
msg1: "開發ing...",
msg2: "開發完成!",
};
},
},
},
});
</script>

1.7.4 組件與模板分離

由于把html語言寫在組件里面很不方便，也不太好看所以將它們分開寫。

<body>
<div id="app">
<web-msg></web-msg>
</div>
<!-- 將模板寫在HTML中, 給模板指定一個ID -->
<template id="tmp1">
<div>
<button @click="show">{{msg}}</button>
</div>
</template>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
components: {
"web-msg": {
template: "#tmp1",
data() {
return {
msg: "點擊查詢",
};
},
methods: {
show() {
alert("正在查詢,請稍等...");
},
},
},
"web-msg2": {},
},
});
</script>

總結:

上面這種寫法，瀏覽器會把 html 里的 template 標簽過濾掉。所以 template 標簽的內容是不會在頁面中展示的。直到它被 JS 中的 Vue 調用。
在 html 中，template 標簽一定要有一個 id，因為通過 id 是最直接被選中的。 data 和 methods等參數，全部都要放到 Vue 實例里面寫

1.8 Vue生命周期

1.8.1 生命周期圖示

每個Vue實例在被創建之前都要經過一系列的初始化過程,這個過程就是vue的生命周期
了解生命周期的好處:

找錯誤
解決需求
下圖展示了實例的生命周期。你不需要立馬弄明白所有的東西，不過隨著你的不斷學習和使用，它的參考價值會越來越高。

08.jpg

1.8.2 鉤子函數介紹

生命周期中的鉤子函數
鉤子函數：鉤子函數是在一個事件觸發的時候，在系統級捕獲到了他，然后做一些操作

函數	說明
beforeCreate()	在創建Vue實例之前,可以執行這個方法. 例如加載動畫操作
created()	實例創建完成,屬性綁定好了,但是DOM還沒有生成.
beforeMount()	模板已經在內存中編輯完成了，尚未被渲染到頁面中.
mounted()	內存中的模板已經渲染到頁面，用戶已經可以看見內容.
beforeUpdate()	數據更新的前一刻 , 組件在發生更新之前,調用的函數
updated()	updated執行時，內存中的數據已更新，并且頁面已經被渲染
beforeDestroy ()	鉤子函數在實例銷毀之前調用
destroyed ()	鉤子函數在Vue 實例銷毀后調用

1.9 Vue Router 路由

1.9.1 什么是路由?

在Web開發中，路由是指根據URL分配到對應的處理程序。路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖單頁面web應用（single page web application，SPA）

09.jpg

1.9.2 什么是SPA ?
百度百科

單頁面Web應用（single page web application，SPA），就是只有一張Web頁面的應用，是加載單個HTML 頁面并在用戶與應用程序交互時動態更新該頁面的Web應用程序。

單頁應用不存在頁面跳轉，它本身只有一個HTML頁面。我們傳統意義上的頁面跳轉在單頁應用的概念下轉變為了 body 內某些元素的替換和更新，舉個例子:

10.jpg

整個body的內容從登錄組件變成了歡迎頁組件, 從視覺上感受頁面已經進行了跳轉。但實際上，頁面只是隨著用戶操作，實現了局部內容更新,依然還是在index.html 頁面中。
單頁面應用的好處:

用戶操作體驗好，用戶不用刷新頁面，整個交互過程都是通過Ajax來操作。
適合前后端分離開發，服務端提供http接口，前端請求http接口獲取數據，使用JS進行客戶端渲染。

1.9.3 路由相關的概念

router :
是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用（SPA）變得易
如反掌 ,router 就相當于一個管理者，它來管理路由。
route:
ruter相當于路由器, route就相當于一條路由.比如: Home按鈕 => home內容，這是一條route,
news按鈕 => news內容，這是另一條路由。
routes :
是一組路由，把上面的每一條路由組合起來，形成一個數組。[{home 按鈕 =>home內容 }， {
about按鈕 => about 內容}]
router-link組件:
router-link 是一個組件，是對標簽的一個封裝. 該組件用于設置一個導航鏈接，切換不同 HTML
內容。 to 屬性為目標地址，即要顯示的內容
router-view 組件:
路由導航到指定組件后,進行渲染顯示頁面.

1.9.4 使用路由

(一 ) Vue.js 路由需要載入 vue-router 庫

//方式1: 本地導入
<script src="vue-router.min.js"></script>
//方式2: CDN
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

(二) 使用步驟

定義路由所需的組件
定義路由每個路由都由兩部分 path (路徑) 和component (組件)
創建router路由器實例 ,管理路由
創建Vue實例, 注入路由對象, 使用$mount() 指定掛載點

Vue 的 $mount()為手動掛載，在項目中可用于延時掛載（例如在掛載之前要進行一些其他操作、判斷等），之后要手動掛載上。new Vue時，el和$ mount并沒有本質上的不同。

(三) HTML代碼

<body>
<div id="app">
<h1>渣浪.com</h1>
<p>
<!-- 使用 router-link 組件來導航,to屬性指定鏈接 -->
<router-link to="/home">go to home</router-link>
<router-link to="/news">go to news</router-link>
</p>
<!-- 路由的出口, 路由匹配到的組件(頁面)將渲染在這里 -->
<router-view></router-view>
</div>
</body>

(四)JS代碼

<script src="./vue.min.js"></script>
<script src="./vue-router.min.js"></script>
<script>
//1.定義路由所需的組件
const home = { template: "<div>首頁</div>" };
const news = { template: "<div>新聞</div>" };
//2.定義路由 每個路由都有兩部分 path和component
const routes = [
{ path: "/home", component: home },
{ path: "/news", component: news },
];
//3.創建router路由器實例,對路由對象routes進行管理.
const router = new VueRouter({
routes: routes,
});
//4.創建Vue實例, 調用掛載mount函數,讓整個應用都有路由功能
const VM = new Vue({
router,
}).$mount("#app"); //$mount是手動掛載代替el
</script>

1.9.5 路由總結

router是Vue中的路由管理器對象,用來管理路由.
route是路由對象,一個路由就對應了一條訪問路徑,一組路由用routes表示
每個路由對象都有兩部分 path(路徑)和component (組件)
router-link 是對a標簽的封裝,通過to屬性指定連接
router-view 路由訪問到指定組件后,進行頁面展示

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue基礎&&進階

來自拉鉤教育-就業集訓營

1.1Vue.js

1.2 Vue.js 基礎

1.3 axios

1.4 computed 計算屬性

1.5 filter 過濾器

1.6 watch 偵聽器

1.7 Component 組件

1.8 Vue生命周期

1.9 Vue Router 路由

___________________________________

1.1 Vue.js 介紹

1.1.1 Vue.js是什么?

1.1.2 為甚么使用Vue?

1.2 Vue.js 基礎

1.2.1 Vue.js的使用

1.2.2 入門程序

1.2.3 聲明式渲染的好處

1.2.4 Vue常用指令

1.3 axios

1.3.1 Ajax回顧

1.3.1.1 什么是Ajax?

1.3.1.2 Ajax的作用

1.3.1.3 異步與同步

1.3.1 axios介紹

1.3.2 axios入門

1.3.3 axios總結

1.3.4 解決頁面閃爍問題

1.4 computed 計算屬性

1.4.1 什么是計算屬性

1.4.2 computed總結

1.5 filter 過濾器

1.5.1 什么是過濾器

1.5.2 過濾器使用位置

1.5.3 過濾器

1.5.4 總結

1.6 watch 偵聽器

1.6.1 什么是偵聽器

1.6.2 案例演示

1.7 Component 組件

1.7.1 組件介紹

1.7.2 全局組件

1.7.3 局部組件

1.7.4 組件與模板分離

1.8 Vue生命周期

1.8.1 生命周期圖示

1.8.2 鉤子函數介紹

1.9 Vue Router 路由

1.9.1 什么是路由?

1.9.3 路由相關的概念

1.9.4 使用路由

1.9.5 路由總結

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频