1、概述

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、基础使用

1、安装node.js

nodejs.cn/download

2、安装vue-cli 快速生成项目模板

cmd > npm install vue-cli -g

3、创建基于webpack模板的vue应用

vue init webpack vue-spring-cloud

4、基本语法demo

test.vue

<template><div><span>测试取值：{{message}}</span><div>测试v-if：<span v-if="flag1">true</span><span v-if="flag2==false">false</span></div><div>测试v-for：<span v-for="arr in array" >{{arr}}、</span></div><div>测试v-on：<button v-on:click="testEvent()">点我点我</button></div><HelloWorld></HelloWorld><div>双向绑定测试：<input v-model="name" /><button v-on:click="alertName()">点击弹出值</button></div><div>组件消息传递测试<Children  v-bind:message='{name:"消息传递"}' v-on:send="setChidrenData"></Children><span>子组件传来的消息：{{chidrenData}}</span></div></div>
</template><script>import HelloWorld from "../components/HelloWorld";import Children from "../components/Children";// 先注册组件export default {name: "test",components: {Children, HelloWorld},data() {return {name:"双向绑定测试",message: '测试取值',//测试v-ifflag1 : true,flag2 : false,//测试v-forarray: ['1','2','3'],chidrenData:''}},methods:{//测试事件绑定testEvent(){alert('点我点我');},//双向绑定测试alertName(){alert(this.name);},//子组件传递需要通过父组件事件setChidrenData(msg){this.chidrenData = msg}},//钩子函数测试beforeCreate:function () {alert('钩子函数测试');},}
</script><style lang="scss" scoped>.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;}.login-input{width: 220px;}
</style>复制代码

Children.vue

<template><div><div>父组件传来的消息：{{message}}</div><div>传递消息给父组件:<input v-model="data"><button v-on:click="sendMessage()">发送</button></div></div>
</template><script>
export default {name: 'Children',props:['message'],data(){return{data:''}},methods:{sendMessage(){this.$emit('send',this.data);}}
}
</script>复制代码

HelloWorld.vue

<template><div><div>自定义组件测试</div><div>父组件传来的消息：{{data}}</div></div></template><script>
export default {name: 'HelloWorld',props:['data']
}
</script>复制代码

3、登录页实现以及测试demo

1、安装依赖

切换项目下执行命令

1、安装elementUi vue布局框架

element-ui官网

cmd > npm i element-ui -S

2、安装vue-router 路由

cmd > npm install vue-router --save-dev

3、 安装 SASS 加载器css

cmd > npm install sass-loader node-sass --save-dev

4、初始化工程

cmd > npm install

若出现 Unexpected end of JSON input while parsing near

cmd > npm cache clean --force 后重新 npm install

5、命令说明

• --save ：安装到项目文件下并在dependencies引入模块

• --save-dev ：安装到项目文件下并在devDependencies引入模块

• -g ：全局安装

6、运行项目

cmd > npm run dev

2、基于element-ui 的vue简单登录注册页

