Vue

简介

Vue:是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。

CSS预处理器:提供CSS缺失的样式层复用机制,减少冗余代码,提高样式代码的可维护性,大大提高前端在样式上的开发效率。

CSS预处理器:是一种专门的编程语言,进行web页面样式设计,通过编译器转化为正常的CSS文件,以供项目使用。

常用CSS预处理器:

SASS,基于Ruby,通过服务端处理,功能强大,解析效率高,需要学习Ruby语言。

LESS,基于NodeJS,通过客户端处理,使用简单。

TypeScript:

  • TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。
  • TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以运行在TypeScript环境中。TypeScript是为大型应用的开发而设计,并且可以编译为JavaScript。

JavaScript框架:

  • JQuery:优点是简化了DOM操作,缺点是DOM操作太频繁,影响前端性能。
  • Angular:Google收购的前端框架,由一群Java程序员开发,其特点是将将后台的MVC模式搬到了前端,并增加了模块化开发的理念,与微软合作,采用TypeScript语法开发,对后端程序员友好,对前端程序员不太友好。
  • React:FaceBook出品,一款高性能JS前端框架,其特点是提出了新概念【虚拟DOM】用于减少真实DOM操作,在内存中模拟DOM操作,有效的提升了前端的渲染效率;缺点是复杂,需要额外学习一门JSX语言。
  • Vue:一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发,路由,状态管理等新特性,其特点是包含了Angular(模块化)和React(虚拟DOM)的优点。
  • Axios:前端通信框架,因为Vue的边界很明确,就是为了处理DOM,不具备通信能力;为此就需要一个通信框架与服务器交互,当然也可以使用JQuery提供的Ajax通信功能。

UI框架

  • Ant-Design:阿里巴巴出品。基于React的UI框架。
  • ElementUI,iview,ice:饿了么出品 ,基于Vue的UI框架。
  • BootStrap:Twitter推出的用于前端开发的开源工具包。
  • AmazeUI:一款HTML5跨屏前端框架。

JavaScript构建工具:

  • Babel:JS 编译工具,主要用于浏览器不支持的ES新特性,比如用于编译TypeScript。
  • WebPack:模块打包器,主要作用是打包,压缩,合并及按序加载。

MVVM模式的实现者:

  • Model:模型层,这里表示JavaScript对象。
  • View:视图层,这里表示DOM(HTML操作的元素)。
  • ViewModel:连接视图和数据的中间件,Vue.js就是MVVC中ViewModel层的实现者。

在MVVC架构中,是不允许数据和视图直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer观察者。

  • ViewModel能够观察到数据的变化,并对视图对应的内容进行更新。
  • ViewModel能够监听到视图的变化,并能通知数据发生改变。

因此,Vue.js就是一个MVVM的实现者,它的核心就是实现了DOM监听与数据绑定。

为什么使用MVVM:分离视图和模型

  • 低耦合:视图可独立于Model变化和修改,一个ViewModel可绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  • 可复用:可以把一些逻辑视图放在一个ViewModel中,让很多View重用这段逻辑视图。
  • 独立开发:开发人员可以专注业务逻辑和数据的开发(ViewModel),设计人员专注于页面设计。
  • 可测试:测试可以针对ViewModel来写。

第一个Vue程序

IDEA安装Vue.js插件

demo.html

<body>
<div id="app">
<h1>{{message}}</h1>
<span v-bind:title="message">
鼠标悬停几秒查看动态绑定的信息
</span> </div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello,vue!"
}
});
</script> </body>

Vue基本语法

  • if
<body>
<!--View层-->
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
</div>
<div id="app2">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else>C</h1>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
ok: true
}
});
var vm = new Vue({
el:"#app2",
data:{
type: 'A'
}
});
</script>
</body>
  • for
<body>
<div id="app">
<h1 v-for="item in items">{{item.message}}</h1>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
items:[
{message: 'zzrr'},
{message: 'Vue'}
]
}
});
</script>
</body>
  • 监听事件
<body>
<!--View层-->
<div id="app">
<button v-on:click="sayHi">click me</button>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'zzr'
},
methods: {
// 方法必须定义在Vue的methods对象中
sayHi: function () {
alert(this.message);
}
}
});
</script>
</body>

双向绑定

文本框绑定

<body>
<!--View层-->
<div id="app">
<!-- 输入的文本:<input type="text" v-model="message">{{message}}-->
<textarea v-model="message"></textarea>
输入文本框内容为:{{message}} </div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>

