文章目錄

- - - 備注
一、Vue簡介
- - - 簡介
    - MVVM--雙向資料系結模式
    - 其他MVVM實踐者
    - 為什么使用Vue.js
    - 兩大核心要素
二、Vue開發
- - - 引入Vue
    - 快速體驗
    - - 注釋
- 1.插值運算式 {{}}
- - - - 注釋
2.分支 v-if
- - - - 注釋
3.分支 v-show
- - - - 注釋
4.回圈 v-for
- - - 遍歷陣列
    - - 注釋
    - 遍歷物件
    - - 注釋
    - 遍歷物件陣列
    - - 注釋
5.Vue屬性系結
- - - - 注釋
6.Vue事件系結
- - - v-on
    - - 注釋
      - 注釋
    - 事件修飾符
    - - 官方定義
      - 注釋
7.計算屬性
- - - - 注釋
8.Vue的組件化
- - - - 什么是組件化
- 1.組件的全域注冊
- - - - 注釋
- 2.組件本地注冊
- - - - 注釋
- 3.組件的生命周期
- - - - 理解
      - 注釋
9.使用Vue-Cli搭建Vue專案
- - - - 什么是vue-cli
      - node.js安裝
      - 在node.js中安裝vue-cli
      - 使用vue-cli下載專案骨架搭建我們的專案
      - 創建專案目錄并打開
      - 使用webpack骨架快速創建專案目錄
10.webpack專案結構
- - - 整體結構
    - src目錄
    - - components：
      - router目錄
      - App.vue
      - main.js
十一、Vue組件間的引數傳遞
- 1.如何在父組件App.vue中使用子組件
- 2.父子組件之間如何傳遞引數
- 3.子傳父
- - - - 注釋
十二、路由
- 1.使用場景
- 2.安裝路由模塊
- 3.撰寫專案
- - - - 注釋
- 4.路由的引數傳遞
- - - - 設參
      - 傳參
      - 接參
- 5.程式式路由的實作
十三、Axios發送異步請求
- 1.安裝Axios
- 2.使用Axios
十四、Vue實戰專案
- 1.新建專案
- 2.Vue整合Element UI
十五、Vuex的應用

備注

網上的書籍以及官方檔案已經把資料總結的很詳細了，這里我不再羅列成體系的理論知識，而是重點記錄如何將Vue的各個功能應用到我們所寫的的代碼上，以及重難點、易錯部分的分析，

一、Vue簡介

簡介

漸進式js框架，只關心視圖層，就是MVC中的View視圖層，使用Vue需要先熟練掌握HTML/CSS/JavaScript，兼容性強，生態好，性能好

MVVM–雙向資料系結模式

Model：模型層，這里表示JavaScript物件

View：視圖層，這里表示DOM，即HTML操作的元素

ViewModel：連接視圖和資料的中間件，

Model模型層通過ViewModel這個中間來表現View視圖，Vue.js就是ViewModel的實踐者

在這里插入圖片描述
通過ViewModel，View可以監聽Model，Model系結到了View上，這樣DOM操作的資料可以實時的修改到Model上，

實時的修改很重要，否則就要通過頁面重繪才能看到頁面變化，這樣浪費資源；js也能實時修改，但是Vue更高效

在上圖的文本域中，左側的框里實時顯示右側的狀態（資料系結），左側的資料修改又實時影響了右側的狀態（監聽），這就是雙向系結

在MVVM架構中，不允許資料和視圖直接通信，只能通過ViewModel通信

其他MVVM實踐者

AnaularJS ReactJS 微信小程式

為什么使用Vue.js

輕量只有20多kb，適合移動端，易學習，取長補短且有獨特功能(計算屬性)，開源活躍度高，

兩大核心要素

資料驅動、
在這里插入圖片描述

組件化

1.頁面上的每個獨立區域視為一個組件

2.每個組件對應一個工程目錄，組件所需各種資源就在這個工程目錄下維護

3.頁面只是提供組件的容器，組件可以自由嵌套、復用，形成完整頁面

二、Vue開發

引入Vue

通過CDN技術，在線引入，找到對應的版本，復制鏈接地址，引入<script>標簽即可，https://www.bootcdn.cn/

快速體驗

