Vue概念

同類產品

官網

特點

漸進式框架

入門案例.html

改造入門案例.html

MVVM框架

基礎語法

運算子 operator

方法 methods

Vue決議資料

三種data值的寫法

高級用法：v-命令

指令集

雙向系結 v-model

閃現 v-cloak

判斷 v-if

v-else-if

回圈 v-for

事件 v-on

系結 v-bind

v-html

v-text

小結

Vue組件

概述

使用

測驗

Vue的Ajax

Ajax概述

Ajax原理

axios

測驗

常見錯誤

Vue路由

概述

使用步驟

入門案例

擴展：

觀察者設計模式

HBuilderX自定義模板

vue模板.txt

創建新檔案呼叫模板

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是一個用于構建用戶界面的漸進式 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>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-else-if

v-else-if專門和v-if搭配使用，控制多個元素多選一顯示的特殊的指令，其基本語法為：

注意，v-if和v-else-if和v-else之間必須連著寫，不能插入其他元素，

示例關鍵代碼如下：

<div id="app">
    <span v-if="score>=90">優秀</span>
    <span v-else-if="score>=80">良好</span>
    <span v-else-if="score>=70">及格</span>
    <span v-else>及格</span>
 </div>

  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        score:95
      }
    })
    //在控制臺中: vm.socre=85
  </script>

回圈 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">
			<p>{{count}}</p>
			<button @click="count++">點我</button>
			
			<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",
				count:1
			},
			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>

v-html

如果{{}}系結的是一段HTML片段時，是不會交給瀏覽器決議的，而是原樣顯示HTML片段的內容——和DOM中的textContent是一樣的,假如希望html可被決議可以使用v-html代替{{}}，其基本語法結構為：

<元素 v-html="變數"> 這個位置顯示變數內容 </元素>

 <div id="app">
    <h3>{{msg}}</h3>
    <h3 v-html="msg"></h3>
  </div>

  <script>
    new Vue({
      el:"#app",
      data:{
        msg:`來自&lt;&lt;<a href="javascript:;">新華社</a>&gt;&gt;的訊息`
      }
    })
  </script>

v-text

v-text是可代替{{}}系結元素內容的特殊指令,用于設定元素內部的文本內容，而且可以防止因網路延遲短暫顯示{{}}的現象，其語法為：

<元素 v-text="變數或js運算式"> </元素>

示例關鍵代碼如下：

  <div id="app">
            <!--js的天下         -->
    <h3 v-text=`用戶名:${uname}`></h3>
            <!--js的天下         -->
    <h3 v-text=`積分:${score}`></h3>
  </div>

  <script>
    setTimeout(function(){
      new Vue({
        el:"#app",
        data:{
          uname:"dingding",
          score:1000
        }
      })
    },6000)
  </script>

小結

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

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

Vue組件

概述

組件（Component）是 Vue.js 最強大的功能之一，
組件可以擴展 HTML 元素，封裝可重用的代碼，
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意型別的應用的界面都可以抽象為一個組件樹

使用

注冊一個全域組件(所有實體都能用)語法格式如下：
Vue.component(tagName, options)
tagName 為組件名，options 為配置選項，注冊后，我們可以使用以下方式來呼叫組件:<tagName></tagName>
也可以注冊一個區域組件(只能在這個實體中使用)

測驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.先引入vue -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<starter></starter>
			<foot></foot>
		</div>
		<script>
			//全域組件
			Vue.component('foot',{
				template:'<ol><li>你好</li><li>你好</li><li>你好</li></ol>'
			})
			new Vue({
				el:'#app',
				//區域組件
				components:{
					starter:{//組件名
						template:'<h1>哈哈</h1>'
					}
				}
			})
		</script>
	</body>
</html>

Vue的Ajax

Ajax概述

Ajax 即Asynchronous Javascript And XML( 異步的 )
Ajax并不是一種新的編程語言，而是多種技術的綜合應用
Ajax是客戶端的技術，它可以實作區域重繪網頁
AJAX 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，

Ajax原理

AJAX 是一種用于創建快速動態網頁的技術，
通過在后臺與服務器進行少量資料交換，AJAX 可以使網頁實作異步更新，這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，
傳統的網頁（不使用 AJAX）如果需要更新內容，必需多載整個網頁面，

在這里插入圖片描述

axios

1, Vue中封裝了ajax并增強了它，在異步并發處理優于原生ajax，稱為：axios（ajax input output system）
2, 使用步驟: 要使用一個單獨的js檔案,注意匯入順序

<script src="vue.js"></script>
<script src="axios.min.js"></script>

3, 語法

axios.get("url地址資訊","引數資訊").then(res=>{
	console.log(res.data);
})

測驗

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax</title>
		
		<script src="js/vue.js"></script>
		<script src="js/axios.min.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p>{{info}}</p>
			<button @click="init()">點我獲取資料</button>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					info:''
				},
				 // 發ajax請求，用以獲取資料
				methods:{
					init(){
						axios.get('http://localhost:8080/car/get').then(     //可以跨域請求服務器資料
							a => ( //a就是訪問成功后回傳的資料
								// this.info = a.data.name  
								this.info = a.data //data已經是js物件了
							)	
						).catch(function (e){
							console.log(e)
						})
					}
				}
			})
		</script>
	</body>
</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) {}

常見錯誤

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

在這里插入圖片描述

Vue路由

概述

說明: 用戶發起一個請求,在互聯網中經過多個站點的跳轉.最侄訓取服務器端的資料. 把互聯網中網路的鏈路稱之為路由. (網路用語)
VUE中的路由: 根據用戶的請求URL地址,展現特定的組件(頁面)資訊. (控制用戶程式跳轉程序)

使用步驟

<!-- 1.引入JS 路由需要依賴vue 注意順序-->
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

入門案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>router</title>
		
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 將被決議成a標簽,還有href屬性 -->
			<router-link to="/home">主頁</router-link>
			<router-link to="/help">幫助頁</router-link>
			<!-- 路由出口,匹配成功后,在這里展示 -->
			<router-view></router-view>
		</div>
		
		<script>
			//1,定義組件
			let home = {
				template:"<h3>這是主頁</h3>"
			}
			let help = {
				template:"<h3>這是幫助頁</h3>"
			}
			//2,創建路由的實體VueRouter,routes指定每個路由映射的一個組件
			let router=new VueRouter({
				routes:[
					{path:"/home",component:home},
					{path:"/help",component:help}
				]
			})
			//3,通過router注入路由,從而讓整個應用都有路由功能
			new Vue({
				el:"#app",
				// router:router
				router
			})
		</script>
	</body>
</html>

擴展：

觀察者設計模式

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

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

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

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

在這里插入圖片描述

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

標籤：其他

上一篇：Javascript高級知識之移動端和本地存盤

下一篇：JS DOM編程筆記 - scrollIntoView()（十九）

VUE 常用指令

Vue概念

同類產品

官網

特點

漸進式框架

入門案例.html

改造入門案例.html

MVVM框架

基礎語法

運算子 operator

方法 methods

Vue決議資料

三種data值的寫法

高級用法：v-命令

指令集

雙向系結 v-model

閃現 v-cloak

判斷 v-if

v-else-if

回圈 v-for

事件 v-on

系結 v-bind

v-html

v-text

小結

Vue組件

概述

使用

測驗

Vue的Ajax

Ajax概述

Ajax原理

axios

測驗

常見錯誤

Vue路由

概述

使用步驟

入門案例

擴展：

觀察者設計模式

HBuilderX自定義模板

vue模板.txt

創建新檔案呼叫模板

`雙向系結 v-model`