1、创建路由

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../views/Login'
import Register from '../views/Register'
import Main from '../views/Main'
import Test from '../views/test'Vue.use(Router);export default new Router({routes: [{// 登录页path: '/login',name: 'Login',// 模块名component: Login},//注册页{path: '/register',name: 'Register',component: Register}]
});复制代码

2、修改main.js

import Vue from 'vue'
//导入 vue-router
import VueRouter from 'vue-router'
import router from './router'// 导入 ElementUI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import App from './App'// 安装路由
Vue.use(VueRouter);// 安装 ElementUI
Vue.use(ElementUI);new Vue({el: '#app',// 启用路由router,// 启用 ElementUIrender: h => h(App)
});
复制代码

3、创建登录页

<template><div><!--:model 绑定表单对象 :rules 绑定表单验证--><el-form ref="form" :model="form" :rules="rules"  label-width="80px" class="login-box"><h3 class="login-title">vue-spring-cloud</h3><!--prop 绑定验证字段--><el-form-item label="账号："  prop="username"><el-input type="text" placeholder="请输入账号" v-model="form.username" class="login-input"></el-input></el-form-item><el-form-item label="密码："  prop="password"><el-input type="password" placeholder="请输入密码" v-model="form.password" class="login-input"></el-input></el-form-item><el-form-item><el-button type="primary"  v-on:click="onSubmit('form')" >登录</el-button><el-button type="primary"  v-on:click="register()" >注册</el-button></el-form-item></el-form></div>
</template><script>export default {name: "login",data() {return {form: {username: '',password: ''},rules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },]}}},methods: {//自定义事件onSubmit(formName){//表单验证（valid=验证返回值）this.$refs[formName].validate((valid) => {if (valid) {//路由到主页this.$router.push('/main');} else {console.log('error submit!!');return false;}});},//自定义事件register(){//路由到注册页this.$router.push('/register');}}}
</script><style lang="scss" scoped>.login-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.login-title {text-align: center;margin: 0 auto 40px auto;color: #303133;}.login-input{width: 220px;}
</style>复制代码

4、创建注册页

<template><div><!--:model 绑定表单对象 :rules 绑定表单验证--><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form-box"><h3 class="form-title">vue-spring-cloud</h3><!--prop 绑定验证字段--><el-form-item label="用户名称" prop="userName"><!--: v-model 数据双向绑定--><el-input  placeholder="请输入用户名"  v-model="ruleForm.userName"></el-input></el-form-item><el-form-item label="用户密码" prop="password"><el-input type="password"  placeholder="请输入密码" v-model="ruleForm.password"></el-input></el-form-item><el-form-item label="确认密码" prop="isPassword"><el-input type="password" placeholder="请确认密码" v-model="ruleForm.isPassword"></el-input></el-form-item><el-form-item><!---事件绑定---><el-button type="primary" @click="submitForm('ruleForm')">注册</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</template><script>export default {name: "Register",data() {//自定义验证名（rule=触发元素 value=文本值 callback=回调验证）var checkPass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.password !== '') {this.$refs.ruleForm.validateField('isPassword');}callback();}};var checkPass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.password) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {userName: '',password: '',isPassword:''},//表单验证rules: {userName: [{ required: true, message: '请输入用户名', trigger: 'blur' },],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ validator: checkPass, trigger: 'blur' }],isPassword: [{ required: true, message: '请确认密码', trigger: 'blur' },{ validator: checkPass2, trigger: 'blur' }]}};},methods: {//自定义事件submitForm(formName) {//表单验证（valid=验证返回值）this.$refs[formName].validate((valid) => {if (valid) {//vue-router 调整登录页this.$router.push('/login')} else {console.log('error submit!!');return false;}});},//重置表单内容resetForm(formName) {this.$refs[formName].resetFields();}},}
</script><style lang="scss" scoped>.form-box {border: 1px solid #DCDFE6;width: 350px;margin: 180px auto;padding: 35px 35px 15px 35px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;box-shadow: 0 0 25px #909399;}.form-title{text-align: center;}</style><style scoped></style>复制代码

5、修改App.vue

<template><div id="app"><!--路由组件--><router-view/></div>
</template><script>export default {name: 'App'}
</script>复制代码

6、页面效果

3、嵌套路由与参数传递

1、route index.js

 //主页{path: '/main/:username',name: 'Main',component: Main,//支持props方法传参props:true,//嵌套路由children: [{//:/id传递参数名path: '/param/param1/:id',name: 'param1',component: param1,}, {path: '/param/param2/:id',name: 'param2',component: param2,}, {path: '/param/param3/:id',name: 'param3',component: param3,props:true}]},
复制代码

2、Main.vue

<template>
<div><el-container><el-aside width="200px"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-caret-right"></i>传参测试</template><el-menu-item-group><el-menu-item index="1-1"><!--props方式获取登陆页传值-->当前登录人：{{username}}</el-menu-item><el-menu-item index="1-1"><!--路由跳转--><router-link to="/param/param1/传参测试1">传参测试1</router-link></el-menu-item><el-menu-item index="1-2"><!--路由跳转 :to 对象模式传递 name:路由名称 params:路由参数--><router-link :to="{name:'param2',params:{id:'传参测试2'}}">传参测试2</router-link></el-menu-item><el-menu-item index="1-3"><router-link :to="{name:'param3',params:{id:'传参测试3'}}">传参测试3</router-link></el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><el-container><el-main><router-view /></el-main></el-container></el-container>
</div>
</template><script>
export default {//props 方式传值props: ['username'],name: "Main"
}
</script><style scoped lang="scss">
.el-header {background-color: #B3C0D1;color: #333;line-height: 60px;
}.el-aside {color: #333;
}
</style>复制代码

3、参数取值页面

param1

<template>
<div>传参测试1：{{$route.params.id}}</div>
</template><script>
export default {name: "param1"
}
</script><style scoped></style>
复制代码

param2

<template><div>传参测试2：{{$route.params.id}}</div>
</template><script>export default {name: "param2"}
</script><style scoped></style>
复制代码

param3 props取值

<template><div>传参测试3：{{id}}</div>
</template><script>export default {props: ['id'],name: "param3"}
</script><style scoped></style>
复制代码

4、效果

4、重定向

1、路由配置

 //重定向回到登录{path: '/toLogin',redirect: '/login',name:'redirect',},
复制代码

2、router-link

<router-link :to="{name:'redirect'}">退出登录</router-link>
复制代码

5、路由钩子

    beforeRouteEnter: (to, from, next) => {console.log("参数测试页面进入前");next();},beforeRouteLeave: (to, from, next) => {console.log("参数测试页面跳转前");next();}
复制代码

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
• next() 跳入下一个页面
• next('/path') 改变路由的跳转方向，使其跳到另一个路由
• next(false) 返回原来的页面
• next((vm)=>{}) 仅在 beforeRouteEnter 中可用，vm 是组件实例

6、异步请求axios

1、安装axios

cmd > npm install axios -S

2、导入axios

// 导入axios
import axios from 'axios'
Vue.prototype.axios = axios;
复制代码

3、创建param4

<template><div>路由测试</div>
</template>
<script>export default {name: "param4",//路由进入前beforeRouteEnter: (to, from, next) => {console.log("进入前");next(vm => {// vm.getDate();// vm.postDate();vm.getDate();});},//路由跳转后beforeRouteLeave: (to, from, next) => {console.log("跳转前");next();},methods:{//后台直接接收 传递类型 query string parametersgetDate:function(){this.axios.get("http://localhost:8089/findUser1",{params:{id:'123'}}).then(function (repos) {console.log(repos.data);}).catch(function(error){})},//后台@RequestBody 接收 传递类型request payloadpostDate:function(){this.axios.post("http://localhost:8089/findUser",{id:'123'}).then(function (repos) {}).catch(function(error){})},//后台直接接收传递类型 form datepostDate1:function(){let param = new URLSearchParams();param.append("id", "zhonghangAlex");this.axios.post("http://localhost:8089/findUser1",param).then(function (repos) {}).catch(function(error){})}}}
</script><style scoped></style>复制代码

4、配置route

import param4 from '../views/param/param4'
复制代码

 {path: '/param/param4',name: 'param4',component: param4}
复制代码

 <router-link :to="{name:'param4'}">路由测试</router-link>
复制代码

5、测试

进入点击路由测试后---> beforeRouteEnter --->打印进入前--->路由请求打印数据--->跳转到路由测试页

由于篇幅过长，vuex 状态管理放在整合spring-cloud 单点登录的demo中