前端框架Vue.js的使用及具體頁面跳轉時的引數傳遞

阿新 • • 發佈：2019-02-20

由於專案急且前端開發人員只會拼頁面具體資料互動不會，只能我後臺開發人員來寫。因為是資料互動使用的是ajax方式，我首先要面臨的問題是我獲得的資料怎麼顯示在頁面上，以及怎麼把資料儲存下來，等頁面跳轉時就不用向後臺再次請求資料，比如使用者名稱以帳號相關基礎資訊，不可能每次開啟新頁面都向後臺請求一下，太麻煩且互動資料太多。

我首先想到的是H5裡的LocalStorage,SessionStroage儲存資料，而且用jquery獲得dom元素，再用jquery的attr()和html()方法設定dom元素屬性。先介紹一下Storage吧。最早本地儲存使用的是Cookies, 問題主要就是太小，大概也就4KB的樣子，而且IE6只支援每個域名20個cookies，太少了,所以H5技術引用了LocalStorage和SessionStroage且支援5m的資料量，夠用了，它們是windows下的屬性。

localStorage與sessionStorage的唯一一點區別就是localStorage屬於永久性儲存，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空。

localStorage的瀏覽器支援情況：

使用方法，因為LocalStorage和SessionStorage使用方法一樣，所以下面只介紹LocalStorage：

1．寫資料，可以使用“.”,”[]”，以及setItems(key,value);3種方式。例如：

localStorage.name = zhangshan;//設定name為" zhangshan "

localStorage["name "] = " zhangshan";//設定name為" zhangshan "，覆蓋上面的值

localStorage.setItem("name"," zhangshan ");//設定name為" zhangshan " 推薦使用setItem();

2.讀資料，可以使用“.”,”[]”，以及getItems(key);3種方式。例如：

var a1 = localStorage["name"];//獲取name的值

var a2 = localStorage. name;//獲取name的值

var b = localStorage.getItem("name ");//獲取name的值，推薦使用

setItem();

ps:由於LocalStorage是儲存到硬碟上的，如果我們不主動清理那麼資料會永久儲存到硬碟上，清理方式：localStorage.removeItem("name");如果希望一次性清除所有的鍵值對，可以使用clear();

3. 另外，H5有個key()方法，可以在不知道有哪些鍵值的時候使用，如下：

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)獲得相應的鍵，再用getItem()方法獲得對應的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

4. localStorage與sessionStorage儲存的必需是字串，而獲取的互動資料是Object，所以我們一般要把JSON格式的字串轉成字元。

4.1.JSON.stringify()將Json物件轉為字串。

4.2.JSON.parse()將字串轉為json格式。

至此，我們有了把互動資料儲存到本地或session裡的方法了，當開啟新頁面時只要從Storage裡取到值然後使用Jquery獲得dom元素選擇方法賦值即可。後來我又在今日頭條上看了些技術文件，上面講了Vue.js，可以實現資料的繫結，然後研究了一下。發現它其實也可以實現資料儲存（當然是類似SessionStorage的，瀏覽器關閉資料自動清空），而且可以將值繫結到Dom元素上，這樣我們就不用去獲取Dom元素然後呼叫方法賦值了，看起來很誘惑哦。

Vue.js是一個輕巧、高效能、可元件化的MVVM庫。MVVM模式（資料變數（model）發生改變檢視（view）也改變，檢視（view）改變，資料變數（model）也發生改變）。

<!DOCTYPEhtml>

<html>

<head>

</head>

<body>

<divid="test">

</div>

</body>

<scriptsrc="js/vue.js"></script>

// 這是我們的Model

var testData ={

msg: 'HelloWorld!'

}

// 建立一個 Vue 例項或"ViewModel"

// 它連線 View 與 Model

var vue = newVue({

el:'#test',

data:testData

})

</script>

</html>

第一步當然是引用Vue.js庫檔案啦，然後

1.定義View（其實就是上面的dom元素test）

2.定義Model(就是上在的json格式的testData)

