由于项目急且前端开发人员只会拼页面具体数据交互不会,只能我后台开发人员来写。因为是数据交互使用的是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()方法,可以在不知道有哪些键值的时候使用,如下:

[html]  view plain  copy
 print ?
  1. var storage = window.localStorage;  
  2. function showStorage(){  
  3.  for(var i=0;i<storage.length;i++){  
  4.   //key(i)获得相应的键,再用getItem()方法获得对应的值  
  5.   document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");  
  6.  }  
  7. }  

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>

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

</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 plain  copy
 print ?
  1. <div id="app">  
  2.     <input type="text" v-model="message"/>  
  3. </div>  

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

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

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

1. v-if指令,语法:v-if="expression"。

      示例:

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <div id="test">  
  9.             <h1 v-if="man">他是个男人!</h1></br>  
  10.             <h1 v-if="age >= 25">年龄超过25了!</h1></br>  
  11.             <h1 v-if="name.indexOf('shan') >= 0">名字:{{ name }}有“shan”</h1>  
  12.         </div>  
  13.     </body>  
  14.     <script src="js/vue.js"></script>  
  15.     <script>  
  16.           
  17.         var vm = new Vue({  
  18.             el: '#test',  
  19.             data: {  
  20.                 name: "zhangshan",  
  21.                 man: true,  
  22.                 age: 28  
  23.             }  
  24.         })  
  25.     </script>  
  26. </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 plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <div id="app">  
  9.             <p><input type="text" v-model="message"></p>  
  10.             <p>  
  11.                 <!--click事件直接绑定一个方法-->  
  12.                 <button v-on:click="greet">Greet</button>  
  13.             </p>  
  14.             <p>  
  15.                 <!--click事件使用内联语句-->  
  16.                 <button v-on:click="say('Hi')">Hi</button>  
  17.             </p>  
  18.         </div>  
  19.     </body>  
  20.     <script src="js/vue.js"></script>  
  21.     <script>  
  22.         var vm = new Vue({  
  23.             el: '#app',  
  24.             data: {  
  25.                 message: 'Hello, Vue.js!'  
  26.             },  
  27.             // 在 `methods` 对象中定义方法  
  28.             methods: {  
  29.                 greet: function() {  
  30.                     // // 方法内 `this` 指向 vm  
  31.                     alert(this.message)  
  32.                 },  
  33.                 say: function(msg) {  
  34.                     alert(msg)  
  35.                 }  
  36.             }  
  37.         })  
  38.     </script>  
  39. </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 plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4.     <head>  
  5.         <meta charset="UTF-8">  
  6.         <title></title>  
  7.         <link rel="stylesheet" href="styles/demo.css" />  
  8.     </head>  
  9.   
  10.     <body>  
  11.         <div id="app">  
  12.             <table>  
  13.                 <thead>  
  14.                     <tr>  
  15.                         <th>Name</th>  
  16.                         <th>Age</th>  
  17.                         <th>Sex</th>  
  18.                     </tr>  
  19.                 </thead>  
  20.                 <tbody>  
  21.                     <tr v-for="person in people">  
  22.                         <td>{{ person.name  }}</td>  
  23.                         <td>{{ person.age  }}</td>  
  24.                         <td>{{ person.sex  }}</td>  
  25.                     </tr>  
  26.                 </tbody>  
  27.             </table>  
  28.         </div>  
  29.     </body>  
  30.     <script src="js/vue.js"></script>  
  31.     <script>  
  32.         var vm = new Vue({  
  33.             el: '#app',  
  34.             data: {  
  35.                 people: [{  
  36.                     name: 'Jack',  
  37.                     age: 30,  
  38.                     sex: 'Male'  
  39.                 }, {  
  40.                     name: 'Bill',  
  41.                     age: 26,  
  42.                     sex: 'Male'  
  43.                 }, {  
  44.                     name: 'Tracy',  
  45.                     age: 22,  
  46.                     sex: 'Female'  
  47.                 }, {  
  48.                     name: 'Chris',  
  49.                     age: 36,  
  50.                     sex: 'Male'  
  51.                 }]  
  52.             }  
  53.         })  
  54.     </script>  
  55. </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 plain  copy
 print ?
  1. // 这是我们的Model  
  2. var testData = {  
  3.     message: 'Hello World!'  
  4. }  
  5. testData.pp = "增加的属性";  

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

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <script src="js/data.js"></script>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <!--这是我们的View-->  
  11.         <div id="app">  
  12.             <p>{{ pp }}</p>  
  13.             <a href="test2.html">跳转</a>  
  14.         </div>  
  15.           
  16.     </body>  
  17.     <script src="js/vue.js"></script>  
  18.     <script>  
  19.         // 创建一个 Vue 实例或 "ViewModel"  
  20.         // 它连接 View 与 Model  
  21.         new Vue({  
  22.             el: '#app',  
  23.             data: testData  
  24.         })  
  25.     </script>  
  26. </html>  

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

显示结果:


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

[html]  view plain  copy
 print ?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title></title>  
  6.         <script src="js/data.js"></script>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <!--这是我们的View-->  
  11.         <div id="app2">  
  12.             <p>{{ name }}</p>  
  13.         </div>  
  14.           
  15.     </body>  
  16.     <script src="js/vue.js"></script>  
  17.     <script>  
  18.         // 创建一个 Vue 实例或 "ViewModel"  
  19.         // 它连接 View 与 Model  
  20.         new Vue({  
  21.             el: '#app2',  
  22.             data: {  
  23.                 name:testData.message  
  24.             }  
  25.         })  
  26.     </script>  
  27. </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

Logo

前往低代码交流专区

更多推荐