[Leetcode] 0026. 删除有序数组中的重复项-CFANZ编程社区

title: VUE

logo

一、Vue简介

1.1 简介

::: tip
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。
:::

1.2 MVVM 模式的实现者——双向数据绑定模式

1.3 其它 MVVM 实现者

1.4 为什么要使用 Vue.js

1.5 Vue.js 的两大核心要素

1.5.1 数据驱动

1.5.2 组件化

二、Vue的初体验

2.1在页面引入vue的js文件即可。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>

2.2 在页面中绑定vue元素

创建一个div，id是app
<div id="app"></div>

2.3 创建vue对象，设计对象的内容

<script>
    new Vue({
        el: "#app",
        data: {
            title: "hello vue!",
            age: 18,
            flag: true
        }
    });
</script>

 #  el: element的简称，也就是Vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML元素，或返回 HTML 元素的函数。
 #  data: 用于提供数据的对象，里面存放键值对数据。

2.4 在页面的元素中使用插值表达式来使用vue对象中的内容

<div id="app">
    {{title}}
    <hr />
    {{age}}
    <hr />
    {{flag}}
</div>

三、插值表达式

new Vue({
		el:"#app",
		data:{
			title:"hello world!"
		},
		methods:{
			sayHello:function(){
				return "hello vue";
			}
		}
	});

3.1 简单使用插值表达式获取数据

<div id="app">
	{{title}}
</div>

3.2 在插值表达式中获取数组中的内容

<div id="app">
	{{[1,2,3,4][2]}}
</div>

3.3 使用插值表达式获取对象中的属性

<div id="app">
	{{ {"name":"xiaoyu","age":20}.age }}
</div>

3.4 使用插值表达式调用Vue中的方法

<div id="app">
		{{ sayHello()}}
</div>

四、Vue对象总结

五、Vue的分支 v-if

5.1 v-if

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{title}}
        <p v-if="flag">
            今天天气很好呀
        </p>
        <p v-else="flag">
            刮大风，不好
        </p>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                title: "hello vue!",
                age: 18,
                flag: true
            }
        });
    </script>
</body>

</html>

5.2 v-show

<div id="app">
    <p v-if="rich">
        有钱！
    </p>
    <p v-show="rich">
        有钱！
    </p>
    <button @click="rich=!rich">今天彩票开奖</button>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            rich: true
        }
    });
</script>

六、Vue的循环 v-for

6.1 普通的for循环

<body>
    <div id="app">
        <ul>
            <li v-for="a in args">{{a}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                args:[1,2,3,4,5]
            }
        });
    </script>
</body>

6.2 带着索引的for

<body>
    <div id="app">
        <ul>
            <li v-for="(a,i) in args">{{i}},{{a}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                args:[1,2,3,4,5]
            }
        });
    </script>
</body>

6.3 遍历一个对象中的信息： v、k、i

<body>
    <div id="app">
        <ul>
            <li v-for="(v,k,i) in student">{{i+1}}-{{v}}-{{k}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                student: {
                    name: 'xike',
                    age: 20,
                    girl: 'yige'
                }
            }
        });
    </script>
</body>

6.4 遍历一个对象数组：嵌套的for循环

<body>
    <div id="app">
        <ul>
            <div v-for="stu in students">
                <li v-for="(v,k,i) in stu">{{i+1}}--{{k}}--{{v}} </li><br/>
            </div>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                students:[
            	{
                	username:'小鱼',
                	age:20,
                    girl:'如花'
            	},
            	{
                	username:'小飞',
                	age:21,
                    girl:'翠花'
            	},
            	{
                	username:'小鹏',
                	age:22,
                    girl:'志玲'
            	}
        	]
            }
        });
    </script>
</body>

1585237361138

七、Vue的属性绑定

7.1 v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>v-model绑定value属性的值和model的数据</p>
    <input type="text" v-model="msg"> `{{msg}}`
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            msg:"Hello Vue"
        }
    });
</script>
</body>
</html>

此时input标签中加入了“v-model='msg'”，表示input的value值与vue对象中的msg属性绑定，当在input输入框中输入内容会实时修改msg的值。于是`{{msg}}`插值表达式能实时输出input输入框内的值。

页面效果如下：

7.2 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定其他属性的</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="https://www.baidu.com">百度一下</a> <hr />
    <!-- 绑定元素的其他属性时 使用v-bind:属性名 也可以直接使用:属性值 -->
    <a v-bind:href="link">百度一下</a>
    <a :href="link">百度一下</a>