3.建立一個Vue例項或"ViewModel"，它用於連線View和Model（上面的new Vue(...)），選項物件的el屬性指向View，el: '#test'表示該Vue例項將掛載到<divid="test">...</div>這個元素，data即資料，以後還會新增methods屬性，在v-click裡使用。在Dom元素裡使用{{ msg }}即可實現檔案插入。

4.每個 Vue 例項都會代理其 data 物件裡所有的屬性,如vue.msg;//Hello World

使用”{{}}”是單向繫結的，意思是隻會把data裡資料繫結到Dom上，當data資料改變時dom元素也會根著改變，但如果dom元素值改變data資料是不會變的。所以如果想雙向繫結資料需要使用指定”t-model”.

<div id="app">
    <input type="text" v-model="message"/>
</div>

data裡資料和dom元素哪一方改變另一方資料會跟著變。

Vue.js的常用指令，其實長用指令我不想介紹，因為網上這方面例子很多，我就隨便寫一點吧。

一．邏輯跳轉相關指定:v-if ,v-else,v-show.

1. v-if指令，語法：v-if="expression"。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="test">
			<h1 v-if="man">他是個男人！</h1></br>
			<h1 v-if="age >= 25">年齡超過25了!</h1></br>
			<h1 v-if="name.indexOf('shan') >= 0">名字:{{ name }}有“shan”</h1>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		
		var vm = new Vue({
			el: '#test',
			data: {
				name: "zhangshan",
				man: true,
				age: 28
			}
		})
	</script>
</html>

結果：

2.和v-if配套的是v-else, v-else元素必須立即跟在v-if或v-show元素的後面.用法如下。

<h1 v-if="man">他是個男人！</h1></br>

<h1 v-else>他是個女人！</h1></br>

3.v-show。和v-if類似，用的地方很少，不介紹了。