打開Hbuilder，新建目錄，簡單html專案，新建一個目錄，創建一個html檔案
在這里插入圖片描述

添加script標簽，引入vue的cdn地址，生產環境使用min版本，開發環境使用普通版本，方便查看代碼、例外

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			姓名: {{name}}
			<hr/>
			年齡: {{age}}
			<hr/>
			學校: {{school.name}}
			<hr/>
			地址: {{school.addr}}
			<hr/>
			結束語: {{show()}}
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.common.dev.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					name: "zhangsan",
					age: 20,
					gender: 'male',
					school: {
						name: 'yucai',
						addr: 'shenzhen'
					}
				},
				methods: {
					show: function(){
						return "hello vue";
					}
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

el 就是element元素,指明當前哪些元素會被vue系結，對應了MVVM中的data bindings
data 就是model，用來提供資料
div 給定一個id，在el中系結這個id，視圖層就可以拿到vue物件中的資料，我們習慣用div作為容器
{{}} 叫差值運算式，用來在視圖層顯示model中的資料
methods 用來定義vue中的方法

1.插值運算式 {{}}

相當于視圖層和資料層的連接方式，快速的從資料層獲取資料并展示在視圖層上，

主要用于獲取對應的資料，這個例子中我們將差值運算式里的內容寫死了，實際使用時換成vue物件中的代碼即可

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插值運算式</title>
	</head>
	<body>
		<div id="app">
			屬性: {{name}}
			<hr/>
			陣列元素: {{[1,2,3,4][1]}}
			<hr />
			物件元素: {{{username:"list",age:20}.age}}
			<hr />
			三目運算: {{1>0?"true":"false"}}
			<hr />
			四則運算: {{101*2+100/10-30}}
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					name: "zhangsan",
					age: 21,
					school: {
						name: "yucai",
						addr: "shenzhen"
					}
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.可以獲取vue物件的屬性、方法
2.可以獲取陣列中的內容，比如，[1,2,3,4]中的第二個元素，這里為了舉例將陣列寫死了，可以用變數表示
3.可以獲得物件中的屬性,
4.可以使用三目運算
5.做簡單的四則運算

2.分支 v-if

邏輯與java中的if-else相同，包含v-if v-else v-else-if，這叫標簽屬性

所有有關vue的標簽屬性只能用在vue系結過id的容器中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue分支</title>
	</head>
	<body>
		<div id="app">
			<p v-if="weather">今天下雨</p>
			<p v-else-if="friends">約朋友出去玩</p>
			<p v-else>只能自娛自樂</p>			
			<button type="button" @click="friends=!friends">按鈕</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					weather: false,
					friends: false,
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.v-if 相當于 if(){…}，v-if為true，那么顯示當前標簽，否則不顯示，繼續往下走
2.v-else-if 相當于 else if(){…}，表示否則如果為true，那么顯示標簽，否則不顯示，繼續往下走
3.v-else 相當于 else{…}，表示上面條件都不滿足，那么就顯示當前標簽，v-else可以不加屬性值直接收尾，也可以加上面的某一屬性值作為其對立面收尾
4.button按鈕系結點擊事件，切換了friends狀態，vue分支則實時改變了顯示的標簽
5.MVVM的體現：這就是視圖層改變了模型層的屬性值，模型層屬性的變化又改變了視圖層標簽的顯示

3.分支 v-show

與 v-if 功能相似，但也不同

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue分支</title>
	</head>
	<body>
		<div id="app">
			<p v-show="friends">我有很多朋友</p>
			<button type="button" @click="friends=!friends">按鈕</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					friends: false,
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.v-show和v-if在使用效果上一樣，但是v-show通過修改標簽CSS樣式display控制顯隱，v-if通過添加和洗掉DOM元素控制顯隱，可以通過查看瀏覽器控制臺驗證
2.在頻繁控制顯隱的情況下，v-show的方式效率更高，推薦使用

4.回圈 v-for

遍歷陣列

<html>
	<head>
		<meta charset="utf-8">
		<title>回圈 v-for</title>
	</head>
	<body>
		<div id="app">
			<ul>
				普通回圈遍歷陣列
				<li v-for="a in args">{{a}}</li>
			</ul>
			<ul>
				帶索引回圈遍歷陣列
				<li v-for="(a,i) in args">
					i={{i}}, a={{a}}
				</li>
			</ul>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					args: [1,2,3,4,5],
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.普通for回圈：第一個li標簽加v-for屬性將其遍歷，在v-for的屬性值中，a表示每個元素，args對應data中的陣列，
2.帶索引for回圈：第二個li標簽中，i是回圈變數，相當于陣列元素下標

遍歷物件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>回圈 v-for</title>
	</head>
	<body>
		<div id="app">
			<ul>
				遍歷物件
				<li v-for="(v,k,i) in stu">
					k={{k}},v={{v}},i={{i}}
				</li>
			</ul>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					stu: {
						username:"lisa",
						age: 20,
						gender: "female"
					}
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.遍歷物件：k表示當前屬性的鍵，v表示當前屬性的值，i為遍歷索引

遍歷物件陣列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>回圈 v-for</title>
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<div id="app" style="margin-left: 40px;">
			<h3>遍歷物件陣列，嵌套回圈展示</h3>
			<ul v-for="student in students">
				<li v-for="(v,k,i) in student">
					i={{i}},v={{v}},k={{k}}
				</li>
			</ul>
			<h3>遍歷物件陣列，表格展示</h3>
			<table class="table table-hover" align="center" border="1px">
				<tr>
					<th>索引</th>
					<th>姓名</th>
					<th>年齡</th>
					<th>性別</th>
					<th>物件</th>
				</tr>
				<tr v-for="(student,i) in students">
					<td>{{i}}</td>
					<td>{{student.username}}</td>
					<td>{{student.age}}</td>
					<td>{{student.gender}}</td>
					<td>{{student}}</td>
				</tr>
			</table>
		</div>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
		    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		    <!-- 加載 Bootstrap 的所有 JavaScript 插件，你也可以根據需要只加載單個插件， -->
		    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					students: [
						{
							username: "jack",
							age: 21,
							gender: "male"
						},
						{
							username: "rose",
							age: 20,
							gender: "female"
						},
						{
							username: "john",
							age: 27,
							gender: "male"
						},
					]
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.第一種方式，嵌套回圈，先編陣列再遍歷物件
2.第二種方式，使用前端模板，比如，添加bootstrap的cdn實作表格展示

5.Vue屬性系結

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="title" />
			{{title}}
			<hr />
			<a v-bind:href="link">點我</a>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					title: "hello vue",
					link: "http://www.baidu.com",
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.差值運算式可以寫在html標簽的內容上，但是不能作為標簽的屬性值也就是value="{{title}}"這樣寫是不對的
2.v-model可以將title系結input的value屬性值，屬性修改造成title改變，進而差值表達的值也改變
3.如果想在標簽的屬性中使用vue物件中的屬性值，可以通過v-bind作為普通標簽的前綴
4.在這個a標簽中，href前面加v-bind，那么此時的屬性值對應的就是vue中的屬性
5.v-bind:也可簡寫，直接寫成:

6.Vue事件系結

三步驟：設參、傳參、接參

v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue事件</title>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="btnfn">按鈕</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
					btnfn: function(){
						alert("hello world")
					}
				},
			});
		</script>
	</body>