</div>
<script>
    new Vue({
        el: "#app",
        data: {
            link: "https://www.baidu.com"
        }
    });
</script>
</body>
</html>

<a v-bind:href='link'></a>
<a :href='link'>

八、Vue的事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>@事件名称 帮绑定相应的事件  v-on:可以简写为@</p>
    {{sum}}
    <p>{{sum > 10 ? "大于10" : "小于10"}}</p>
    <input type="button" value="增加" @click="increment(1)">
    <input type="button" value="减少" v-on:click="decrease(1)">
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            sum: 0
        },
        methods: {
            increment: function (num) {
                this.sum += num;
            },
            decrease: function (num) {
                this.sum -= num;
            }
        }
    });
</script>
</body>
</html>

从这里例子中：

设参：

<button type="button" @click="increase(2)">增加</button>

传参：

increase:function(s);

接参：

this.sum+=s

::: tip
接下来我们来看一下VUE中如何进行事件绑定。
:::

8.1 v-on

<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="myAlert" />
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                link:'http://www.baidu.com'
            },
            methods:{
                myAlert:function(){
                    alert("AAAAAAA");
                }
            }
        });
    </script>
</body>

<input type="text" @click="myAlert"  />

8.2 事件修饰符

<body>
    <div id="app">
        <p @mousemove="mm">
            x:{{x}}
            y:{{y}}
            <span @mousemove.stop>鼠标移动到此即停止</span>
        </p>
    </div>
    <script>
        new Vue({
            el:'#app',
			data:{
				x:0,
				y:0
			},
			methods:{
				mm:function(event){
					this.x = event.clientX;
					this.y = event.clientY;
				}
			}
        });
    </script>
</body>

8.3计算属性：computed

计算：这个属性的值可以计算出来后缓存起来

属性：本质上是一个属性，不是一个方法

8.3.1 什么是计算属性

8.3.2 计算属性与方法的区别

<body>
    <div id="app">
        {{message}}
        <input type="text" v-model="message">
        <p>调用当前时间的方法：{{currentTime1()}}</p>
        <p>当前时间的计算属性：{{currentTime2}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
            methods: {
                currentTime1: function () {
                    return Date.now();
                }
            },
            computed: {
                currentTime2: function () {
                    this.message;
                    return Date.now();
                }
            }
        });
    </script>
</body>

8.3.3 测试效果

仔细看图中说明，观察其中的差异

8.3.4 结论

8.4 绑定 HTML Class

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，
所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE演示</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>绑定样式  v-bind:class</h2>
    <div :class="[activeClass]">AAA</div>
    <div :class="{active: isActive}">AAA</div>

    <h2>绑定内联样式  v-bind:style</h2>
    <div :style="bgColor">AAA</div>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            isActive: true,
            bgColor: {
                color: "blue"
            }
        }
    });
</script>

<style>
    .active {
        width: 100px;
        height: 100px;
        border: red 1px dashed;
    }
</style>
</body>
</html>

九、Vue的组件化

9.1 什么是“组件化”

9.1.1 组件的全局注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件的全局注册</title>
</head>
<body>

    <div id="app">

        <model1></model1>
        <model1></model1>
        <model1></model1>

    </div>
        <hr/>
    <div id="app1">

        <model1></model1>
        <model1></model1>
        <model1></model1>

    </div>


</body>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
	//通过Vue.component实现组件的全局注册，全局注册后的组件可以被重复使用。
    Vue.component("model1",{

        template:"<div><h1>{{title}}</h1><button type='button' @click='btnfn'>点我</button></div>",
        data:function(){
            return {
                title:"hello vue"
            }
        },
        methods:{
            btnfn:function(){
                alert("hello !!!");
            }
        }
    });

    new Vue({
        el:'#app'
    })
    new Vue({
        el:'#app1'
    })


</script>

</html>

9.1.2 组件的本地注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <model1></model1>
    <model2></model2>
    <model3></model3>
