前端框架Vue.js的使用及具体页面跳转时的参数传递

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

日出东方VS唯我不败

2923人浏览 · 2017-05-15 13:32:49

日出东方VS唯我不败 · 2017-05-15 13:32:49 发布

我首先想到的是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()方法，可以在不知道有哪些键值的时候使用，如下：

[html]view plaincopy 
   
print?
 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”.

[html]view plaincopy 
   
print?
 <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"。

示例：

[html]view plaincopy 
   
print?
 <!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。

[html]view plaincopy 
   
print?
 <!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下面的第一层数组。

[html]view plaincopy 
   
print?
 <!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:

[html]view plaincopy 
   
print?
 // 这是我们的Model  
 var testData = {  
     message: 'Hello World!'  
 }  
 testData.pp = "增加的属性";  

在页面里test.html里引用data.js,代码如下：

[html]view plaincopy 
   
print?
 <!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,代码如下：

[html]view plaincopy 
   
print?
 <!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/

链接：http://blog.csdn.net/achenyuan/article/details/70521305

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^