</html>

注釋

1.methods中通常定義我們需要使用的方法
2.v-on:用來給button按鈕系結事件，然后是什么型別的事件(這里是click)，=右側表示該事件對應了什么函式
3.常見的事件有，click單擊，dbclick雙擊，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue涉參事件</title>
	</head>
	<body>
		<div id="app">
			sum = {{sum}}<br/>
			步長: <input type="text" v-model="step" /><br/>
			<button type="button" @click="increase(step)">計數</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					sum: 0,
					step: 1
				},
				methods: {
					increase: function(step){
						this.sum += this.step-0;
					}
				}
			});
		</script>
	</body>
</html>

注釋

1.v-on:可以簡寫為@
2.methods中要想使用data中的元素，必須使用this.
3.定義好方法，以及涉及參規則，在點擊事件后面指定函式，傳參即可
4.這里沒有將引數寫死，而是在input的屬性輸入來中定義，利用v-model將屬性與vue物件中的data中的元素對應
5.thid.step默認是字串，-0讓其參與數值運算，這樣自動變成數值型別

事件修飾符

可以使用vue定義好的事件修飾符，快速達到效果

官方定義

在事件處理程式中呼叫 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求，盡管我們可以在方法中輕松實作這點，但更好的方式是：方法只有純粹的資料邏輯，而不是去處理 DOM 事件細節，

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符，之前提過，修飾符是由點開頭的指令后綴來表示的，

