文章目錄

Vue
- Vue概念
- - 同類產品
  - 官網
  - 特點
  - 漸進式框架
  - 入門案例.html
  - 改造入門案例.html
  - MVVM框架
- 基礎語法
- - 運算子 operator
  - 方法 methods
  - Vue決議資料
  - 三種data值的寫法
- 高級用法：v-命令
- - 指令集
  - 雙向系結 v-model
  - 閃現 v-cloak
  - 判斷 v-if
  - 回圈 v-for
  - 事件 v-on
  - 系結 v-bind
  - 小結
- 構建Vue專案 lifecycle+npm+webpack
- - Vue的生命周期 lifecycle
  - npm 概念
  - webpack 概念
- vue-cli腳手架
- - 作用
  - 安裝nodejs并驗證
  - 配置npm
  - 引數說明
  - 腳手架安裝
- 創建Vue專案 npm
- - 作業空間
  - 生成vue專案
  - 啟動專案 & 停止專案
  - 測驗訪問
- HBuilderX管理Vue專案
- - 打開Vue專案
  - 專案結構
  - 目錄結構
  - 重要檔案說明
  - 呼叫關系圖
- 常見錯誤
- - Permission denied
  - Unexpected end of JSON input while parsing near
  - unable to verify the first certificate
  - vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate
- 擴展：高級用法：ajax
- - 介紹
  - price.json
  - axios.html
  - 常見錯誤
  - 觀察者設計模式
- 擴展：HBuilderX自定義模板
- - 自定義html模板
  - vue模板.txt
  - 創建新檔案呼叫模板

Vue

Vue概念

同類產品

JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實作而成，近年來發展非常迅速，標準也在不斷完善已經達到ES6時代，

ECMAScript 6.0（簡稱 ES6）是JavaScript語言的下一代標準，已經在 2015 年 6 月正式發布了，它的目標是讓JavaScript語言可以用來撰寫復雜的大型應用程式，成為企業級開發語言，洗白其一直被"鄙視"的腳本語言的前身，
在這里插入圖片描述

隨著js的強大，三大巨頭橫空推出，形成鼎足之勢，前端新三大框架：Angular/React/Vue，三種是目前主流js框架，國外企業多用React，國內企業多用Vue，

Vue是我們國人開發的，作者：尤雨溪，是一個基于JavaScript的漸進式前端框架，更符合中國人習慣，在中國很多大型一線企業中廣泛應用，

Vue3.0使用TypeScript撰寫，TypeScript是JavaScript的超集，微軟研發，語法更加細致嚴謹，改js腳本語言為向一線強語言java、c靠攏，可以構建大型專案，基于ES6標準，

官網

https://cn.vuejs.org/ #官網

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下載最新版本

特點

一個輕量級的mvvm框架，雙向系結，資料動態更新，gzip后大小只有20k+
是一個漸進式框架，其核心思想是資料驅動、組件化的前端開發
原生html頁面是通過js 操作的是dom，而vue.js操作的是資料，
和傳統前端開發開發的關注點完全不同，傳統方式關注的是都像的document結構的api，而vue關注的是資料，
優點顯而易見，從而屏蔽了使用復雜晦澀難記的dom結構api，

漸進式框架