单选框绑定

<body>
<!--View层-->
<div id="app"> 性别:
<input type="radio" name="sex" value="男" v-model="zr">男
<input type="radio" name="sex" value="女" v-model="zr">女
<p>
你选中了:{{zr}}
</p>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
zr: ""
}
});
</script>
</body>

下拉框

<body>
<!--View层-->
<div id="app">
<p>
下拉框:<select v-model="message">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
value: {{message}}
</p>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: ""
}
});
</script>
</body>

组件

<body>
<!--View层-->
<div id="app">
<zzr v-for="item in items" v-bind:zr="item"></zzr>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
// 定义一个Vue组件component
Vue.component("zzr",{
props: ['zr'],
template: '<li>{{zr}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["java","linux","vue"]
}
});
</script>
</body>

Axios异步通信

Axios是一个开源的可以用在浏览器端和 Node.JS 的异步通信框架, 它的主要作用是和Ajax一样实现异步通信。

Axios:

  • 从浏览器中创建XMLHttpRequests
  • 从Node.js创建http请求
  • 支持Peomise API [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御XSRF [跨站请求伪造]

测试

<head>
<meta charset="UTF-8">
<title>Title</title> <!-- 解决闪烁问题-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!--View层-->
<div id="vue" v-clock>
<div>{{info.name}}</div>
<div>{{info.address}}</div>
<div>{{info.links}}</div>
<div>{{info.address.city}}</div> <a v-bind:href="info.url">博客园</a>
</div> <!-- 导入Vue.js和axios-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#vue",
data(){//data方法
return{
//请求的返回参数格式,必须和json字符串一样
info: {
name: null,
url: null,
address:{
city: null,
country: null
},
links:[{
name: null,
url: null
}]
}
}
},
mounted(){//钩子函数
axios.get('../data.json').then(response=>(this.info=response.data))
}
});
</script>
</body>

data.json

{
"name": "zr",
"url": "https://www.cnblogs.com/zhou-zr",
"page": "11",
"address": {
"city": "武汉",
"country": "中国"
},
"links": [
{
"name": "bokeyuan",
"url": "cnblogs.com/zhou-zr"
},
{
"name": "zrkuang",
"url": "www.baidu.com"
}
]
}

计算属性

计算属性:是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),可理解为缓存。

demo8.html

<body>
<!--View层-->
<div id="app">
<p>currentTime():{{currentTime()}}</p>
<p>currentTime2:{{currentTime2}}</p>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message:"hello,zzzrrr!"
},
methods: {
currentTime: function () {//在浏览器控制台输出vm.currentTime()时间戳值会改变
return Date.now();//返回时间戳
}
},
computed: {//计算属性 methods,computed方法名不能重,重名会调用methods中的方法
currentTime2: function () {//在浏览器控制台输出vm.currentTime2时间戳值不会改变
this.message; //增加这一行后控制台vm.message="zzrr"再输出时间戳值会改变
return Date.now();//返回时间戳
}
}
});
</script> </body>

调用方法时,每次需要计算,既然计算就必然产生系统的开销,如果这个结果不经常变化就可以考虑将这个结果缓存起来。计算结果的主要目的就是将不经常变化的计算结果进行缓存,以节省系统的开销。

Slot

在Vue.js中我们使用元素作为承载分支内容的出口,称为插槽,可以应用在组合组件的场景中。

v-bind:简写 :

demo9.html

<body>

<!--View层-->
<div id="app">
<tudo>
<!--v-bind:简写 :-->
<tudo-title slot="tudo-title" :title="title"></tudo-title>
<tudo-items slot="tudo-items" v-for="item in tudoItems" :items="item"></tudo-items>
</tudo>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script> Vue.component("tudo",{
template:
'<div>\
<slot></slot>\
<ul>\
<slot></slot>\
</ul>\
</div>'
}); Vue.component("tudo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("tudo-items",{
props: ['items'],
template: '<li>{{items}}</li>'
}); var vm = new Vue({
el: "#app",
data: {
title: "周周",
tudoItems: ["Java","ZZRR","Kuang"],
}
});
</script> </body>

自定义事件

v-on:简写 @

this.$emit 自定义事件分发

demo10.html

<body>

