vue.js实现页面跳转传参以及vue相关功能介绍

最新推荐文章于 2023-04-19 08:15:00 发布

IUBKBK

最新推荐文章于 2023-04-19 08:15:00 发布

阅读量633

点赞数

原文链接：https://blog.csdn.net/achenyuan/article/details/70521305

版权

由于项目急且前端开发人员只会拼页面具体数据交互不会，只能我后台开发人员来写。因为是数据交互使用的是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();

另外，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)) + “
”);
}
}
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）也发生改变）。

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--这是我们的View-->

    <divid="test">

        {{ msg }}

    </div>

</body>

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

<script>

    // 这是我们的Model

    var testData ={

        msg: 'HelloWorld!'

    }

    // 创建一个 Vue 实例或"ViewModel"

    // 它连接 View 与 Model

    var vue = newVue({

        el:'#test',

        data:testData

    })

</script>

第一步当然是引用Vue.js库文件啦，然后

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

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

3.创建一个Vue实例或"ViewModel"，它用于连接View和Model（上面的new Vue(…)），选项对象的el属性指向View，el: '#test’表示该Vue实例将挂载到<divid=“test”>…这个元素，data即数据，以后还会添加methods属性，在v-click里使用。在Dom元素里使用{{ msg }}即可实现文件插入。

4.每个 Vue 实例都会代理其 data 对象里所有的属性,如vue.msg;//Hello World

使用”{{}}”是单向绑定的，意思是只会把data里数据绑定到Dom上，当data数据改变时dom元素也会根着改变，但如果dom元素值改变data数据是不会变的。所以如果想双向绑定数据需要使用指定”t-model”.

data里数据和dom元素哪一方改变另一方数据会跟着变。

Vue.js的常用指令，其实长用指令我不想介绍，因为网上这方面例子很多，我就随便写一点吧。

一．逻辑跳转相关指定:v-if ,v-else,v-show.

v-if指令，语法：v-if=“expression”。
示例：

他是个男人！

年龄超过25了!

名字:{{ name }}有“shan”

结果：

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

他是个男人！

他是个女人！

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

二. 监听DOM事件：v-on。语法:v-on:事件名，如v-on:click=”function”或v-on:click=”function(arg)”。可简写为@click。

Greet

三．操作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下面的第一层数组。

<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>

其它没啥要介绍的。现在我们用的取数组直接赋值到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,代码如下：

<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>

注意红色字体标注的内容。

显示结果：

当我们点击跳转时跳转到test2.html,代码如下：

<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>

将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/

转自：https://blog.csdn.net/achenyuan/article/details/70521305

IUBKBK

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js实现页面跳转传参以及vue相关功能介绍

由于项目急且前端开发人员只会拼页面具体数据交互不会，只能我后台开发人员来写。因为是数据交互使用的是ajax方式，我首先要面临的问题是我获得的数据怎么显示在页面上，以及怎么把数据保存下来，等页面跳转时就不用向后台再次请求数据，比如用户名以帐号相关基础信息，不可能每次打开新页面都向后台请求一下，太麻烦且交互数据太多。我首先想到的是H5里的LocalStorage,SessionStroage保存数据，而且用jquery获得dom元素，再用jquery的attr()和html()方法设置dom元素属性。先介绍一
复制链接

扫一扫