程序博客网 > 知乎 车枪球

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

来源：互联网 发布：知乎 车枪球 编辑：程序博客网 时间：2024/05/31 11:04

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

1 0
知乎 车枪球 知乎 车枪球
原创粉丝点击
热门IT博客
js json对象作为参数js json对象作为参数
网络广告词大全2016年网络广告词大全2016年
双轨制对碰算法
软件项目管理流程文档
不得不爱c920调试软件
ubuntu 16.04国内镜像
游族网络 权力的游戏
网络存储方案
mysql官网地址
裘德洛妻子知乎
银行程序员是干嘛的
淘宝3537哪家好
sql是什么意思
linux系统常用命令
python 笛卡尔积
板生产软件
mac cosmetics
centos pptp 一键安装
文本数据特征提取算法
cn域名隐私保护
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 舌头发白怎么办 血热怎么办 血热性脱发怎么办 血热长痤疮怎么办 剑突突出怎么办 喷门癌晚期打嗝怎么办 半月板撕裂怎么办 半月板三级损伤怎么办 膝盖半月板损伤怎么办 肛周脓肿怎么办 胆汁酸过高怎么办 胆汁反流怎么办 肛周囊肿怎么办 便秘大便出血怎么办 便秘大便带血是怎么办 直肠脱落怎么办 直肠脱垂怎么办 痔疮严重便血怎么办 老人便秘严重怎么办 胃胀便秘怎么办 食道上长瘤怎么办 想考妣怎么办 感冒鼻子不通怎么办 鼻子不通气怎么办 新生儿鼻塞怎么办 新生儿感冒鼻塞怎么办 马钱子中毒怎么办 严重关节炎怎么办 冬季血气不足怎么办 近视眼死鱼眼怎么办 脸上有有小疤印怎么办 疤痕体质怎么办 变成疤痕体质怎么办 颈部淋巴堵塞怎么办 腋下淋巴堵塞怎么办 眼睛结膜出血怎么办 外伤眼白出血怎么办 眼白外伤出血怎么办 眼白受伤出血怎么办 手指内出血怎么办 指甲内出血怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里