意思是這兩個事件處理底層使用的DOM，我們希望直接處理邏輯，所以我們底層直接定義事件處理的邏輯

.stop .prevent .capture .self .once .passive

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再多載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函式 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue事件修飾符</title>
	</head>
	<body>
		<div id="app">
			滑鼠移動事件:
			<p @mousemove="mouseMove">
				x: {{x}}, y: {{y}}
				<span @mousemove.stop>滑鼠移動到此即停止</span>
			</p>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					x:0,
					y:0
				},
				methods: {
					mouseMove: function(event){
						this.x = event.clientX;
						this.y = event.clientY;
					}
				},
			});
		</script>
	</body>
</html>

注釋

1.function()中使用event表示，引入當前的事件物件，通過事件物件可以獲得其相關事件屬性
2.這里clientX表示當前滑鼠X軸坐標，此時可實時顯示XY坐標
3.mousemove.stop中的.stop就是事件修飾符，表示當前標簽里面這個事件會停止

7.計算屬性

是個屬性，這個屬性有計算能力，能夠將計算結果快取起來的屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>計算屬性</title>
	</head>
	<body>
		<div id="app">
			{{getCurrentDate()}}
			<hr />
			{{getCurrentDate1}}
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			var v1 = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
					getCurrentDate: function(){
						return Date.now();
					}
				},
				computed: {
					getCurrentDate1: function(){
						return Date.now();
					}
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

1.我們將vue物件賦值給v1，方便我們在控制臺通過v1呼叫方法
2.methods中定義的是函式，是一個動作，所以每次呼叫{{getCurrentDate()}}得到的時間都是實時的
3.computed中定義的是屬性，是一個具有計算能力的屬性
4.重繪頁面我們發現初始的時間二者相同，但是在控制臺，普通方法得到的時間不停變化，計算屬性保持不變，因為計算屬性將計算結果快取起來了
5.呼叫方法時每次都要計算，會產系統開銷，如果這個結果不經常變化，就可以將這個結果快取起來，計算屬性主要特性就是為了將不經常變化的計算結果進行快取，以節約系統開銷
6.使用差值運算式時注意，呼叫普通方法有括號，計算屬性不用括號(因為他是個屬性)

8.Vue的組件化

什么是組件化

vue的組件化設計思想借鑒了Java的面向物件思想，即萬物皆物件，在vue中萬物皆組件

也就是說，在vue的專案中，以及使用了vue框架的專案中，vue的物件以組件的形式出現，能被反復使用

要想實作組件化，需要在頁面中注冊組件：注冊組件主要兩種方式，全域注冊、本地注冊

1.組件的全域注冊

只要是被vue物件系結的容器，都可以使用全域注冊的組件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>組件全域注冊</title>
	</head>
	<body>
		<div id="app">
			<model3></model3>
			<hr/>
			<model3></model3>
			<hr/>
		</div>
		<div id="app1">
			<model3></model3>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			//注冊組件
			Vue.component("model3",{
				template: "<div>{{title}}<button type='button' @click='btn'>點我</button></div>",
				data: function(){
					return {
						title: "hello java",
					}
				},
				methods: {
					btn: function(){
						alert("hello vue");
					}
				},
			});
			//創建vue物件系結視圖層
			new Vue({
				el: "#app",
			});
			new Vue({
				el: "#app1"
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

注冊全域組件格式Vue.component("引數名",{組件內容});
template是模板，對應了視圖層，就是顯示頁面的各種標簽，小技巧：可以現在外面通過IDE的提示寫好模板，再復制到template里面，注意雙引號內部使用單引號
data是模型層，提供所需資料，寫法與new vue物件不同，通過function回傳的方式使用資料
methods對應方法，用法相同
組件就相當于一個獨立的頁面，包含了視圖層、模型層、方法…
創建好組件之后，必須在vue系結的容器中使用，直接使用組件名對應的標簽，而且可以復用
為什么叫全域注冊，只要是被vue物件系結的容器，都可以使用全域注冊的組件
template必須有且只有一個根元素，不可以同時并列多個根元素，比如template:"<div></div><h1><h1/>"，如果有需要那就外層套一個容器，內部隨意嵌套

2.組件本地注冊

在vue物件里面進行注冊組件，這個組件只能用在該物件系結的容器中，不可以用在其他容器中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>組件本地注冊</title>
	</head>
	<body>
		<div id="app">
			<model3></model3>
		</div>
		<hr/>
		<div id="app1">
			<model3></model3>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			//創建vue物件，注冊本地組件
			new Vue({
				el: "#app",
				components: {
					"model3": {
						template: "<div>{{title}}<button type='button' @click='btn'>點我</button></div>",
						data: function(){
							return {
								title: "hello vue"
							}
						},
						methods: {
							btn: function(){
								alert("hello java");
							}
						}
					}
				}
			});
			//創建第二個vue物件測驗
			new Vue({
				el: "#app1",
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

本地注冊組件使用components，里面可以有多個組件，每個組件以鍵值對的形式存在
每個組件的注冊方式與全域注冊相同
本地注冊組件不可以用在其他容器內

3.組件的生命周期

vue中的組件也是有生命周期的，一個vue組件會經歷，初始化、創建、系結、更新、銷毀等階段，

理解

所謂鉤子函式，就是組件在生命周期的不同階段要呼叫的函式

鉤子函式不寫也會默認執行，只不過函式內部為空，我們可以根據需求寫出鉤子函式并添加代碼，那么就會在對應的生命周期上進行里面的函式，按照生命周期順序依次為

beforeCreate 組件創建之前呼叫

created 組價被創建之后呼叫

beforeMount 組件被視圖層系結之前呼叫

mounted 組件被視圖層系結之后呼叫

beforeUpdate 組件發生更新之前

updated 組件發生更新時呼叫

beforeDestroy 組件銷毀之前呼叫

destroyed 組件銷毀之后呼叫

在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>組件生命周期、鉤子</title>
	</head>
	<body>
		<div id="app">
			{{title}}
			<button type="button" @click="changeTitle">修改標題</button>
			<button type="button" @click="destroyObject">銷毀組件</button>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					title: "my vue",
				},
				methods: {
					changeTitle: function(){
						this.title = "hello vue";
					},
					destroyObject: function(){
						this.$destroy()
					}
				},
				beforeCreate() {
					console.log("beforeCreate");
				},
				created() {
					console.log("created");
				},
				beforeMount() {
					console.log("beforeMount");
				},
				mounted() {
					console.log("mounted");
				},
				beforeUpdate() {
					console.log("beforeUpdate");
				},
				updated() {
					console.log("updated");
				},
				beforeDestroy() {
					console.log("beforeDestroy");
				},
				destroyed() {
					console.log("destroyed");
				}
			});
		</script>
	</body>
</html>

在這里插入圖片描述

注釋

changeTitle:function(){…}是es5的寫法，created(){…}是es6的寫法
$destroy()是組件自帶的銷毀方法，可以直接呼叫

9.使用Vue-Cli搭建Vue專案

什么是vue-cli

Command Line命令列工具，vue-cli就是vue命令列工具，也稱之為腳手架，類似于Java SSM，使用vue-cli可以拉取，創建，運行我們需要使用的框架，比如webpack Element UI Element Adimin等，幫助我們快速拿到這些半成品

要想使用vue-cli，需要安裝node.js環境，在node.js環境中使用

可以把node.js理解為前端程式運行所需的服務器

node.js安裝

官網下載地址：http://nodejs.cn/download/

下載完成后，安裝，一致下一步即可

在cmd命令列，輸入node -v，如果出現版本資訊，表示安裝成功

在node.js中安裝vue-cli

使用npm install vue-cli -g命令

npm：node,js命令

install：表示安裝

vue-cli：需要安裝的軟體

-g：全域安裝

如果使用默認的官方鏡像下載比較慢，也可以使用淘寶鏡像

先安裝淘寶鏡像，npm install -g cnpm --registry=https://registry.npm.taobao.org

之后將下載命令中的npm改為cnpm即可，如，

cnpm install vue-cli -g

cnpm install

cnpm run dev

使用vue-cli下載專案骨架搭建我們的專案

就像maven一樣，vue為我們提供了一些官方的專案骨架，

執行vue list可以顯示當前常用的主流框架

創建專案目錄并打開

在指定的根目錄創建專案檔案目錄，并進入目錄

在這里插入圖片描述

使用webpack骨架快速創建專案目錄

使用vue-cli命令，在新創建的目錄中下載專案骨架

vue init webpack my-project1

webpack：骨架名稱

my-project1：專案名稱

安裝程序中如果出現以下界面，需要手動操作

在這里插入圖片描述
出現以下界面，表示安裝成功

在這里插入圖片描述

一定要先進入到我們創建的my-project1目錄中，開始安裝依賴

npm install

在這里插入圖片描述

運行專案

npm run dev

每一個獨立的專案都需要npm完整的骨架，所以還需要重新在新目錄安裝npm

在這里插入圖片描述
這樣我們創建的專案創建完畢，并且運行在node.js提供的服務器上

使用瀏覽器進入頁面

在這里插入圖片描述

10.webpack專案結構

使用IDEA打開專案

整體結構

在這里插入圖片描述
node_modules：所有下載的專案依賴都在這里

build：專案寫好后需要匯出生成打包檔案，這些前端檔案就放在這里

config：存放組態檔

src：與Java一樣，存放我們開發時的檔案

static：存放靜態資源

index.html：首頁

package.json：存放配置資料，組態檔

readme.md：介紹怎樣使用webpack

src目錄

assets：存放logo

components：

存放vue組件，默認有了一個hello world，
在這里插入圖片描述

這個組件由三部分組成，template script style

之前我們在html中通過cdn引入，然后進行全域注冊，區域注冊，但還是比較繁瑣，現在我們可以直接在專案中創建.vue組件，更加方便，組件里的內容還是一樣，只不過位置有些變化

在這里插入圖片描述

export default{...}表示暴露出當前的默認物件，這里也就是helloworld，name表示組件名稱，data(){return{...}}存放資料變數，還可以繼續加methods方法

style對應樣式css，用來修飾頁面，scoped表示當前css樣式的作用域只作用域當前組件，

router目錄

使用路由模塊，配置路由表

App.vue

使我們的核心入口，也是個組件，

main.js

類似于Java的main函式，是入口js，
在這里插入圖片描述
import：匯入檔案，相當于將我們的核心組件匯入到專案中，

new Vue：創建vue物件，

el：系結容器，

router：表示使用了路由模塊，

components：

本地注冊組件，這里的App是檔案名字，通常我們習慣將組件名和檔案保持一致，之前我們在html中注冊組件，并將組件內容寫在里面，現在我們在這里注冊組件，組件的內容就在App檔案中，這個App檔案就是上面的import匯入的，App檔案里面也有了組件的name名字

template：對應我們使用的模板，這里的<App>就是我們使用的組件標簽，只有先注冊了組件，才可以在這里使用對應的模板

十一、Vue組件間的引數傳遞

1.如何在父組件App.vue中使用子組件

在相應的目錄新建vue組件，準備div容器，IDEA安裝vue插件后，可以直接右鍵生成，
在這里插入圖片描述
main.js中引入檔案，注冊組件，

App.vue是入口組件，所以回到App.vue組件中，添加我們自己剛剛注冊組件，在命令列啟動我們的webpack專案，訪問首頁

在這里插入圖片描述

2.父子組件之間如何傳遞引數

子組件中的差值運算式除了在data和methods中獲取資料，也可以在props獲取資料，優先級排在data和methods之后，
在這里插入圖片描述

子組件的屬性props中的資料可以從父組件中傳來，先再data中注冊屬性，再到子組件的標簽上系結data屬性和props屬性

在這里插入圖片描述

props除了可以傳一個單獨的屬性，還可以傳物件，這里我們使用了子組件自己定義的物件

去掉父組件中的屬性系結，否則父組件系結的屬性會優先展示

props的屬性既可以通過父組件傳遞，可也以在子組件中自己定義，如果同時存在父組件傳遞的優先級高

3.子傳父

在這里插入圖片描述
子組件中，用props定義一個事件，型別為方法，用于接收引數(這里是hello kitty)

父組件中，將子組件標簽的事件屬性與父組件中的函式系結，將子組件傳遞過來的引數(這里就是m)賦值到父組件的屬性上

msg被賦值，又通過父傳子的方式，顯示在了子組件的插值運算式上
在這里插入圖片描述

注釋

父子之間要想傳引數，必須借助props這個屬性，以及在子組件標簽上進行系結
案例中傳遞流程：見第一張圖
子組件事件傳參，props定義傳參的函式，父組件中在組件標簽上將子組件方法與父組件方法系結，父組件methods定義方法接收引數并賦值到當前data屬性中，父組件data屬性發生變化最終又通過父傳子在子組件插值運算式上顯示出來

十二、路由

1.使用場景

主組件中需要切換其他組件，比如在電商網站首頁上，我們點擊首頁頁面就會切換首頁，當我們點擊商品時，這個頁面就會切換商品資訊，這個程序就需要路由實作

通常，路由模塊是一個專案不可缺少的

2.安裝路由模塊

1.創建專案時，拉取框架時，根據安裝提示直接安裝

2.如果初始沒有安裝，可以進入已有的專案目錄中，執行命令手動創建

這里我們重新創建專案帶路由模塊

在這里插入圖片描述

3.撰寫專案

IDEA打開my-vue-demo2，新建首頁、商品串列兩個組件，
在這里插入圖片描述
在首頁index.html中引入bootstrap，這樣全域可以使用bootstrap樣式

在主組件App.vue中，去掉div中原有的logo，添加我們自己的內容，如ul標簽和li標簽，用于跳轉頁面，這里我們不使用a標簽跳轉，而是使用路由跳轉，添加美化樣式
在這里插入圖片描述
將首頁、商品串列的組件注冊到路由表中

路由表routes是一個陣列，每個鏈接在陣列中有對應的元素，

當前有一個默認的路由，/表示當前IP地址根路徑下，跳轉的是Helloworld組件
在這里插入圖片描述
我們可以繼續添加新的/后面的路徑，對應新的跳轉鏈接，

注意，路由表添加組件的跳轉鏈接，還需要import匯入組件的相對路徑，如果有vue插件，這一步會自動生成

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '../components/Home'
import Product from '../components/Product'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/Home',
      component: Home
    },
    {
      path: '/Product',
      component: Product
    }
  ]
})