Vue (pronounced /vju?/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue是一個用于構建用戶界面的漸進式 SPA （ Single-Page Applications ）**單一頁面框架，與其它龐大而單一框架不同的是，Vue從一開始就被設計為按需搭建，

可以只使用核心vue.js
可以只使用核心vue.js + components組件
可以只使用核心vue.js + components組件 + router路由
可以只使用核心vue.js + components組件 + router路由 + vuex狀態管理
構建大型vue專案：npm（包依賴） + webpack（打包、壓縮、合并等）

入門案例.html

開發步驟：匯入vue.js檔案、準備資料渲染區、創建Vue物件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>vue</title>
	<!-- 1. 引入vue.js -->
	<script src="vue.js"></script>
	
	
</head>
<body>
	<!-- 2. 準備一個div，資料渲染區 ,{{ 插值運算式 }}-->
	<div id="app">{{msg}}</div>
	
	{{msg}} <!-- 不是掛在點，Vue不決議-->
	
	<!-- 3. 創建Vue物件 -->
	<script>
			var a = {
				msg:"hello vue~"
			}
			var com = {
				el:"#app" , /* 通過css選擇器定位元素，掛載點*/
				data:a  /* 資料驅動，把資料加載到指定位置*/
			}
			var v = new Vue(com);

	</script>


</body>
</html>

改造入門案例.html

上面的案例是傳統寫法，并不是Vue的真面目，下面就看看真正的vue怎么寫？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<!-- 1. 引入vue.js -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<!-- 2. 準備資料渲染區 ,{{ 插值運算式 }}-->
		<div id="app">{{msg}}</div>
		<script>
			<!-- 3. 創建Vue物件 -->
			
				new Vue({
					el : "#app" ,
					data : {
						msg : "hello vueeee~~~"
					}
				});
		
		</script>

	</body>
</html>

MVVM框架

在這里插入圖片描述

上面看似結構非常簡單，其實卻深藏奧秘，和傳統框架不同，Vue采用了最新的MVVM框架，它最大的特點就是：傳統js機制操作的是頁面，如我們之前寫的html+css+js案例，大家會發現頁面和頁面里的資料混雜在一起，

而MVVM框架體系引入后端早已深入人心的分層思想，是后端MVC框架的延伸，實作把資料和頁面分離，我們可以在頁面布局好后，只對資料進行操作，當資料改變，頁面上的內容會自動隨之改變，而無需開發者開發專門的代碼去改變，如之前ajax技術實作的區域重繪，

簡而言之，MVVM框架實作了頁面和資料的分離，代碼結構更加清晰，責任更加明確，同時實作自動化，資料變化，頁面隨之變化，無需寫代碼，非常棒的一個改進，這是javascript、jquery、bootstrap等無法做到的，也是前端為何開始推崇Vue這些框架的根本原因，也標示著jquery的終結，
在這里插入圖片描述

基礎語法

運算子 operator

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的運算子</title>
		
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p> 加法:{{2+3}} </p>
			<p> 減法:{{2-3}} </p>
			<p> 乘法:{{2*3}} </p>
			<p> 除法:{{3/2}} </p>
			<p> 取余:{{10%2}} </p>
			
			<p> 自增:{{age++}} </p>
			<p> 自減:{{age--}} </p>
			<p> 三元運算式: {{age>10?'yes':'no'}}</p>
			<p> 字串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p>
		
		</div>

		<script>
			
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
					}
				});
		
		</script>

	</body>
</html>

方法 methods

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue資料的寫法</title>
	
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<!-- vue的事件,使用v-on呼叫指定函式 -->
			按鈕1:<button onclick="alert(100)">點我</button>
			按鈕2:<button v-on:click="show()">點我</button>
			<h2>  vue呼叫無參函式：{{ show() }}  </h2>
			<h3>  vue呼叫含參函式：{{ sysout(100) }}  </h3>	
		</div>
		<script>
		
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"張三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					},
					methods: { /* 必須在methods里,創建Vue函式 */
						show:function(){ 
							console.log('hello vue');
						},
						sysout: function(color){
							console.log(color);
						}
					}
				});
		
		</script>

	</body>
</html>

注意：

方法必須寫在methods代碼段中
方法體中訪問資料代碼段中聲明的變數，前面加this
方法和屬性宣告方式的差異在于 function(){}
方法和屬性呼叫的差異是 {{msg}} {{sayHello()}}，名稱后加小括號