</div>
<script>
    Vue.component('model1', {
        template: '<div><h1>{{title}}</h1><button @click="btnfn">点我</button></div>',
        data: function () {
            return {
                title: 'Hello model1'
            }
        },
        methods: {
            btnfn: ()=>alert("model1")
        }
    })

    let model2 = {
        template: '<div><h2>{{title}}</h2><button @click="innerBtn">点我</button></div>',
        data: function () {
            return {
                title: "Hello model2......."
            }
        },
        methods: {
            innerBtn:()=>alert("model2")
        }
    };

    let model3 = {
        template: '<div><h3>{{title}}</h3><button @click="innerBtn">点我</button></div>',
        data: function () {
            return {
                title: "Hello model3......."
            }
        },
        methods: {
            innerBtn:()=>alert("model3")
        }
    };

    new Vue({
        el: "#app",
        components: {
            model2,
            model3
        }
    });
</script>
</body>
</html>

9.1.3 小结

data:function(){
     return {
           title:"hello vue"
     }
 }

9.2 组件的生命周期

<html>
	<head>
		<meta charset="UTF-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app1">
			{{title}}
			<button type="button" @click="changeTitle">change title</button>
			<button type="button" @click="destroy">destroy</button>
		</div>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		new Vue({
			el:"#app1",
			data:{
				title:"this is title"
			},
			methods:{
				changeTitle:function(){
					this.title= "new title";
				},
				destroy:function(){
					this.$destroy();
				}
			},
			beforeCreate(){
				console.log("beforeCreate")
			},
			created(){
				console.log("created")
			},
			beforeMount(){
				console.log("beforeMount")
			},
			mounted(){
				console.log("mounted")
			},
			beforeUpdate(){
				console.log("beforeUpdate")
			},
			updated(){
				console.log("updated")
			},
			beforeDestroy(){
				console.log("beforeDestory")
			},
			destroyed(){
				console.log("destory")
			}
		})
	</script>
</html>

组件的生命周期钩子

十、使用Vue-Cli搭建Vue项目

10.1 什么是vue-cli

10.2 node.js的介绍及安装

node.js的介绍

node.js的安装

测试node.js是否安装成功：在DOS窗口中输入“node -v” 查看版本，如果看到版本，就表示安装成功。

10.3 使用node.js安装vue-cli

使用如下命令安装vue-cli

node自带了一个包管理工具npm => node package manager

类型于 maven

npm install vue-cli -g

当出现以下界面，表示正在安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install vue-cli -g
## 之后使用下面的两个命令
npm install
npm run dev

10.4 使用vue-cli下载项目骨架搭建我们的项目

vue list

10.5 创建项目目录并打开

mkdir e:/my-vue-project

cd e:/my-vue-project

10.6 使用Webpack骨架快速创建项目

vue init webpack demo1

过程中会出现如下界面，需要手动操作。

出现如下界面，表示安装成功。

npm run dev

访问http://localhost:8080，页面效果如下：

此时，项目目录及各目录介绍如下：

10.7 webpack项目的几个常用命令

十一、Vue组件间的参数传递

11.1 idea中安装Vue插件

11.2 在项目中创建子组件

<template>
<div>
  <h1>Header {{MyTitle}}</h1>
  <button @click="MyFun('哈哈哈')">点我</button>
</div>
</template>

<script>
export default {
  name: "Header",
  props:["MyTitle","MyFun"]
}
</script>

<style scoped>

</style>

11.3 在App.vue中使用组件并传递参数

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Header :my-title="msg" :my-fun="fun1"/>
  </div>
</template>

<script>
import Header from "./components/Header";

export default {
  name: 'App',
  components: {
    Header
  },
  data() {
    return {
      msg: "父元素传递的数据"
    }
  },
  methods: {
    fun1: function (mm) {
      this.msg = mm;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

11.5 父传子

::: tip
通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。
props是表示一个组件的参数部分，那么props的写法有两种：
1）props:[参数列表]
比如： props:['MyProp1','MyProp2',...]
2）props:{参数名1:{type:String,required:true,default:‘XX’},参数名2:{…}}
:::

11.6 子传父

十二、Vue-router 路由

12.1 安装路由模块

npm install vue-router -s

12.2 引入路由模块并使用

::: tip
在main.js中引入路由模块并使用
:::

import Vue from 'vue'
import App from './App'
import router from './router'  //引入路由模块

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //使用路由模块
  components: { App },
  template: '<App/>'
})

12.3 路由初体验

12.3.1 创建App.vue

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

12.3.2 创建Home.vue

::: tip

首页

:::

12.3.3 创建Product.vue

::: tip

商品列表商品的id:{{id}}

:::

12.3.4 修改静态路由表

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home";
import Product from "../components/Product";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path:'/Home',
      component: Home
    },
    {
      path:'/Product/:id', //设参  来接受 route-link 中传过来的参数
      component:Product
    }
  ],
  mode:"hostory" //可选参数
})