將App.vue組將中，需要添加跳轉功能的位置，套上router-link標簽，同時指向路由表中的跳轉地址，這樣點擊時就會切換到對應的子組件上了

加上<router-view/>表示此處是我們想要具體顯示組件的地方

在這里插入圖片描述
命令列進入到專案根目錄，執行npm run dev，訪問地址可以看到，點擊導航欄，訪問地址就會變化，同時顯示內容變化，

但這些操作，都是在index.html頁面的App.vue組件中進行切換的
在這里插入圖片描述

注釋

重點步驟：添加組件，修改路由表，在父組件中設定跳轉點和顯示位置，主頁index.html引入css和js

4.路由的引數傳遞

當我們使用進行頁面跳轉時，可能需要攜帶引數到新的組件上，這就需要進行路由的引數傳遞

引數傳遞三個維度：設參、傳參、接參

繼續使用上面的專案my-vue-demo2

設參

在路由表index.js中，對應的路由地址后面添加引數變數，有冒號，
在這里插入圖片描述

傳參

在父組件中，直接將引數放在對應的router-link標簽內，地址的后面，如，這里表示我們傳參id=1

在這里插入圖片描述

接參

在子組件內接參，使用data(){return}接參，如，this.$route.params.id

$route是當前組件的route物件，params包含了所有引數，