Vue決議資料

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello vue</title>
		
		<!-- 匯入js -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app"> 
			<h1>
				vue決議變數：{{str}} {{str.length}} 
				{{str.replace('l','666')}} {{str.concat(123)}}
				{{num}}  {{num+10}} {{num/3}} {{num%4}}
				{{num>5?1:0}} 	{{num--}}
			</h1>
			<h2>vue決議物件：{{p.name}} {{p.age}} </h2>
			<h2>vue決議陣列：{{arrays[1].name}} {{arrays[0].age}} </h2>
			
			<h2>vue呼叫函式的語法:{{sout()}} </h2>
			<button v-on:click="add(1,2)">點我</button>
			<button @click="add(1,2)">點我</button>
		</div>
		<script>
			var vm = new Vue({
				el:"#app", //資料掛載點
				data:{
					str:"hello vue",
					num:10,
					p:{//vue定義物件
						name:"lisi",
						age:20
					},
					arrays:[//vue定義陣列
						{
							name:"zhangsan",
							age:20
						},
						{
							name:"wangwu",
							age:30
						}
					]
				},
				methods:{//vue定義方法
					sout:function(){
						console.log(100);
					},
					add:function(a,b){ //含參方法
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>

三種data值的寫法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三種寫法</title>
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 資料的三種寫法:標準寫法
					// 第一種形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二種形式:定義函式,回傳物件
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三種形式:定義函式,es6的簡寫法
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>
</html>

高級用法：v-命令

指令集

指令是帶有 v- 前綴的特殊屬性，以表示它們是 Vue 提供的特殊特性，

指令用于在運算式的值改變時，將某些行為應用到 DOM 上，

常見的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

雙向系結 v-model

通過指令v-model，實作雙向系結，修改一方同時修改相同的另一方，達到資料同時更新，MVVM是將"資料模型雙向系結"的思想作為核心，在View和Model之間沒有聯系，通過ViewModel進行互動，而且Model和ViewModel之間的互動是雙向的，因此View視圖的資料的變化會同時修改Model資料源，而Model資料源資料的變化也會立即反應到View視圖上，
在這里插入圖片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
			<h1>{{address}}</h1>
		<div id="app">
			<h2>{{address}}</h2>
			<h3>{{address}}</h3>
			<h4>{{address}}</h4>
			<h5>{{address}}</h5>
			<h6>{{address}}</h6>
			
			<input type="text" v-model="address"/>
		</div>
	</body>
	<script>
		let vm = new Vue({
			el: "#app",
			data: {
				address: "北京天安門"
			}
		});
	</script>
</html>

閃現 v-cloak

F12打開Chrome的除錯視窗，選中NetWork，在選擇Slow3G，觀察問題，

遇到插值運算式加載時閃爍對用戶不好的現象，那怎么解決呢？

在標簽中增加指令：v-cloak
增加style標簽，[v-cloak]屬性選擇器，設定先不展示display:none;

實作在頁面未渲染完成時先隱藏標簽，渲染完成后在展示，這樣就解決了閃爍問題

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
		…
		</div>
	</body>
</html>

判斷 v-if

v-if指令將根據運算式 seen 的值( true 或 false )來決定是否插入 p 元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue資料的寫法</title>
	
		<script src="vue.js"></script>
	
	</head>
	<body>
		<div id="app">
	
<!-- 用來判斷,類似于java的if else if else,判斷成立就顯示不成立就不顯示 -->
			<p v-if="person.age>=18">成年人</p>
			<p v-if="person.age<18">未成年人</p>
			
			<p v-if="person.salary>=2000">金領</p>
			<p v-else-if="person.salary>=1000">白領</p>
			<p v-else>屌絲</p>
				
		<!-- 和v-if一樣也可以判斷,只是條件不滿足也會在頁面加載,不顯示而已 -->
			<p v-show="person.age>=20">成年人</p>
		</div>
		
		<script>
	
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"張三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"http://act.codeboy.com/"
					}
				});

		</script>

	</body>
</html>

Tip: 什么時候用 v-if ，什么時候用v-show?

v-show靠頁面的樣式進行控制，未顯示但內容已在頁面上，而v-if內容是不在的

v-if判斷是否加載，可以減輕服務器的壓力，但在需要時加載有更高的切換開銷；v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好，

回圈 v-for

v-for 指令可以系結陣列的資料來渲染一個專案串列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue資料的寫法</title>
	
		<script src="vue.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:"#app",
					data:{
						address:"北京",
						name:"張三",
						age:20,
						person:{
							name:"jack",
							age:18,
							salary:1100
						},
						hobby:["唱","跳","rap"],
						url:"https://act.codeboy.com/"
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="app">
			<p>地址:{{address}}</p>
			<p>姓名:{{name}}</p>
			<p>年齡:{{age}}</p>
			<p>愛好:{{hobby}} , 個數:{{hobby.length}}</p>
			<p>陣列的第一個元素:{{hobby[0]}} </p>
			<p>陣列的第最后一個元素:{{hobby[2]}} </p>
			
		<!-- 陣列的遍歷:類似于java里的foreach回圈,o表示每次獲取到的資料 -->
			<p v-for="o in hobby">{{o}}</p>
			<!-- o是資料,i是下標 -->
			<p v-for="o,i in hobby">下標是:{{i}}---資料是:{{o}}</p>
			<p v-for="(o,i) in hobby">下標是:{{i}}---資料是:{{o}}</p>
		</div>
	</body>
</html>

事件 v-on

@click為v-on:click的縮寫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button onclick="show()">javascript 點我</button>
			<button v-on:click="show()">v-on:click 點我</button>
			<button @click="show()">簡寫的事件,點我</button>
		</div>
	</body>
	<script>
		function show(){
			alert("old show");
		}
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue"
			},
			methods:{
				show : function(){
					console.log(this.msg)
				}
			}
		})
	</script>