12.4 参数的传递

export default new Router({
  routes: [
	...
    {
      path:'/Product/:id', //设参
      component:Product
    }
  ]
})

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      ...
      <li role="presentation"><router-link to="/Product/1">商品列表</router-link></li>
      ...
    </ul>
    <router-view/>
  </div>
</template>

<template>
    <div>商品列表 商品的id:{{id}}</div>
</template>

<script>
export default {
    name : "Product",
    data(){
      return{
        id:this.$route.params.id //接参     取出 路由表中的参数
      }
    }
}
</script>

<style scoped>

</style>

12.5 程序式路由的实现

<template>
  <div id="app">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><router-link to="/Home">首页</router-link></li>
      <li role="presentation"><router-link to="/Product">商品列表</router-link></li>
      <button type="button" @click="btnfn">点我</button>
    </ul>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    btnfn(){
      //代替router-link实现路由跳转
      this.$router.push("/Product/1");
    }
  }

}
</script>

十三、使用Axios发送请求

13.1 什么是 Axios

Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF（跨站请求伪造）

GitHub：https://github.com/axios/axios

13.2 为什么要使用 Axios

由于 Vue.js 是一个视图层框架并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架

13.3 Axios的使用

13.3.1 安装vue axios

npm install --save axios vue-axios

13.3.2 在main.js中引入

在项目中使用axios模块

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

13.3.3 发送ajax请求

<template>
  <div id="app">
    <div style="width:50%" class="container">
      <div>
        <h3>Regist</h3>
        <h5>Email</h5>
        <input type="text" class="form-control" v-model="mail" /><br />
        {{mail}}
        <h5>Password</h5>
        <input type="password" class="form-control" v-model="password" /><br />
        {{password}}
        <h5>Gender</h5>
        <input type="radio" name="gender" v-model="gender" value="female" />男
        <input type="radio" name="gender" v-model="gender" value="male" />女<br />
        <h5>Hobby</h5>
        <input type="checkbox" name="hobby" v-model="hobby" value="music">音乐
        <input type="checkbox" name="hobby" v-model="hobby" value="movie">电影
        <input type="checkbox" name="hobby" v-model="hobby" value="sport">运动
        <br/>
        <button type="button" class="btn btn-success" @click="registfn">注册</button>
      </div>
    </div>
  </div>
</template>

<script>
  import MHeader from './components/Header'
export default {
  name: 'app',
  data(){
    return {
      mail:'',
      password:'',
      gender:'',
      hobby:''
    }

  },
  methods:{
    registfn:function(){

      this.axios({
        method:'get',
        url:'http://localhost:8090/regist?mail='+this.mail+'&password='+this.password,

      }).then(function (response) {
        console.log(response.data)
      });
    }
  }
}
</script>

13.3.4 服务端解决跨域问题

<mvc:cors>  
    <mvc:mapping path="/"
        allowed-origins="*"
        allowed-methods="POST, GET, OPTIONS, DELETE, PUT,PATCH"
        allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
        allow-credentials="true" />
</mvc:cors>

在spring-mvc.xml中加入上述这一段。其中，allowed-origins指的是允许的访问源的域名，"*"表示任何人都可以访问，也可以指明具体的域名

13.3.5 解决axios无法传递data中的参数问题

原因：默认情况下发送axios时请求头中的内容类型为：（后端没有使用@RequestBody）

Content-Type:application/json;charset=UTF-8

而实际服务端需要的是：

Content-Type:application/x-www-form-urlencoded

因此，使用axios的qs内置库中的方法进行内容类型的转换。

import Qs from 'qs'

this.axios({
	method:'post',
	url:'http://localhost:8081/regist',
	transformRequest: [function (data) {
		return Qs.stringify(data)
	}],
	data:{
		email:this.email
	}
})
.then(function (response) {
	alert(response.data.message)
});

十四、Vue实战项目：Webpack登录验证后路由至列表页

对项目进行中的内容进行调整，结构如下：

14.1 router路由模块： index.js（路由配置表）

import Vue from 'vue'
import Router from 'vue-router'

import Login from '../views/Login'
import Home from '../views/Home'



// 安装路由
Vue.use(Router);

