VUE的使用，學會這些就足夠了！！！（一） VUE的使用，學會這些就足夠了！！！（一）

VUE的使用，學會這些就足夠了！！！（一）

敲出億行bug 2020-05-17 20:57:26 10174 收藏 581 原力計劃

最後發佈:2020-05-17 20:57:26首發:2020-05-17 20:57:26

分類專欄： vue

收起

Vue.js 是什麼?

vue是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。

一、vue實例

Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統

• 1

1、在文件中引入vue.js，下面兩種方式選擇其中一種

<script type="text/javascript" src="../vue.js"></script>

<!– 開發環境版本，包含了有幫助的命令行警告 –>
<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

• 1
• 2
• 3
• 4
• 5

2、建立簡單的vue實例對象

<div id="app">
	//調用vue中的數據
	<h1>{{message}}</h1>
	//下面的兩種書寫方式結果相同
	<button v-on:click="click()">click</button>
	<button @click="click()">click01</button>
</div>

<script>
var ve= new Vue({
el:’#app’,
data:{
message:‘hello’,
},
methods:{
click:function(){
alert(“你好，世界”);
}
}
});
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

二、vue常用指令

1、v-on：綁定事件監聽器，事件的類型由參數決定
例如：v-on：事件名稱
或者@事件名稱

2、v-if/v-else-if/v-else判斷指令：根據表達式的值，進行渲染
例如：

<div id="app">
			//isshow爲true時，標籤內的內容顯示到頁面
			<h1 v-if="isshow">{{isshow}}ok</h1>
</div>
<script>
			new Vue({
				el:'#app',
				data:{
					message:'hello',
					isshow:true,
				},
				methods:{
					click:function(){
						alert("你好，世界");
					}
				}
			});
		</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

3、v-model：數據綁定指令（一般爲表單輸入綁定）

//v-model 指令在表單<input>、<textarea> 及 <select> 元素上創建雙向數據綁定
<input type="text" v-model="message" />{{message}}

• 1
• 2
• 3

文本框裏的內容與外面的內容綁定

4、v-for：循環（可以多層嵌套顯示和java中的for循環原理一致）
v-for格式：<li v-for=“item in items”>{{item}} </ li>
其中：item是被迭代數組元素的別名
items是源數據數組
使用 item in items 的特殊格式語法

<div id="demo">
	<ul>
		<li v-for="item in items">{{item}}</li>
		<li v-for="item in arr1">{{item}}</li>
		<li v-for="item in arr1.a">{{item}}</li>
	</ul>
</div>
<script>
			new Vue({
				el:'#demo',
				data:{
					items:[23,23,344,45],
					arr1:{"a":[1,2,3],"b":[2,2,3]},
				},
				methods:{
				}
			});
		</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

運行結果如圖

5、v-bind：動態綁定屬性
使用格式
v-bind:屬性名=“data數據對象中的值”
簡寫
：屬性名=“data數據對象中的值”

<styple>
.child{
	width: 50px;
	height: 50px;
	background-color: gray;
	color: black;
	}
</style>
<div id="app">
	<img v-bind:src="img" /> //動態綁定了imges屬性，img改變了圖片，那麼img標籤也會改變
	<div :class="{'child':isshow}">div6</div>//div區域的顯示根據isshow的值來判定

</div>
<script>
new Vue({
el:’#app’,
data:{
isshow:true,
img:‘111.png’,
}
})
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

三、生命週期函數|鉤子函數

1、生命週期函數
beforecreated:加一些loading事件
created：結束loading事件，還做一些初始化，實現函數自執行
mounted：發起後端請求，取回數據
接受頁面之間傳遞的參數
子組件向父組件傳遞參數
2、下面用一個生命週期函數演示的實例

<div id="demo">
			<h1>{{message}}</h1>
			<button @click="changemessage()">changemessage</button>
</div>