</html>

系結 v-bind

當屬性的值是變數而不是字串時，通過v-bind進行標識，vue會自動處理

全稱: v-bind:href
簡稱： :href 冒號開頭就說明后面跟的是變數

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<a href="http://act.codeboy.com">java培優</a>
			<a v-bind:href="url" target="_blank">{{urlname}}</a>
			<a :href="url" target="_blank">{{urlname}}</a>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data:{
				name: "tony",
				url: "http://act.codeboy.com",
				urlname: "達內java培優"
			}
		})
	</script>
</html>

小結

可以看到Vue這類為何稱為框架，名副其實，當之無愧，寫javaScript時，我們要先去學習其復雜的api（document.getElementById()），寫jQuery時，又學一套復雜的api(一堆的選擇器)，特別它的寫法雖然簡潔，卻晦澀難懂，需要死記大量英文單詞，初學者極易寫錯，門檻很高，就現在很多企業的程式員依然被絆倒，說不明白，講不清楚，使用中bug滿天飛，一堆糊涂蟲，

而Vue框架結構搭建好，就剩下修改資料和展示資料，而其結構非常簡單，一看就會，如呼叫資訊{{message}}，就是這么豪橫，還等什么，快速擁抱它吧，

構建Vue專案 lifecycle+npm+webpack

Vue的生命周期 lifecycle

使用vue做專案時，我們需要了解vue物件的生命周期和生命周期函式（Vue 實體從創建到銷毀的程序），這樣才能知道哪些事情應該在哪個函式里做，

如頁面創建時，頁面加載時，頁面更新時，頁面銷毀時？

在這程序中，我們在每個特定階段會觸發一些方法（這些方法具備一些功能），我們給這些方法起了名字叫做生命周期鉤子函式/組件鉤子，

生命周期函式：

vue實體在某一個時間點會自動執行這些函式；
生命周期鉤子函式不允許寫成箭頭函式；

可以分為3個階段，一共8個鉤子：初始化階段（創建前/后, 載入前/后），運行中（更新前/后），銷毀（銷毀前/銷毀后）

細分每個程序：

序號	默認值	取值范圍
1	new Vue	創建vue實體
2	init events & lifecycle	開始初始化
3	beforeCreate	組件剛被創建，組件屬于計算之前，如data屬性等
4	init injections & reactivity	通過依賴注入匯入依賴項
5	created	組件實體創建完成，屬性已系結，此時DOM還未生成
6	el 屬性	檢查vue配置，即new Vue()里面的el項是否存在，有就繼續檢查template項，沒有則等到手動系結呼叫v.$mount()
7	template	檢查配置中的template項，如果沒有，則被系結區域的el物件的outHTML（即整個#app DOM ，包括<div id="app">和</div>標簽）都作為被填充物件替換掉填充區域
8	beforeMount	模板編譯、掛載之前
9	create v$el and replace el	編譯、并替換了被系結元素
10	mounted	編譯、掛載
11	befor update	組件更新之前
12	updated	組件更新之后
13	destroy	當v.$destroy()被呼叫，開始拆卸組件和監聽器，生命周期終結

在這里插入圖片描述

npm 概念

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等）

npm 為你和你的團隊打開了連接整個 JavaScript 世界的一扇大門，它是世界上最大的軟體注冊表，每星期大約有 30 億次的下載量，包含超過 600000 個包（package）（即，代碼模塊），來自各大洲的開源軟體開發者使用 npm 互相分享和借鑒，包的結構使您能夠輕松跟蹤依賴項和版本，

官網：

https://docs.npmjs.com/about-npm 英文官網

https://www.npmjs.cn/ 中文官網

webpack 概念

Webpack是前端自動化構建工具，它基于nodejs實作，可以幫助我們實作資源的合并、打包、壓縮、混淆的諸多功能，可以快速構建一個Vue專案，包括各類檔案（assets資源、scripts腳本、images圖片、styles樣式），