<!--View层-->
<div id="app">
<tudo>
<tudo-title slot="tudo-title" :title="title"></tudo-title>
<tudo-items slot="tudo-items" v-for="(item,index) in tudoItems" :items="item" v-bind:index="index" v-on:remove="removeItems(index)"></tudo-items>
</tudo>
</div> <!-- 导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script> Vue.component("tudo",{
template:
'<div>'+
'<slot name="tudo-title"></slot>'+
'<ul>'+
'<slot name="tudo-items"></slot>'+
'</ul>'+
'</div>'
}); Vue.component("tudo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("tudo-items",{
props: ['items','index'],
//v-on:简写 @
template: '<li>{{index}}----{{items}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index) {
//this.$emit 自定义事件分发
this.$emit('remove',index);
}
}
}); var vm = new Vue({
el: "#app",
data: {
title: "周周",
tudoItems: ["Java","ZZRR","Kuang"],
},
methods: {
removeItems: function (index) {
console.log("删除了"+this.tudoItems[index]);
this.tudoItems.splice(index,1); //一次删除一个元素
}
}
});
</script> </body>

第一个Vue-cli程序

  1. 安装node.js(官网下载64位的安装包,直接安装到自己指定目录)

  2. cmd以管理员打开,node-v;npm-v分别输入查看版本

  3. 安装淘宝镜像加速器,npm install cnpm -g

  1. 安装vue-cli,输入cnpm install vue-cli -g

  2. 输入vue list,查看可以基于哪些模板创建 vue 应用程序,通常选择webpack

  1. 新建一个项目文件夹,cmd进入该文件夹,输入vue init webpack myvue(一路no即可)

  1. 进入vue项目中 cd myvue,再执行npm install

  2. npm run dev启动项目

  1. 可输入以上地址访问,ctrl+c 终止

webpack学习使用

webpack是一个现代JavaScript应用程序的静态模块打包器(model bundler),当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或者多个包(bundle) 。

cmd以管理员启动:

  • npm install webpack -g

  • npm install webpack-cli -g

测试安装成功:

  • webpack -v
  • webpack-cli -v

项目包(webpack-study)下modules文件夹下

hello.js

//暴露一个方法
exports.sayHi = function () {
document.write("<h1>zzzrrr</h1>")
};

(webpack-study)/modules/main.js

var hello = require("./hello");
hello.sayHi();

项目包(webpack-study)下webpack.config.js

module.exports = {
entry: "./modules/main.js",
output:{
filename: "./js/bundle.js",
}
};

打包

管理员cmd进入到(webpack-study)下,webpack打包,webpack --watch热部署(选一个即可)。

项目包下index.html

<body>
<script src="dist/js/bundle.js"></script>
</body>

Vue-Router路由

Vue-Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌,包含的功能有:

  • 嵌套的路由/视图类
  • 模块化的,基于组件的路由配置
  • 路由参数,查询,通配符
  • 基于Vue.js过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的CSS class的连接
  • HTML5历史模式或hash模式,在IE9中自动降级
  • 自定义的滚动条行为

项目目录下:npm install vue-router --save-dev

src/components/Content.vue

<template>
<h1>内容页</h1>
</template> <script>
export default {
name: "Content"
}
</script> <style scoped> </style>

src/components/Main.vue

<template>
<h1>首页</h1>
</template> <script>
export default {
name: "Main"
}
</script> <style scoped> </style>

src/components/Zzr.vue

<template>
<h1>ZZRR</h1>
</template> <script>
export default {
name: "Zzr"
}
</script> <style scoped> </style>

src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Content from "../components/Content";
import Main from "../components/Main";
import Zzr from "../components/Zzr"; //安装路由
Vue.use(VueRouter); //配置导出路由 export default new VueRouter({
routes: [
{
//路径
path: '/content',
name: 'content',
//跳转的组件
component: Content
},
{
//路径
path: '/main',
name: 'content',
//跳转的组件
component: Main
},
{
//路径
path: '/zzr',
name: 'content',
//跳转的组件
component: Zzr
},
]
});

src/App.vue

<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-link to="/zzr">Zzr</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>

src/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/>'
})

项目下执行 npm run dev,然后访问。

vue+elementUI

创建工程步骤

  1. 创建工程
  • vue init webpack hello-vue
  1. 进入工程目录
  • cd hello-vue
  1. 安装
  • npm install vue-router --sava-dev
  1. 安装
  • npm i element-ui -S
  1. 安装依赖
  • npm install
  1. 安装SASS加载器
  • cnpm install sass-loader node-sass --save-dev
  1. 启动测试
  • npm run dev

解释说明:

