VUE DEMO之模拟登录个人中心页面之间数据传值实例

2024-08-01 19:28:57

lalala~ 先上代码吧：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟登录成功并跳转页面</title>
  <script src='vue.js'></script>
  <style>
    .red{
      color:red;
    }
    .ddd{
      color:#333;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 class="red">登录</h3>
    用户名：<input type="text" v-model='userinfo.username' ><br>
    密码：<input type="password" v-model='userinfo.password' ><br>
    <input type="submit" value="提交" @click='check'>
  </div>
  <script>
    let vm = new Vue({
      el:'#app',
      data(){
        return {
          userinfo:{
            username:'',
            password:'',
          }
        }
      },
      methods:{
        check(){
          if(this.userinfo.username != '' && this.userinfo.password != ''){
            alert('恭喜您，登录成功');

            //使用location 记录用户信息
            if(!window.localStorage){
              alert('您的浏览器不支持localStorage')
            }else{
              localStorage.setItem('userInfo',JSON.stringify(this.userinfo));
            }
            window.location.href='order.html'
          }else{
            alert('用户名或者密码不能为空')
          }

        }
      }
    })
  </script>
</body>
</html>

order.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>模拟登录成功并跳转页面</title>
  <script src='vue.js'></script>
  <style>
    .red{
      color:red;
    }
    .ddd{
      color:#333;
      font-size: 13px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3 class="red">个人中心</h3>
    <div>
      你好：<span class="ddd">{{username}}</span><br>
      您的密码是: <span class="ddd">{{password}}</span>
    </div>
  </div>
  <script>
    let vm = new Vue({
      el:'#app',
      data(){
        return {
          username:'',
          password:''
        }
      },
      mounted(){
        if(!window.localStorage){
          alert('浏览器不支持localStorage');
        }else{
          var data1 = localStorage.getItem('userInfo');
          var data2 = JSON.parse(data1);
          this.username = data2.username;
          this.password = data2.password;
        }
      }
    })
  </script>
</body>
</html>

分析其中运用的知识点：

1. vue v-model 指令，把表单的值和data数据绑定，双向数据绑定。

2. html5 window.localStorage 本地存储，用来存储用户信息（在实际项目中必须加密的，demo中没有去做）。

3. JSON.parse() 将JSON字符串转化成json格式

4. JSON.stringify() 将JSON转化成json字符串

以上这篇VUE DEMO之模拟登录个人中心页面之间数据传值实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解vuejs几种不同组件（页面）间传值的方式

在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会
详解vue 数据传递的方法

组件(Component)是 Vue.js 最强大的功能.组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用,但组件传值就成为一个需要解决的问题. 1.父组件向子组件传值组件实例的作用域是孤立的.这意味着不能在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 子组件: 子组件需要从父组件获取 logo 的值,就需要使用 props: ['logo'] 父组件: 2.子组件向父组件传值子组件主要通过事件传递数据给父组件. 子组件:
在vue中实现简单页面逆传值的方法

[需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和
vue中各种通信传值方式总结

1.路由通信传值路由通信是通过路由跳转用query把参数带过去,也是vue常用的通信手段. 例子:创建并在路由注册一个组件Head <template> <div id="head"> <button @click="handleChange">clickMe</button> //给按钮绑定点击事件 </div> </template> <script> export defau
VUE DEMO之模拟登录个人中心页面之间数据传值实例

lalala~ 先上代码吧: login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模拟登录成功并跳转页面</title> <script src='vue.js'></script> <style> .red{ color:red; } .ddd{ c
Vue+Mock.js模拟登录和表格的增删改查功能

前言关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 3.数据类型丰富 4.通过随机数据,模拟各种场景. 5 项目不背锅(等后端给接口的话可能会背锅) 等等优点,最后一条我加的. 第一步先安装mock.js npm install mockjs --save-dev 第二步使用 mock.js import Mock from 'mockjs' 哪里用就在哪里引入.我是在项目src/mock/index.js里面使用moc
vue父组件向子组件传递多个数据的实例

在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个字符串第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去这里主要看一下动态的数据绑定.比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后传递给子组件. 但是有一个问题,假如你有两个数据,一个对象,一个数组,需要同时从父组件传递给子组件,你会怎么办? 这里就通过一个例子来说明一下: 子组件
node基于puppeteer模拟登录抓取页面的实现

关于热图在网站分析行业中,网站热图能够很好的反应用户在网站的操作行为,具体分析用户的喜好,对网站进行针对性的优化,一个热图的例子(来源于ptengine) 上图中能很清晰的看到用户关注点在那,我们不关注产品中热图的功能如何,本篇文章就热图的实现做一下简单的分析和总结. 热图主流的实现方式一般实现热图显示需要经过如下阶段: 1.获取网站页面 2.获取经过处理后的用户数据 3.绘制热图本篇主要聚焦于阶段1来详细的介绍一下主流的在热图中获取网站页面的实现方式 4.使用iframe直接嵌入用户网
Vue.js中兄弟组件之间互相传值实例

兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script
php使用curl模拟登录后采集页面的例子

今天接到的功课是从一个网站获取商品库存,但是这个网站需要登录,我用fsockopen传递了整个header头都没用,只能求助于curl了.附带说一下curl模块的开启办法:(1)从php目录下拷贝:libeay32.dll,ssleay32.dll 到windows目录下.(2)打开php.ini,查找"extension_dir = xxxxx",确认后面的文件目录内有php_curl.dll文件.(3)同样是php.ini,查找"extension=php_curl.dl
Vue利用History记录上一页面的数据方法实例

前言本文主要介绍的是Vue利用History记录上一页面数据的相关内容,vue使用history后,能够使得url更加漂亮,也就是不再有'#'的问题,下面话不多说了,来一起看看详细的介绍吧 UI 需求从列表页的第二页进入详情页,返回时列表页仍然显示在第二页: 从列表页的第二页进入详情页,返回时列表页的筛选条件仍然存在.  技术选择使用vue-router组件,通过this.$router.push({path: path, query: query});方式,将页码
微信小程序页面之间传参实例详解

微信小程序传参: 实现效果图: 微信小程序在两个之间传参类似js传递url拼接参数,举个例子来说吧 input自己设置参数 //index.wxml <form bindsubmit="formSubmit" bindreset="formReset" class="myform"> <text class="prompt">给自己起个名字吧</text> <input placeh
PHP使用Curl实现模拟登录及抓取数据功能示例

本文实例讲述了PHP使用Curl实现模拟登录及抓取数据功能.分享给大家供大家参考,具体如下: 使用PHP的Curl扩展库可以模拟实现登录,并抓取一些需要用户账号登录以后才能查看的数据.具体实现的流程如下(个人总结): 1. 首先需要对相应的登录页面的html源代码进行分析,获得一些必要的信息: (1)登录页面的地址: (2)验证码的地址: (3)登录表单需要提交的各个字段的名称和提交方式: (4)登录表单提交的地址: (5)另外要需要知道要抓取的数据所在的地址. 2. 获取cookie并存储(针
使用curl命令行模拟登录WordPress的方法

WordPress默认登录页面:http://192.168.0.120/wordpress/wp-login.php 1.Chrome浏览器F12,输入一个错误的密码,点击登录: 取出"log=root&pwd=root@123&wp-submit=%E7%99%BB%E5%BD%95&redirect_to=http%3A%2F%2F192.168.0.120%2Fwordpress%2Fwp-admin%2F&testcookie=1",并替换为正

VUE DEMO之模拟登录个人中心页面之间数据传值实例

相关推荐

随机推荐