官網：

https://webpack.js.org/

vue-cli腳手架

作用

vue腳手架指的是vue-cli，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程式而且可用于自動生成vue和webpack的專案模板，
vue-cli就是Vue的腳手架工具，和我們工地看到的腳手架真是那么一回事，它幫助我們搭建基本的開發環境，好比架子搭建好了，利用它可以搞定目錄結構，本地除錯，單元測驗，熱加載及代碼部署等，
vue-cli是由Vue提供的一個官方cli，專門為單頁面應用快速搭建繁雜的腳手架，它是用于自動生成vue.js+webpack的專案模板，是為現代前端作業流提供了 batteries-included 的構建設定，只需要幾分鐘的時間就可以運行起來并帶有熱多載，保存時 lint 校驗，以及生產環境可用的構建版本
在這里插入圖片描述

安裝nodejs并驗證

安裝nodejs,下一步下一步就可以,可以安裝最新的15版本,win7的話可以安裝14版本.使用以下dos命令提示符下執行：

node -v     # v8.11.3，至少8以上,最新的是v15.11.0

配置npm

Nodejs下的包管理器,Nodejs中包含了npm,無需單獨安裝.默認去官網下載資源,可以換成國內的鏡像

npm config get registry # 查看當前配置的鏡像，結果是默認的國外網址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #設定成淘寶鏡像

npm config get registry #再獲取查看,結果是修改后的https://registry.npm.taobao.org/

引數說明

注意單詞的大小寫

-i 安裝指令，全拼： install
-S 生產環境，全拼： --save
-D 開發環境，全拼： --save—dev
-O 可選依賴，全拼： --save—optional
-E 精確安裝指定模塊版本，全稱：--save—exact
-g 全域安裝，全拼： --global

腳手架安裝

vue-cli: 用戶生成Vue工程模板（幫你快速構建一個vue的專案，也就是給你一套vue的結構，包含基礎的依賴庫）
vue-cli: 腳手架工具安裝與配置（需要幾分鐘）

npm install vue-cli -g #安裝vue-cli腳手架---可能比較慢,要等幾分鐘

npm uninstall vue-cli -g #卸載vue-cli腳手架 --- 大可不必

vue –V #查看版本

where vue #vue安裝在哪里

創建Vue專案 npm

作業空間

進入作業空間目錄：D:\workspace\vue

生成vue專案

基于vue.js的官方webpack模板：(亂碼無需理會)
webpack: 它主要的用途是通過CommonJS的語法把所有瀏覽器端需要發布的靜態資源做相應的準備，比如資源的合并和打包

vue init webpack jt01 #此處專案名不能使用大寫---可能比較慢,要等

在這里插入圖片描述

注：

jt01 為自定義的專案名稱
產生專案webpack模板，目錄100+m，可見內容多復雜，龐大
會自動生成node_modules臨時目錄，可以洗掉，每次編譯、運行會自動產生

啟動專案 & 停止專案

cd jt01 # 進入專案目錄

npm run dev # 自動啟動服務，ctrl+c 停止,可能要等幾分鐘

測驗訪問

注意：埠號可能不同，默認為8080，如果發現埠占用npm很聰明，它會自動改變埠號，以其具體提示的埠資訊為準，
在這里插入圖片描述

HBuilderX管理Vue專案

打開Vue專案

HBuilderX是最新前端開發利器之一，全面支持Vue的開發，具有豐富的提示，使用它打開：D:\workspace\vue\jt01目錄（可自行定義自己的目錄）
在這里插入圖片描述

專案結構

在這里插入圖片描述

目錄結構

這個目錄結構非常重要，大家要熟記，就如你要生孩子去婦幼保健院，你要游泳去游泳館，規定好每個目錄的作用，方式和位置就約定統一了，有了這套規則，檔案就不會亂放，這樣找資源時就知道到哪里找，寫代碼檔案時就按功能放到指定的目錄中，這種方式已經非常常見，如Maven構建專案目錄有強制的約定，如Spring框架中約定大于配置，