npm install moduleName:安装模块到项目目录下。

npm install -g moduleName:-g 安装模块到全局,具体安装到哪个位置,要看 npm config prefix 的位置。

npm install --save moduleName:--save 的意思值将模块安装到项目目录下,并在package文件的 dependencies 节点写入依赖,-S为该命令的缩写。

npm install --save-dev moduleName:--save-dev 的意思值将模块安装到项目目录下,并在package文件的 devDependencies 节点写入依赖,-D为该命令的缩写。

搭建项目,结构目录如下:

Login.vue

<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>

App.vue

<template>
<div id="app">
<h1>App</h1>
<router-view></router-view>
</div>
</template> <script> export default {
name: 'App', }
</script>

index.js

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: '/main',
component: Main
},
{
path: '/login',
component: Login
}
]
});

App.vue

<template>
<div id="app">
<h1>App</h1>
<router-view></router-view>
</div>
</template> <script> export default {
name: 'App', }
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router' import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; Vue.use(router);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render: h => h(App), //Element
})

执行npm run dev后,访问http://localhost:8080/#/login

注意如果打包发布失败:在pakage.json中降低sass版本为"sass-loader": "^7.3.1",

如果出现:

执行 npm uninstall node-sass 卸载

再安装 cnpm install node-sass@4.14.1

最后:npm run dev

嵌套路由

嵌套路由又称子路由,在实际应用中,通常由多层嵌套的组件而成,同样的,URL中各段动态路径也按某种结构对应嵌套各层组件。

在上一个项目基础下增加user文件夹

List.vue

<template>
<h1>用户列表页</h1>
</template> <script>
export default {
name: "List"
}
</script> <style scoped> </style>

Profile.vue

<template>
<h1>个人信息</h1>
</template> <script>
export default {
name: "Profile"
}
</script> <style scoped> </style>

index.js

import Vue from 'vue'
import Router from 'vue-router' import Login from "../views/Login"
import Main from "../views/Main" import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
Vue.use(Router);
export default new Router({
routes: [
{
path: '/main',
component: Main,
//嵌套路由
children: [
{path: '/user/profile',component: UserProfile},
{path: '/user/list',component: UserList}
]
},
{
path: '/login',
component: Login,
}
]
});

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">
<!--插入的地方-->
<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: #2acaff;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>

参数传递及重定向

方法一

修改Main.vue

<el-menu-item index="1-1">
<!--插入的地方 name;地址,params:参数 传参:v-bind -->
<router-link :to="{name: 'UserProfile',params: {id:1}}">个人信息</router-link>
</el-menu-item>

修改index.js

//嵌套路由
children: [
{path: '/user/profile/:id',name: 'UserProfile',component: UserProfile},
{path: '/user/list',component: UserList}
]

修改Profile.vue,接收

<template>
<!-- 所有的元素不能直接在根节点下-->
<div>
<h1>个人信息</h1>
{{$route.params.id}}
</div>
</template>

方法二

Main.vue和方法一相同

index.js

//嵌套路由
children: [
{path: '/user/profile/:id',name: 'UserProfile',component: UserProfile,props:true},
{path: '/user/list',component: UserList}
]

修改Profile.vue,接收

<template>
<!-- 所有的元素不能直接在根节点下-->
<div>
<h1>个人信息</h1>
{{id}}
</div>
</template> <script>
export default {
props: ['id'],
name: "Profile"
}
</script> <style scoped> </style>

重定向

index.js中增加

{
path: '/goHome',
redirect: '/main',
}

Main.vue中增加

<el-menu-item index="1-3">
<!--插入的地方-->
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>

登录显示用户名:

Login.vue中修改为:

methods: {
onSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面,该方式称之为编程式导航
this.$router.push("/main/"+this.form.username);
} else {
this.dialogVisible = true;
return false;
}
});
}
}

index.js中Main组件上增加 props: true,

path: '/main/:name',
props: true,
component: Main,

Main.vue增加 props:['name'], 接收参数, {{name}} 显示

 <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>
<span>{{name}}</span>
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
props:['name'],
name: "Main"
}
</script>

测试 http://localhost:8080/#/login 登录后右上方显示用户名

404和路由钩子

路由模式有两种:

index.js中增加 mode: 'history',