在這里插入圖片描述

5.程式式路由的實作

上述這種方式，我們必須使用router-link跳轉鏈接，使用router-view顯示頁面，但是這樣使用有局限性

我們還可以通過js來實作js的跳轉

父組件App.vue中添加一個按鈕，系結事件，methods定義函式，

注意這里使用的是router，而接參使用的是route，push表示發布到對應的路由地址上，攜帶引數

在這里插入圖片描述

十三、Axios發送異步請求

vue并沒有支持ajax原生的功能，因為vue是一個視圖層框架，嚴格遵守Soc關注度分離原則，

需要添加axios框架來實作異步通信

1.安裝Axios

cmd進入專案目錄，執行命令npm install --save axios vue-axios

2.使用Axios

主函式入口main.js中，引入axios模塊
在這里插入圖片描述

在組件中，準備一個表單頁面，

<template>
  <div id="app">
    <div style="width: 50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model="mail"/><br/>
        {{mail}}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model="password"/><br/>
        {{password}}
        <h5>Gender</h5><br/>
        <input type="radio" name="gender" v-model="gender" value="female"/>男
        <input type="radio" name="gender" v-model="gender" value="male">女
        <h5>Hobby</h5><br/>
        <input type="checkbox" name="hobby" v-model="hobby" value="music"/>音樂
        <input type="checkbox" name="hobby" v-model="hobby" value="movie"/>電影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport"/>運動
        <br/>
        <br/>
        <button type="button" class="btn btn-success" @click="registfn">注冊</button>
      </div>
    </div>
  </div>