view 就是用戶要訪問的頁面都存放在這個目錄下，如Index.vue
static中保存一些靜態的資源，如jquery、css、圖片等
src 目錄是一個很大的目錄，包羅萬象
components 把專案中所需要的組件都放在此目錄下，默認會創建一個HelloWorld.vue，我們可以自己添加，如添加Header.vue
router 訪問的路徑，Vue提倡的是SPA（Single Page WebApplication）單頁面設計，這是以前舊頁面中如果包含其他資源，必然涉及到路徑問題，Html沒有很好的解決這個問題，而router它是一種解決路徑的新發明，很好的解決了多模塊頁面重繪問題，簡而言之就是給組件指明一個路徑，我們怎么去訪問它，不同組件是依靠配置的路徑router來訪問的，Router非常強大，老系統是url改變是在服務端進行重繪，而router支持在客戶端重繪，就是url變化，頁面內容變化，但不請求服務器端，以前的程式是做不到的，此處不好理解，后期專門章節論述，不必心急，先記錄下這個特點

重要檔案說明

Vue專案這么多檔案，它們什么關系？寫代碼該從哪里下手呢？
常見操作: 1, 在components里寫自定義組件 2, 在App.vue里注冊自定義組件 3, 在main.js里引入第三方js

? index.html 首頁，Vue是SPA單頁面開發，頁面入口，定義了一個div,并設定id=app
? src/main.js 公共的組件就直接配置到這個檔案中，私有的就配置到view中
在這里插入圖片描述
? src/App.vue 根組件,可以添加自定義組件

? src/router/index.js 引入子組件HellWorld.vue
在這里插入圖片描述

呼叫關系圖

在這里插入圖片描述

簡單來說專案加載的程序是：

index.html->main.js->App.vue->index.js->HelloWorld.vue

可以看到Vue專案是自有一套規則，一套機制的，非常系統化的，有固定的檔案，有自定義的檔案，各自放在指定的目錄下，指定的檔案中，指定的地方，最終來實作用戶的需求，那在開發之前，你就必須了解這套機制，寫代碼的時候就規則清晰，如有神助，知道該如果寫代碼，知道為什么這么寫，代碼檔案該放在哪，它們是誰呼叫誰，互相怎么呼叫的了，

為什么要花這么大篇幅講這幾個檔案呢？

很多同學寫代碼時，聽老師講沒問題，可自己做就亂了方寸，腦袋空白甚至都是漿糊，不知道代碼該寫在哪里？不知道出錯了該如何下手，這是為何呢？老師都教了啊？就是自己沒有去把所學的知識系統的、有效的組織起來，內容還只是一個一個點，無法把這些點很好的連接起來形成線，先在形成面，面在形成體，點線面體真正組織起來，才會逐漸清晰代碼的整體程序，

那如何做到呢？

思考，但復雜的事務不是馬上腦袋就能跟上的，得暈好久呢，那怎么辦，真正的絕招，多敲多練，反復練習中慢慢總結出其真正的規律，就像我們打游戲，游戲高手，不是天生，是反復練習，反復失敗，失敗就是成功之母，這句話是真的，

常見錯誤

Permission denied

權限不足，windows以管理員身份運行，mac命令前加sudo
在這里插入圖片描述

Unexpected end of JSON input while parsing near

在這里插入圖片描述

清除快取，重新安裝

npm cache clean --force

npm install

unable to verify the first certificate

在這里插入圖片描述

解決方法: 取消ssl驗證：npm config set strict-ssl false,再次安裝

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

在這里插入圖片描述

打開（如果不是默認的檔案夾，是自定義的檔案夾路徑的話就是在自定義檔案夾的目錄下）

C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js 
將下面這行注釋：rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改為：  rejectUnauthorized : false    
重新運行：  vue init webpack project-name  就可以了

在這里插入圖片描述

擴展：高級用法：ajax

介紹

Vue中封裝了ajax并增強了它，在異步并發處理優于原生ajax，稱為：axios（ajax input output system）

price.json

創建data目錄，創建price.json檔案，內容如下：

{"p":2499}

axios.html

引入js支持：從課前資料找axios.min.js檔案，復制到js目錄下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			商品價格：{{info}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data(){		//data的ES6函式寫法
				return {
					info : null
				}
			},
			mounted(){
				axios.get('../data/price.json')
				.then( 
					//箭頭函式，res為回傳值，res.data 回傳的json資料物件
					res => (
						this.info = res.data.price
					)	
				)
				.catch(function (e){
					console.log(e)
				})
			}
		})
	</script>