二. 監聽DOM事件：v-on。語法:v-on:事件名，如v-on:click=”function”或v-on:click=”function(arg)”。可簡寫為@click。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接繫結一個方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用內聯語句-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            // 在 `methods` 物件中定義方法
            methods: {
                greet: function() {
                    // // 方法內 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })
    </script>
</html>

三．操作dom元素屬性的.v-bind,v-html語法：v-bind:argument="expression"，如v-bind:class，簡寫為”:class”。所以我們也可以用v-bind模擬”{{}}”的動作。

和jquery的html()方法類似，如果我們想插入html格式的用v-html.

四．遍歷陣列:v-for,語法v-for=”item in items”.item即是data裡的陣列，當然是data下面的第一層陣列。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="styles/demo.css" />
	</head>

	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Age</th>
						<th>Sex</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="person in people">
						<td>{{ person.name  }}</td>
						<td>{{ person.age  }}</td>
						<td>{{ person.sex  }}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		var vm = new Vue({
			el: '#app',
			data: {
				people: [{
					name: 'Jack',
					age: 30,
					sex: 'Male'
				}, {
					name: 'Bill',
					age: 26,
					sex: 'Male'
				}, {
					name: 'Tracy',
					age: 22,
					sex: 'Female'
				}, {
					name: 'Chris',
					age: 36,
					sex: 'Male'
				}]
			}
		})
	</script>
</html>

其它沒啥要介紹的。現在我們用的取陣列直接賦值到dom元素上的”{{}}”,能實現雙向陣列繫結的v-model，有監聽事件的v-click,有操作dom元素其它屬性的v-bind,有邏輯判斷的v-if,v-else，這些API都很簡單，可見Vue.js是個輕量級的前端框架。

現在Vue.js學完了，我們來解決我們的問題，如何在頁面跳轉時獲取上次頁面得到的資料以及賦值到Dom上，開頭我們用了LocalStorage和SessionStorage幫我們儲存資料到檔案磁碟和瀏覽器快取裡，以及用jquery獲得dom元素然後用attr()和thml()方法設定值到dom元素，如果用Vue.js要怎麼做呢？

即然Vue.js能將資料繫結到上那麼就幫我們解決了資料賦值到Dom上的問題。

我們可以把data單獨定義到一個js檔案裡，在new Vue時如果需要這些資料還引用這個data.js檔案。比如我們新建一個data.js檔案。裡面包含的是json格式的資料。如下：

data.js:

// 這是我們的Model
var testData = {
	message: 'Hello World!'
}
testData.pp = "增加的屬性";

在頁面裡test.html裡引用data.js,程式碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/data.js"></script>
	</head>

	<body>
		<!--這是我們的View-->
		<div id="app">
			<p>{{ pp }}</p>
			<a href="test2.html">跳轉</a>
		</div>
		
	</body>
	<script src="js/vue.js"></script>
	<script>
		// 建立一個 Vue 例項或 "ViewModel"
		// 它連線 View 與 Model
		new Vue({
			el: '#app',
			data: testData
		})
	</script>
</html>

注意紅色字型標註的內容。

顯示結果：

當我們點選跳轉時跳轉到test2.html,程式碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/data.js"></script>
	</head>

	<body>
		<!--這是我們的View-->
		<div id="app2">
			<p>{{ name }}</p>
		</div>
		
	</body>
	<script src="js/vue.js"></script>
	<script>
		// 建立一個 Vue 例項或 "ViewModel"
		// 它連線 View 與 Model
		new Vue({
			el: '#app2',
			data: {
				name:testData.message
			}
		})
	</script>
</html>

將data.js引用到test2.html裡，在new Vue時，如果我們只要testData某個或多個欄位的資料，可以自己構造json格式的資料，如name:testData.message

，如果我們需要全部的則只要data:testData即可。

顯示的結果：

成功的顯示的data.js裡的message的資料。

比如我們用ajax從後臺取到了些資料，我們可以動態將資料設定到testData裡。再新新頁面取資料，這樣我們就可以實現頁面跳轉時也能獲得資料了，不過要注意因為ajax請求轉為是非同步的，可能當我們開啟新頁面時資料還沒收到，所以我建議用js控制開啟新頁面：window.location.href='test2.html';

目前瞭解的Vue.js可以解決我的問題了，當然它不可能只有這些，還有很多要學習的，等到工作需要還可以再研究，具體要看看官方文件https://cn.vuejs.org/v2/guide/events.html

以及AIP：https://cn.vuejs.org/v2/api/

前端框架Vue.js的使用及具體頁面跳轉時的引數傳遞

前端框架Vue.js的使用及具體頁面跳轉時的引數傳遞

vue使用路由進行頁面跳轉時傳遞引數

頁面跳轉間引數傳遞，新頁面接收引數的方法

mui初步應用（二）頁面跳轉和引數傳遞問題

微信小程式的頁面跳轉和引數傳遞，頁面生命週期

angular-單頁面跳轉/路由引數傳遞ngRoute

微信小程式中頁面跳轉時如何傳遞一個物件

前端框架Vue.js——vue-i18n ，vue項目中如何實現國際化

2018.9.6 關於對前端框架Vue.js的理解

vue.js中router.push跳轉頁面、帶引數、設定引數的方法

前端框架vue.js系列（4）：事件修飾符與按鍵修飾符

前端框架vue.js系列（10）：生命週期鉤子函式

前端框架vue.js詳解

(轉)2018幾大主流的UI/JS框架——前端框架 [Vue.js(目前市場上的主流)]

返回字符串的 form和js組合讓頁面跳轉

js實現靜態頁面跳轉傳參

在頁面跳轉的時候，在跳轉後的頁面中使用js 獲取到頁面跳轉的url中攜帶的引數。

JS 頁面跳轉，引數的傳遞

使用iframe框架後的頁面跳轉時目標頁面變為iframe的子頁面的問題

js 中實現頁面跳轉的方法(window.location和window.open的區別)

前端框架Vue.js的使用及具體頁面跳轉時的引數傳遞

相關推薦