</template>

vue專案部署在一個服務器上，后臺java程式部署在另一個服務器上，所以前端請求后端時，涉及到了跨域，需要解決跨域問題

springmvc中可以使用cors方式解決

(未完，后續補充axios)

十四、Vue實戰專案

1.新建專案

方法同上，命令列創建專案，IDEA打開，創建組件，注冊路由表，測驗頁面跳轉情況，

這里我們創建了首頁、登錄組件

2.Vue整合Element UI

詳情參見官方檔案：https://element.eleme.cn/#/zh-CN

官網有安裝指令和Vue引入Element UI的詳細步驟，順便執行一下npm install將所需的依賴自動裝一遍

在這里插入圖片描述

準備好后，找我們需要的功能模板，展開復制代碼，放到我們自己組件中，通常el開頭的標簽都是Element UI的
在這里插入圖片描述
比如我們復制表單模板，注意復制時保留原有的element ui該有的層級結構，否則功能出不來

將組件內的根容器加class，這樣可以在下方<style>對視圖做更細致的樣式調整

Element UI 表單也支持設定校驗規則，對輸入引數進行校驗，需要校驗的欄位需要對應標簽添加prop屬性指定，rules加在form陣列后面即可，

提交按鈕事件添加表單物件ruleform作為引數，以便在函式中進一步校驗提交引數，引數名隨意，只要傳參就是默認表單物件