// 配置路由
export default new Router({
  routes: [
    {
      // 路由路径
      path: '/Login',
      // 路由名称
      name: 'Login',
      // 跳转到组件
      component: Login
    },
    {
      path:'/Home',
      name:'Home',
      component:Home
    }
  ]
});

14.2 使用Element-UI组件库

14.2.1 安装

npm i element-ui -S

14.2.2 使用

import Vue from 'vue';
import ElementUI from 'element-ui'; //加入
import 'element-ui/lib/theme-chalk/index.css';//加入
import App from './App.vue';

Vue.use(ElementUI);//加入

new Vue({
  el: '#app',
  render: h => h(App)
});

14.2.3 在Element-UI组件库中查找组件

在官方组件库中，根据需求找到组件，然后在项目中使用。

14.3 编写登录组件：Login.vue

<template>
    <div class="login-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <h3>欢迎登录</h3>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
export default {
    name: "Login",
    data(){
      return{
        form:{
          name:'',
          password:''
        },
        rules:{
          name:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
          ]
        }
      }

    },
    methods:{
      onSubmit(formName){
        this.$refs[formName].validate((valid) => {
          var vm = this;
          if (valid) {
            // 发送axios请求
            this.axios({
              method:'post',
              url:'http://localhost:8090/login',
              data:{
                name:vm.form.name,
                password:vm.form.password
              }
            }).then(function(resp){
              // console.log(resp.data)
              if(resp.data.errno==0){

                //登录成功，要向vuex中存放user对象
                var user  = resp.data.data;
                vm.$store.dispatch('asyncUpdateUser', user);
                vm.$message({
                  message: '登录成功',
                  type: 'success'
                });
                setTimeout(function(){
                  vm.$router.push("/Home")
                },2000)
              }else{
                vm.$message.error('用户名或密码错误');
              }
            })

          } else {
            this.$message.error('用户名或密码格式错误');
            return false;
          }
        });
      }
    }
}
</script>

<style scoped>
  .login-box{
    width: 500px;
    height: 300px;
    border: 1px solid #DCDFE6;
    margin: 150px auto;
    padding: 20px 50px 20px 30px;
    border-radius: 20px;
    box-shadow: 0px 0px 20px #DCDFE6;
  }
</style>

登录页面的展示效果：（Element UI）

14.4 编写入口js：main.js

import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
// 导入上面创建的路由配置表
import router from './router'

// 导入ElementUI模块
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueRouter);

// 使用ElementUI模块
Vue.use(ElementUI);
// 使用Axios （vue中实现ajax功能的组件）
Vue.use(VueAxios, axios)



Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 配置路由
  router,
  render: h => h(App)
})

十五、 Vuex的应用

15.1 什么是Vuex

15.2 安装

npm install vuex --save

import Vuex from 'vuex'
Vue.use(Vuex);

15.3 配置 vuex

15.3.1 创建 Vuex 配置文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

// 全局 state 对象，用于保存所有组件的公共数据
const state = {
  // 定义一个 user 对象
  // 在组件中是通过 this.$store.state.user 来获取
  user: {
    name: ''
  }
};

// 实时监听 state 值的最新状态，注意这里的 getters 可以理解为计算属性
const getters = {
  // 在组件中是通过 this.$store.getters.getUser 来获取
  getUser(state) {
    return state.user;
  }
};

// 定义改变 state 初始值的方法，这里是唯一可以改变 state 的地方，缺点是只能同步执行
const mutations = {
  // 在组件中是通过 this.$store.commit('updateUser', user); 方法来调用 mutations
  updateUser(state, user) {
    state.user = user;
  }
};

// 定义触发 mutations 里函数的方法，可以异步执行 mutations 里的函数
const actions = {
  // 在组件中是通过 this.$store.dispatch('asyncUpdateUser', user); 来调用 actions
  asyncUpdateUser(context, user) {
    context.commit('updateUser', user);
  }
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'

Vue.use(Vuex);

new Vue({
  el: '#app',
  store
});

15.3.2 解决浏览器刷新后 Vuex 数据消失问题

问题描述

解决方案

修改代码

  export default {
    name: 'App',
    mounted() {
      window.addEventListener('unload', this.saveState);
    },
    methods: {
      saveState() {
        sessionStorage.setItem('state', JSON.stringify(this.$store.state));
      }
    }
  }

const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
  user: {
    name: ''
  }
};

[Leetcode] 0026. 删除有序数组中的重复项