<script>
var ve =new Vue({
el:’#demo’,
data:{
message:‘vue生命週期’,

				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeCreate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforecreate-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				created<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------created-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeMount<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforemount-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				mounted<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------mounted-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeUpdate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------beforeupdate-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				updated<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------updated-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				beforeDestroy<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------destotry-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				destroyed<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
					console<span class="token punctuation">.</span><span class="token function">group</span><span class="token punctuation">(</span><span class="token string">"------------destroyed-----------"</span><span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'el:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$el<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'data:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>$data<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'message:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				methods<span class="token punctuation">:</span><span class="token punctuation">{</span>
					changemessage<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>message<span class="token operator">=</span><span class="token string">'666'</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

//銷燬是在實例外面調用的
ve.$destroy()

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68

實際的效果

點擊changemessage按鈕

四、vue組件

借用官網的一張圖。

1、爲什麼使用組件？
使用組件一方面可以不用去直接修改標籤，另一方面也會優化頁面顯示
注意:組件在實例前面書寫
2、全局組件

<div id="box">
	{{message}}
	<all></all>
</div>
<script>
	Vue.component("all",{
				template:'<div><h1>{{name}}</h1></div>',
				// template:'#box1',
				data:function(){
					return{
						name:'李四'
					}
				}
			})
	var ve = new Vue({
		el:"#box",
			data:{
				message:'hello'
			}
		});
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

3、局部組件:局部組件放在實例中

父子組件可以嵌套使用
父子組件間作用域相互獨立
子組件只能在父組件的模板中進行調用

子組件是父組件細化拆分的過程
父組件向子組件傳值通過props進行

下面的示例中包含了父組件向子組件傳值的功能

<div id="box">
	<test>
	</test>
</div>
<template id='box1'>
	<div>
	<input type="text" v-model="message" />
	<box1 num="1" txt='yi' :msg="message"></box1>
	<box1 num="2" txt='er' :msg="message"></box1>
	</div>
</template> 

<script>
var ve = new Vue({
el:’#box’,
data:{
},
//父級
components:{
‘test’:{
template:"#box1",
data:function(){
return{
message:‘aaa’
}
},
//子級
components:{
‘box1’:{
template:"#box2",
//子級想將父級的一個值，作爲自己的一個局部變量
data:function(){
return{
mymsg:this.msg
}
},
//計算屬性
computed:{
mymsg1:function(){
return this.msg+’!’
}
},
props:[
‘num’,‘txt’,‘msg’
]
}
}
}
}
})
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51

4、自定義監聽事件（子組件向父組件傳值）
自定義監聽事件： $emit()
傳值的過程：
子組件設定了一個點擊事件，點擊事件中夾帶着傳遞的值—》通過getval方法將拿到的值賦值給父組件的message—》父組件顯示出message值

<div id="box">
			<parent></parent>
</div>
	<template id='par'>
		<div>
			<h1> 父組件:{{parentmsg}}||{{message}}</h1>
			<child @change="getval"></child>
		</div>
	</template>
	<template id='child'>
		<div @click="fn()">
			<h2>子組件:{{childmsg}}</h2>
		</div>
	</template>
<script>
	var vm = new Vue({
		el:"#box",
		components:{
			"parent":{
				template:'#par',
				data:function(){
					return {
						parentmsg:"父組件的信息",
						message:''
					}
				},
				methods:{
					getval:function(val){
						this.message = val
						console.log(val)
					}
				},
				components:{
					'child':{
						template:'#child',
						data:function(){
							return{
								childmsg:'子組件的信息'
							}
						},
						methods:{
							fn:function(){
								this.$emit('change',this.childmsg)
							}
						}
					}
				}
			}
		}
	})
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51

5、SLOT插槽(vue2.6.0之前版本使用的slot)
目的:其目的在於讓組件的可擴展性更強,用來混合父組件的內容與子組件自己的模板.
分爲匿名slot和具名slot

//匿名slot
<div id="box">
			<my-component>
		<span class="token operator">&lt;</span><span class="token operator">/</span>my<span class="token operator">-</span>component<span class="token operator">&gt;</span>

</div>
<template id=‘mycomponent’>
<div>
<p> 頭部</p>
<slot> 如果沒有分發，則默認顯示</slot>
<p> 底部</p>
</div>
</template>
<script>
Vue.component(‘my-component’,{
template:’#mycomponent’

	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'my-computer'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
		template<span class="token punctuation">:</span><span class="token string">'#mycomputer'</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span>  <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		el<span class="token punctuation">:</span><span class="token string">'#box'</span><span class="token punctuation">,</span>
		
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

//具名slot
<div id="box">
	<my-computer>
		<div slot='CPU'>n9000</div>
		<div slot='GPU'>OOOO</div>
	</my-computer>
</div>
<template id='mycomputer'>
	<div>
		<slot name="GPU">GPU</slot>
		<slot name="CPU">CPU</slot>
		<slot name="DIST">DIST</slot>
	</div>
</template>
<script>
		Vue.component('my-computer',{
			template:'#mycomputer'
		})
		var vm = new  Vue({
			el:'#box',
		})
	</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

五、vue的路由設置

要引入vue-router.js庫文件
作用：
根據url錨點的位置，在容器中加載不同的模塊，本質是作爲頁面導航
完成SPA(Singal Page Application)的開發
一種特殊的web應用，它將所有活動侷限於一個web頁面中，僅web頁面初始化時加載項應的html、JavaScript、css
一旦頁面加載完成，SPA不會因爲用戶的操作而進行頁面的重新加載或跳轉，而是利用JavaScript動態的變換HTML（採用的是div切換顯示或隱藏），從而實現ui與用戶的交互
下面是一個簡單地單頁面示例

<div id="app">
	<ul>
		<li >
			<router-link to="/home">首頁</router-link>
		</li>
		<li >
			<router-link to="/news">新聞</router-link>
		</li>
		<li >
			<router-link to="/hot">熱點</router-link>
		</li>
	</ul>
	<div class="show">
		<router-view></router-view>
	</div>
	<button @click="back()">go back</button>
</div>
<script>
		const Home={template:'<h2>首頁</h2>'}
		const News={template:'<h2>新聞</h2>'}
		const Hot={template:'<h2>熱點</h2>'}
		//Vue.extend(template:'<h1>首頁</h1>')
		//配置路徑
		const routes=[
			{
				path:'/home',component:Home
			},
			{
				path:'/news',component:News
			},
			{
				path:'/hot',component:Hot
			}
		]
	<span class="token comment">//創建router</span>
	<span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		routes
	<span class="token punctuation">}</span><span class="token punctuation">)</span>
	
	<span class="token keyword">var</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
		el<span class="token punctuation">:</span><span class="token string">'#app'</span><span class="token punctuation">,</span>
		router<span class="token punctuation">,</span>
		beforeCreate<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
			<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">'/home'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token keyword">catch</span><span class="token punctuation">(</span>err<span class="token operator">=&gt;</span><span class="token punctuation">{</span>err<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span><span class="token punctuation">,</span>
		methods<span class="token punctuation">:</span><span class="token punctuation">{</span>
			<span class="token function">back</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
				<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">go</span><span class="token punctuation">(</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

二級路由的配置是在一級路由的基礎上，在某一個path下再分離出幾個低級的path
示例

{
	//新聞模塊下有將新聞進行分類：科技、軍事等；其他步驟不影響
	path:'/news',component:News,
	children:[
		/* 二級路由，path分配，前面沒有“ / ” */
		{
			path:'js',
			component:{
				template:'<p>軍事類新聞</p>'
			}
		},
		{
			path:'kj',
			component:{
				template:'<p>科技類新聞</p>'
			}
		},
		{
			/* 默認頁面可以直接用一個組件，也可以重定向 */
			path:'/',
			redirect:'js'
			// component:{
			// 	template:'<p>默認值</p>'
			// }
		}
	]
},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27

路由的進一步詳解

六、axios的使用

使用了常用的兩種axios的方法

axios的get方法使用

<div id="app">
<h1>{{msg}}</h1>
	<button @click='getMsg'>Click</button>
</div>

<script>
/* 創建Vue實例 /
var vm=new Vue({
el:’#app’,
data:{
msg:’’
},
methods:{
getMsg:function(){
/ 方式一
axios.get(’./text.txt?name=zhy&age=20’).then(res=>{
console.log(res.data)
this.msg=res.data
}).catch(err=>{
console.log(err)
}) */
//方式二
axios.get(’./text.txt’,{params:{name:‘zhy’,age:20}}).then(res=>{
this.msg=res.data
}).catch(err=>{
console.log(err)
})
}

	<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

點擊事件觸發後，就會將text文件中的數據拿到前端顯示
post和get方法使用一樣

總結

有些點沒有寫到，之後會繼續補充。

                                </div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div>
            <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-60ecaf1f42.css" rel="stylesheet">
                            </div>
</article>