在這里插入圖片描述

十五、Vuex的應用

待續

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/261046.html

標籤：其他

上一篇：自動駕駛概述

下一篇：第三方服務整合-阿里云OSS上傳檔案-填坑

Vue詳解+實戰分析

文章目錄

備注

一、Vue簡介

簡介

MVVM–雙向資料系結模式

其他MVVM實踐者

為什么使用Vue.js

兩大核心要素

二、Vue開發

引入Vue

快速體驗

注釋

1.插值運算式 {{}}

注釋

2.分支 v-if

注釋

3.分支 v-show

注釋

4.回圈 v-for

遍歷陣列

注釋

遍歷物件

注釋

遍歷物件陣列

注釋

5.Vue屬性系結

注釋

6.Vue事件系結

v-on

注釋

注釋

事件修飾符

官方定義

注釋

7.計算屬性

注釋

8.Vue的組件化

什么是組件化

1.組件的全域注冊

注釋

2.組件本地注冊

注釋

3.組件的生命周期

理解

注釋

9.使用Vue-Cli搭建Vue專案

什么是vue-cli

node.js安裝

在node.js中安裝vue-cli

使用vue-cli下載專案骨架搭建我們的專案

創建專案目錄并打開

使用webpack骨架快速創建專案目錄

10.webpack專案結構

整體結構

src目錄

components：

router目錄

App.vue

main.js

十一、Vue組件間的引數傳遞

1.如何在父組件App.vue中使用子組件

2.父子組件之間如何傳遞引數

3.子傳父

注釋

十二、路由

1.使用場景

2.安裝路由模塊

3.撰寫專案

注釋

4.路由的引數傳遞

設參

傳參

接參

5.程式式路由的實作

十三、Axios發送異步請求

1.安裝Axios

2.使用Axios

十四、Vue實戰專案

1.新建專案