</html>

Tip ：axios請求頭的 Content-Type 默認是 application/json，而postman默認的是 application/x-www-form-urlencoded，

ajax/postman一般采用@RequestParam接收引數：

@ResponseBody

public Result testpost(@RequestParam String username) {}

axiso采用@RequestBody的json方式接收引數

@ResponseBody

public Result testget(@RequestBody Map map) {}

常見錯誤

注意：瀏覽時必須用服務模式瀏覽，否則報跨域錯誤

在這里插入圖片描述

觀察者設計模式

設計模式是最精髓的東西，是軟體思想的體現，是軟體的靈魂，如三大框架SSM只所以傲視群雄，它的傲嬌，它的底氣就來自對經典設計模式的全面應用，所以如果只會應用不懂其義，那你只是個碼農；如何能領會設計模式的奧義，你就有了高級程式員的潛力；如果你能自己仿寫，你就有了架構師的入門證，

Vue這類為何稱之為框架，就是其不是簡單的編程，而是應用了經典的設計模式，那它應用了什么什么模式呢？它應用了"觀察者設計模式"，

那什么是觀察者設計模式呢？

觀察者模式定義了一種一對多的依賴關系，讓多個觀察者物件同時監聽某一個目標物件，當這個目標物件的狀態發生變化時，會通知所有觀察者物件，使它們能夠自動更新，
在這里插入圖片描述

頁面data中的address就是資料，get為獲取當前資料，set為設定資料新值
觀察者watcher就為那多個插值運算式和input文本框，在頁面加載時這些關系進行系結
當我們讓資料變化時，如input文本框修改內容，其就呼叫資料的set的方法，把資料進行更新，其更新就被vue框架通知notify眾多的觀察者，如眾多的插值運算式就會觸發trigger，進行再次渲染re-render，修改虛擬dom樹，最終vue框架區域宣傳頁面
同樣，當我們利用谷歌瀏覽器改變資料v.address賦值時，就呼叫資料的setter方法進行資料更新，資料更新后，通知眾多的觀察者，觀察者更新如上面的流程

可以看出Vue設計非常巧妙，我們頁面展現的資料，必然會涉及到資料的讀寫，于是Vue實作了一整套機制，這套機制監控資料的獲取（get），資料的更新（set），這樣當資料變化，Vue就能知道，它知道有什么用呢？它就能控制當資料變化時就能重新進行頁面的渲染，從而用戶看到頁面展現新的內容，

擴展：HBuilderX自定義模板

自定義html模板

在這里插入圖片描述

注意：模板是根據選擇的檔案型別獨立的，我們現在是創建的html模板，只有創建html時，才能選擇這個模板，

在這里插入圖片描述

vue模板.txt

創建vue模板.txt，檔案名自定義，這樣就無需每次敲這些重復的代碼，高效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data:{
				msg : "hello vue"
			}
		})
	</script>
</html>

創建新檔案呼叫模板

在這里插入圖片描述

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

標籤：其他

上一篇：取代瀏覽器插件除錯，VS Code 整合JS 除錯工具

下一篇：【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 三 ) （建議收藏）

小白入門之前端網頁技術 Vue

文章目錄

Vue

Vue概念

同類產品

官網

特點

漸進式框架

入門案例.html

改造入門案例.html

MVVM框架

基礎語法

運算子 operator

方法 methods

Vue決議資料

三種data值的寫法

高級用法：v-命令

指令集

雙向系結 v-model

閃現 v-cloak

判斷 v-if

回圈 v-for

事件 v-on

系結 v-bind

小結

構建Vue專案 lifecycle+npm+webpack

Vue的生命周期 lifecycle

npm 概念

webpack 概念

vue-cli腳手架

作用

安裝nodejs并驗證

配置npm

引數說明

腳手架安裝

創建Vue專案 npm

作業空間

生成vue專案

啟動專案 & 停止專案

測驗訪問

HBuilderX管理Vue專案

打開Vue專案

專案結構

目錄結構

重要檔案說明

呼叫關系圖

常見錯誤

Permission denied

Unexpected end of JSON input while parsing near

unable to verify the first certificate

vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

擴展：高級用法：ajax

介紹

price.json

axios.html

常見錯誤

觀察者設計模式

擴展：HBuilderX自定義模板

自定義html模板

vue模板.txt

創建新檔案呼叫模板