export default new Router({
mode: 'history',
routes: [
{
});

配置404页面

NotFound.vue

<template>
<div><h1>404,你的页面走丢了</h1></div>
</template> <script>
export default {
name: "NotFound"
}
</script> <style scoped> </style>

index.js

import NotFound from "../views/NotFound";
....
//路由中增加
{
path: '*',
component: NotFound,
}

路由钩子与异步请求

beforeRouteEnter:在进入路由前执行

beforeRouteLeave:在离开路由前执行

Profile.vue

export default {
props: ['id'],
name: "Profile",
beforeRouteEnter:(to, from, next)=>{
console.log("进入路由之前!");
next();
},beforeRouteLeave:(to, from, next)=>{
console.log("进入路由之后!");
next();
},
methods: {
getData: function () {
this.axi
}
}
}

参数说明:

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

在钩子函数中使用异步请求:

  1. 安装axios:cnpm install axios -s (打包失败使用npm install --save vue-axios或官网npm install --save axios vue-axios)

  2. main.js中引用axios

Profile.vue

<script>
export default {
props: ['id'],
name: "Profile",
beforeRouteEnter:(to, from, next)=>{
console.log("进入路由之前!");
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.josn',
}).then(function (response) {
console.log(response);
})
}
}
}
</script>

Vue入门学习的更多相关文章

  1. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  2. vue入门学习示例

    鄙人一直是用angular框架的,所以顺便比较了一下. <!DOCTYPE html> <html lang="en"> <head> < ...

  3. Vue入门学习总结一:Vue定义

    Vue的功能是为视图提供响应的数据绑定及视图组件,Vue是数据驱动式的,不直接修改DOM而是直接操作数据实现对界面进行修改. 首先我们需要在script中定义一个Vue实例,定义方法如下: var v ...

  4. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  5. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  6. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

  7. Vue 新手学习笔记:vue-element-admin 之安装,配置及入门开发

    所属专栏: Vue 开发学习进步 说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架 ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

随机推荐

  1. 微信小程序:添加全局的正在加载中图标效果

    在发送请求的时候,显示一个正在加载中的小图标.在加载下一页的时候也显示正在加载中.同时数据请求回来了,把加载中进行关闭. 开发----API-----界面 在哪里添加这两段代码会比较方便呢?一个项目有 ...

  2. Lambad表达式--Java8新特性

    1.概述 Lambda是一个匿名函数,是java8的一个新特性.可以对接口进行非常简洁的实现.但它要求接口中只能有一个抽象方法,原因是lambda只能实现一个方法.另外,需要在接口上添加注解@Func ...

  3. Dubbo与Zookeeper开发

    1.Dubbo 1.1RPC RPC全称是remote procedure call,即远程过程调用.比如有两台服务器A和B,它们上面分别部署了一个服务.此时B服务器想调用A服务器上提供的方法,由于不 ...

  4. ctf.show_web13(文件上传之.user.ini)

    这是一道文件上传题,先二话不说丢个图片码,显示为 先考虑文件太小,用burp抓包,添加了一堆无用的东西后显示仍然是error file zise,直到上传正常图片依旧如此,考虑文件太大.将一句话木马修 ...

  5. C++构造函数的选择

    构造函数用来初始化类对象.构造函数有好几种,在编程时如何选择不同的构造函数呢?做个总结 一.默认构造函数 默认构造函数是在程序员没有声明任何构造函数的时,编译器为了初始化类对象自己进行的默认构造函数. ...

  6. tcpdump后台抓包并输出给wireshark

    # 先进到/tmp 目录执行,方便Filezila 传输 # 开启抓包 nohup tcpdump -i eth0 -s0 -nnA 'port 22' -w dump22.pcap & [1 ...

  7. pytorch(02)tensor的概念以及创建

    二.张量的简介与创建 2.1张量的概念 张量的概念:Tensor 张量是一个多维数组,它是标量.向量.矩阵的高维拓展 Tensor与Variable Variable是torch.autograd(t ...

  8. javaweb遇到的报错及解决方式

    javaweb报错问题以及解决方案 问题(报错信息):Application Server was not connected before run configuration stop, reaso ...

  9. CISCN-2018-Quals-note-service2

    CISCN-2018-Quals-note-service2 总结 做完这道题,收获如下: 1)汇编语句jmp short s,最后编译出来的机器码为\xEB\x??,问号代表pc寄存器会往前或往后跳 ...

  10. ICPC题目选讲

    Traveling in the grid world 题目描述 有一个 \(n\times m\) 的格点图,两点之间走他们的连线,但是这条连线不能恰好覆盖其他整点.还要求相邻两步之间的连线不能斜率 ...