前端框架Vue.js的使用及具体页面跳转时的参数传递
由于项目急且前端开发人员只会拼页面具体数据交互不会，只能我后台开发人员来写。因为是数据交互使用的是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");
}
}
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）也发生改变）。
{{ msg }}
第一步当然是引用Vue.js库文件啦，然后
1.定义View（其实就是上面的dom元素test）
2.定义Model(就是上在的json格式的testData)
3.创建一个Vue实例或"ViewModel"，它用于连接View和Model（上面的new Vue(...)），选项对象的el属性指向View，el: '#test'表示该Vue实例将挂载到
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.
1. 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。
三．操作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下面的第一层数组。
Name
Age
Sex
{{ person.name }}
{{ person.age }}
{{ person.sex }}
其它没啥要介绍的。现在我们用的取数组直接赋值到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,代码如下：
{{ pp }}
跳转
注意红色字体标注的内容。
显示结果：
当我们点击跳转时跳转到test2.html,代码如下：
{{ name }}
将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/