一、Vue学习笔记
1、Vue定义
概念:一套用于构建用户界面的渐进式框架,发布于2014年2月。与其他大型框架不同,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
优点:动态绑定数据,能够通过操作DOM完成动态刷新数据
2.MVVM模式的实现者
-
Model:模型层,在这里表示JavaScript对象
-
View:视图层,在这里表示DOM(HTML操作的元素)
-
ViewModel:连接视图和数据的中间件,Vue.js就是MVVM中的ViewModel层的实践者
在MVVM架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者
-
ViewModel能够观察到数据的变化,并对视图对应的内容进行更新
-
ViewModel能够监听到视图的变化,并能够通知数据发生改变
3、第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id = "app">
{{message}}
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WkNMcZyX-1611487325423)(D:\学习笔记\Vue\1.png)]
二、Vue指令
1、v-blind为组件绑定参数,简写为 :
以v-bind为例,指令带有前缀v-,以表示它们是Vue提供的特殊属性。指令含义:“将这个元素节点的title特性和Vue实例的message属性保持一致”。现在数据和DOM已经被建立关联,所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新!
<div id = "app">
<span :title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!</span>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
2、v-if
<body>
<!--view层,模板-->
<div id = "app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1>用户名:{{username}}</h1>
<h3 v-if="isVip">用户类型:VIP</h3>
<!-- 注意:v-if和v-else中间不能有其他的元素 -->
<h3 v-else>用户类型:普通用户</h3>
<h1 v-else>D</h1>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
type:'A'
}
});
</script>
</body>
3、v-for
<div id = "app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
items:[
{message:"Wang"},
{message:"Dong"}
]
}
});
</script>
4、v-on(绑定事件,简写为@)
<div id = "app">
<button @click="sayHi">Click me!</button>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"Hello,Vue"
},
methods:{ //方法必须定义在Vue的Methods对象中,v-on:事件
sayHi:function () {
alert(this.message);
}
}
});
</script>
5、v-model 双向数据绑定
双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。
**注意:**V-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源,你应该通过JavaScript在组件的data选项中声明初始值!
单行文本:
<!--view层,模板-->
<div id = "app">
单行文本:<input type="text" v-model="message" value="hello">{{message}}
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"123"
}
});
</script>
文本框:
<div id = "app">
输入的文本:<textarea v-model="message"></textarea>
{{message}}
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"123"
}
});
</script>
单选框:
<!--view层,模板-->
<div id = "app">
性别:
<input type="radio" value="男" v-model="message">男
<input type="radio" value="女"v-model="message">女
<p>
选中了谁:{{message}}
</p>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:''
}
});
</script>
下拉框:
<div id = "app">
<select v-model="message">
<option value="" disabled>请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>
选中的选项:{{message}}
</p>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:''
}
});
</script>
6、Axios异步通信
什么是Axios?
Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架,它的主要作用就是实现AJAX异步通信,其特点功能如下:
- 从浏览器创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API【JS中链式编程】
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
为什么要使用Axios
由于Vue.js是一个视图层框架,Vue.js不包含AJAX的通信功能,为了解决通信问题,作者单独开发vue-resource的插件,不过在2.0版本后停止维护并推荐使用Axios框架。少用JQuery,因为它操作DOM太频繁
Vue生命周期
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NLPOzfvk-1611487325426)(D:\学习笔记\Vue\lifecycle.png)]
7、计算属性
理解:能够将计算结果缓存起来的属性
代码如下:
<!--view层,模板-->
<div id = "app">
<!--注意:一个是方法,一个是属性-->
<p>{{currentTime()}}</p>
<p>{{currentTime2}}</p>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
/*组件:传递给组件中的值:props */
var vm = new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue"
},
methods:{
currentTime:function () {
return Date.now(); //返回时间戳
}
},
computed:{//计算属性:methods,computed方法名不能重名,重名之后,只会调用methods的方法
currentTime2:function () {
this.message;
return Date.now(); //返回时间戳
}
}
});
</script>
注意:methods和computed里的东西不能重名
说明:
- methods:定义方法,调用方法使用currentTime1(),需要带括号
- computed:定义计算属性,调用属性使用currentTime2,不需要带括号;this.message是为了能够让currentTime2观察到数据变化而变化
- 如何在方法中的值发生了变化,则缓存就会刷新!可以在控制台使用vm.message=" xxx ",改变数据值进而触发this.message,使其改变。
使用computed的好处:为了将不经常变化的计算结果进行缓存,以节约我们的系统开销;
7、1内容分发
在 Vue.js
中咱们使用 `` 元素做为承载分发内容的出口,做者称其为 插槽,能够应用在组合组件的场景中;
测试
好比准备制做一个待办事项组件(todo),该组件由待办标题(todo-title)和待办内容(todo-items)组成,但这三个组件又是相互独立的,该如何操做呢?
第一步: 定义一个待办事项的组件
<div id="vue">
<todo></todo>
</div>
<script type="text/javascript">
Vue.component('todo', {
template: '<div>\
<div>待办事项</div>\
<ul>\
<li>学习狂神说Java</li>\
</ul>\
</div>'
});
</script>
第二步: 咱们须要让,待办事项的标题和值实现动态绑定,怎么作呢? 咱们能够留出一个插槽!
1-将上面的代码留出一个插槽,即 slot
Vue.component('todo', {
template: '<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
2-定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件
Vue.component('todo-title', {
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,能够循环出来!
Vue.component('todo-items', {
props: ['item', 'index'],
template: '<li>{{index + 1}}. {{item}}</li>'
});
3-实例化 Vue 并初始化数据
var vm = new Vue({
el: '#vue',
data: {
todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
}
});
4-将这些值,经过插槽插入
<div id="vue">
<todo>
<todo-title slot="todo-title" title="秦老师系列课程"></todo-title>
<todo-items slot="todo-items" v-for="(item, index) in todoItems" v-bind:item="item" v-bind:index="index" :key="index"></todo-items>
</todo>
</div>
说明:咱们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中
8、自定义事件
数据在Vue的事例中,但删除操作要在组件中完成,那么组件如何才能删除Vue实例中的数据?此时需要使用参数传递与事件分发,Vue为我们提供了自定义事件的功能很好地帮助我们解决了这个问题:使用this.$emit(‘自定义事件名’,参数)。代码如下:
<!--view层,模板-->
<div id = "app">
<todo>
<todo-title slot="todo-title" v-bind:title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:index="index" v-bind:item="item" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--导入Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
Vue.component("todo",{
template:
'<div>\
<slot name="todo-title"></slot>\
<ul>\
<slot name="todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}-----{{item}}<button @click="remove">删除</button></li>',
methods:{
remove:function (index) {
//调用new Vue方法
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el:"#app",
//Model:数据
data:{
title:"课程列表",
todoItems:['Java','html','Linux']
},
methods: {
removeItems:function (index) {
console.log("删除了"+this.todoItems[index]+"ok");
this.todoItems.splice(index,1);//一次删除一个元素
// splice() 方法向/从数组中添加/删除项目,而后返回被删除的项目,其中 index 为添加/删除项目的位置,1 表示删除的数量
}
}
});
</script>
三、第一个vue-cli程序
运行条件:node.js
第一步: 安装地址:http://nodejs.cn/download/ ,下载后默认下一步即可
确认nodejs是否安装成功:
- cmd下输入node -v,查看是否能够打印出版本号
- cmd下输入npm -v,查看是否能够打印出版本号
注:npm为软件包管理工具,与Linux下apt命令安装软件类似
第二步:安装Node.js淘宝镜像加速器(cnpm)
提高下载速度
npm install cnpm -g
若安装不上可不安装,下载vue-cli时,将npm地址更改国内地址如下图
大约120s,虽然安装cnpm,但是尽量少用!
第三步:安装vue-cli
cnpm install vue-cli -g
或
解决方法:将npm的仓库地址改为淘宝镜像:npm config set registry https://registry.npm.taobao.org --global
npm config set registry https://registry.npmjs.org //切换回原镜像
# 测试是否安装成功
# 查看可以基于哪些模板创建vue应用程序,通常选择webpack
vue list
第四步:创建vue程序
1、创建一个Vue项目,随便建立一个空的文件夹在电脑上,D:/Git/vue
2、创建一个基于webpack模板的vue应用程序
# 这里的myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue
# 安装时全部选择no即可
说明:
- Project name:项目名称,默认 回车 便可
- Project description:项目描述,默认 回车 便可
- Author:项目做者,默认 回车 便可
- Install vue-router:是否安装 vue-router,选择 n 不安装(后期须要再手动添加)
- Use ESLint to lint your code:是否使用 ESLint 作代码检查,选择 n 不安装(后期须要再手动添加)
- Set up unit tests:单元测试相关,选择 n 不安装(后期须要再手动添加)
- Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期须要再手动添加)
- Should we run npm install for you after the project has been created:建立完成后直接初始化,选择 n,咱们手动执行;运行结果!
Error: Can’t find Python executable “python”, you can set the PYTHON env variable.解决办法
3、初始化并运行
# 进入创建目录
cd /d D:/Git/vue/myvue
npm install
# 如果install过程中报错,按照命令行提示修复即可
npm run dev
npm audit fix //修复方法
解决办法
1、安装windows-build-tools
npm install --global --production windows-build-tools
1
2、安装node-gyp
npm install --global node-gyp
Vue-cli目录结构
-
build 和 config:WebPack 配置文件
-
node_modules:用于存放 npm install 安装的依赖文件
-
src: 项目源码目录
-
static:静态资源文件
-
.babelrc:Babel 配置文件,主要做用是将 ES6 转换为 ES5
-
.editorconfig:编辑器配置
-
eslintignore:须要忽略的语法检查配置文件
-
.gitignore:git 忽略的配置文件
-
.postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
-
index.html:首页,仅做为模板页,实际开发时不使用
-
package.json:项目的配置文件
- name:项目名称
- version:项目版本
- description:项目描述
- author:项目做者
- scripts:封装经常使用命令
- dependencies:生产环境依赖
- devDependencies:开发环境依赖
src 目录
src
目录是项目的源码目录,全部代码都会写在这里main.js
项目的入口文件,咱们知道全部的程序都会有一个入口
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' });
-
import Vue from 'vue'
:ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供的模块加载器) -
import App from './App'
:意思同上,可是指定了查找路径,./ 为当前目录 -
Vue.config.productionTip = false
:关闭浏览器控制台关于环境的相关提示 -
new Vue({...})
:实例化 Vue
-
el: '#app'
:查找 index.html 中 id 为 app 的元素 -
template: '<App/>'
:模板,会将 index.html 中
替换为
-
components: { App }
:引入组件,使用的是 import App from ‘./App’ 定义的 App 组件;
-
App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <HelloWorld/> </div> </template> <script> import HelloWorld from './components/HelloWorld' export default { name: 'App', components: { HelloWorld } } </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>
- template:HTML 代码模板,会替换 中的内容
- import HelloWorld from ‘./components/HelloWorld’:引入 HelloWorld 组件,用于替换 template 中的
- export default{…}:导出 NodeJS 对象,做用是能够经过 import 关键字导入
- name: ‘App’:定义组件的名称
- components: { HelloWorld }:定义子组件
四、Webpack学习
1、什么是Webpack
webpack是一个现代的JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归的构建一个依赖关系图(dependency graph),其中包含英语红程序需要的每个模块,然后将这些模块打包成一个或多个bundle。
模块化的演进
最原始JavaScript文件加载方式:
如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在windows对象中,不同模块的调用都是一个作用域
弊端:
- 全局作用域下容易造成变量冲突
- 文件只能按照
核心思想:CommonsJS
服务器端的NodeJS遵循CommonsJS规范,该规范核心思想是允许模块通过require方法来同步加载所需依赖的其他模块,然后通过exports或module.exports来导出需要暴露的接口
require("module");
require("../module.js");
export.doStuff = function(){};
module.exports=someVulue;
2、Webpack作用
Webpack是一款模块加载器兼打包工具,他能将各种资源如JS、JSX、ES6等作为模块来处理和使用,通俗语言:将JS代码打包为所有浏览器都兼容项目。
1、安装
npm install webpack -g
npm install webpack-cli -g
# 测试安装是否成功
webpack -v
2、配置
创建webpack.config.js配置文件
- entry:入口文件,指定WebPack用哪个文件作为项目的入口
- output:输入,指定WebPack把处理完成的文件放置到指定路径
- module:模块,用于处理各种类型的文件
- plugins:插件,如:热更新、代码重用等
- resolve:设置路径指向
- watch:监听,用于设置文件改动后直接打包
3、使用webpack
1、创建文件夹
2、创建一个名为modules的目录,用于放置JS模块等资源文件
3、在modules下创建模块文件,如hello.js,用于编写JS模块相关代码
//暴露一个方法
exports.sayHi =function () {
document.write("<h1>ES6规范</h1>")
};
4、在modules下创建一个名为main.js的入口文件,用于打包时设置entry属性
//require导入一个模块,就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();
5、在项目目录下创建webpack.config.js配置文件,使用webpack命令打包
module.exports={
entry:'./modules/main.js',
output:{
filename:"./js/bundle.js"
}
};
6、在目录下运行命令行命令:输入webpack打包
D:\Git\vue\webpack-study>webpack
Hash: 9cbeffebb389d3b837ba
Version: webpack 4.44.1
Time: 354ms
7、项目目录下创建index.html
引入webpack打包文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>
说明:
# 参数 ---watch 用于监听变化
webpack --watch
五、Vue-router路由
1、说明
Vue Router是Vue.js官方的路由管理器。他和Vue.js的核心深度集成,让构建单页面应用变的易如反掌,包含功能主要有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于Vue.js过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的CSS class的链接
- HTML5 历史模式或hash模式,在IE9中自动降级
- 自动以滚动条行为
2、安装
首先查看node_modules中是否存在vue-router
vue-router是一个插件包,所以我们需要使用npm/cnpm来进行安装。打开命令行工具,进入项目目录,输入以下命令:
npm install vue-router --save-dev
若出现错误按提示修复即可
如果需要在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
代码样例:
文件结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-crLno8Pb-1611487325427)(D:\学习笔记\Vue\2.png)]
2个组件: components
<template>
<h1>内容页</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped>
</style>
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
Router/index.js 路由配置
import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
// 导入上面定义的组件
import Content from '../components/Content'
import main from '../components/main'
// 安装路由
Vue.use(Router);
// 配置路由
export default new Router({
routes: [
{
// 路由路径
path: '/content',
// 路由名称
name: 'Content',
// 跳转到组件
component: Content
}, {
// 路由路径
path: '/main',
// 路由名称
name: 'main',
// 跳转到组件
component: main
}
]
});
App.vue
<template>
<div id="app">
<h1>Vue-router</h1>
<router-link to="/main">首页</router-link>
<router-link to="content">内容页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</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>
main.js
import Vue from 'vue'
import App from './App'
// 导入上面建立的路由配置目录
import router from './router'
//来关闭生产模式下给出的提示
Vue.config.productionTip = false;
new Vue({
el: '#app',
// 配置路由
router,
components: { App },
template: '<App/>'
});
六、使用ElementUI
1、创建工程
1、创建一个名为hello-vue的工程
vue init webpack hello-vue
2、安装依赖,我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件
# 进入工程目录
cd hello-vue
#安装 vue-router
npm install vue-router --save-dev
# 安装element-ui
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
注:Npm命令解释:
- npm install moduleName:安装到项目目录下
- npm install -g moduleName:-g 的意思是将模块安装到全局,具体安装到磁盘哪个位置要看nom config prefix的位置
- npm install -save moduleName: --save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖,-S为该命令的缩写
- npm install -save -dev moduleName: --save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖,-D为该命令的缩写
3、创建登录页面
初始化项目文件,删除项目中自带一些无用文件!
在源码目录下创建如下结构:
- assets:用于存放资源文件
- components:用于存放Vue功能组件
- views:用于存放Vue视图组件
- router:用于存放vue-router配置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xwf0cOfb-1611487325429)(D:\学习笔记\Vue\3.png)]
建立首页视图,在 views 目录下建立一个名为 Main.vue 的视图组件;
<template>
<div>
首页
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
建立登陆页视图在 views 目录下建立一个名为 Login.vue 的视图组件,其中 el-* 的元素为 ElementUI 组件;
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登陆</h3>
<el-form-item label="帐号" prop="username">
<el-input type="text" placeholder="请输入帐号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登陆</el-button>
</el-form-item>
</el-form>
<el-dialog
title="舒适提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>请输入帐号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
// 表单验证,须要在 el-form-item 元素中增长 prop 属性
rules: {
username: [
{required: true, message: '帐号不可为空', trigger: 'blur'}
],
password: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
},
// 对话框显示和隐藏
dialogVisible: false
}
},
methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面,该方式称之为编程式导航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</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;
}
</style>
建立路由,在 router 目录下建立一个名为 index.js 的 vue-router 路由配置文件
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login"
import Main from '../views/Main'
Vue.use(Router);
export default new Router({
routes: [
{
// 登陆页
path: '/login',
name: 'Login',
component: Login
},
{
// 首页
path: '/main',
name: 'Main',
component: Main
}
]
});
配置路由,修改入口代码,修改 main.js 入口代码
import Vue from 'vue'
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,
// 启用 ElementUI
render: h => h(App)
});
修改 App.vue 组件代码
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
测试 : 在浏览器打开 http://localhost:8080/#/login
若是出现错误: 多是由于sass-loader的版本太高致使的编译错误,当前最高版本是8.x,须要退回到7.3.1 ;
去package.json文件里面的 "sass-loader"的版本更换成7.3.1,而后重新cnpm install
即可修复;
路由嵌套
嵌套路由又称子路由,在实际应用中,一般由多层嵌套的组件组合而成。一样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
一、用户信息组件,在 views/user 目录下建立一个名为 Profile.vue 的视图组件;
<template>
<div>
我的信息
</div>
</template>
<script>
export default {
name: "UserProfile"
}
</script>
<style scoped>
</style>
二、用户列表组件在 views/user 目录下建立一个名为 List.vue 的视图组件;
<template>
<div>
用户列表
</div>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
三、配置嵌套路由修改 router 目录下的 index.js 路由配置文件,代码如
import Vue from 'vue'
import Router from 'vue-router'
import Login from "../views/Login"
import Main from '../views/Main'
// 用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'
Vue.use(Router);
export default new Router({
routes: [
{
// 登陆页
path: '/login',
name: 'Login',
component: Login
},
{
// 首页
path: '/main',
name: 'Main',
component: Main,
// 配置嵌套路由
children: [
{path: '/user/profile', component: UserProfile},
{path: '/user/list', component: UserList},
]
}
]
});
说明:主要在路由配置中增长了 children 数组配置,用于在该组件下设置嵌套路由
四、修改首页视图,咱们修改 Main.vue 视图组件,此处使用了 ElementUI 布局容器组件,代码以下:
<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">
<router-link to="/user/profile">我的信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>我的信息</el-dropdown-item>
<el-dropdown-item>退出登陆</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main>
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped lang="scss">
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
说明:
在 元素中配置了 用于展现嵌套路由,主要使用 我的信息 展现嵌套路由内容
参数传递
咱们常常须要把某种模式匹配到的全部路由,全都映射到同个组件。例如,咱们有一个 User 组件,对于全部 ID 各不相同的用户,都要使用这个组件来渲染。此时咱们就须要传递参数了;
一、修改路由配置, 主要是在 path 属性中增长了 :id 这样的占位符
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile}
二、传递参数
此时咱们将 to 改成了 :to,是为了将这一属性当成对象使用,注意 router-link 中的 name 属性名称 必定要和 路由中的 name 属性名称 匹配,由于这样 Vue 才能找到对应的路由路径;
<router-link :to="{name: 'UserProfile', params: {id: 1}}">我的信息</router-link>
三、接收参数, 在目标组件中
{{ $route.params.id }}
使用 props 的方式
一、修改路由配置 , 主要增长了 props: true 属性
{path: '/user/profile/:id', name:'UserProfile', component: UserProfile, props: true}
二、传递参数和以前同样
三、接收参数为目标组件增长 props 属性
<template>
<div>
我的信息
{{ id }}
</div>
</template>
<script>
export default {
props: ['id'],
name: "UserProfile"
}
</script>
<style scoped>
</style>
组件重定向
重定向的意思你们都明白,但 Vue 中的重定向是做用在路径不一样但组件相同的状况下,好比:
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/goHome',
redirect: '/main'
}
说明:这里定义了两个路径,一个是 /main ,一个是 /goHome,其中 /goHome 重定向到了 /main 路径,由此能够看出重定向不须要定义组件;
使用的话,只须要设置对应路径便可;
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
路由模式与 404
路由模式有两种
- hash:路径带 # 符号,如 http://localhost/#/login (默认)
- history:路径不带 # 符号,如 http://localhost/login
修改路由配置,代码以下:
export default new Router({
mode: 'history',
routes: [
]
});
处理 404 建立一个名为 NotFound.vue
的视图组件,代码以下:
<template>
<div>
页面不存在,请重试!
</div>
</template>
<script>
export default {
name: "NotFount"
}
</script>
<style scoped>
</style>
修改路由配置,代码以下:
import NotFound from '../views/NotFound'
{
path: '*',
component: NotFound
}
路由钩子与异步请求
beforeRouteEnter
:在进入路由前执行
beforeRouteLeave
:在离开路由前执行
上代码:
export default {
props: ['id'],
name: "UserProfile",
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 是组件实例
在钩子函数中使用异步请求
一、安装 Axios cnpm install --save vue-axios
二、main.js
引用 Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
三、准备数据 : 只有咱们的 static 目录下的文件是能够被访问到的,因此咱们就把静态文件放入该目录下。
// 静态数据存放的位置
static/mock/data.json
四、在 beforeRouteEnter 中进行异步请求
export default {
props: ['id'],
name: "UserProfile",
beforeRouteEnter: (to, from, next) => {
console.log("准备进入我的信息页");
// 注意,必定要在 next 中请求,由于该方法调用时 Vue 实例尚未建立,此时没法获取到 this 对象,在这里使用官方提供的回调函数拿到当前实例
next(vm => {
vm.getData();
});
},
beforeRouteLeave: (to, from, next) => {
console.log("准备离开我的信息页");
next();
},
methods: {
getData: function () {
this.axios({
method: 'get',
url: 'http://localhost:8080/static/mock/data.json'
}).then(function (repos) {
console.log(repos);
}).catch(function (error) {
console.log(error);
});
}
}
}