Vue基础

前言
十一、自定义事件内容分发
十二、vue-cli
- 1.安装 vue-cli
- 2.第一个 vue-cli 应用程序
- 3.Vue-cli目录结构
十三、Vue的Webpack
十四、vue-router路由
十五、elementUI
十六、路由嵌套
十七、参数传递和重定向
- 1.参数传递
- 2.重定向
十八、404和路由钩子
- 1.404
- 2.路由钩子和异步请求
后记

前言

本文为Vue框架基础知识、语法与使用介绍，Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~
本文上接：【Vue】Java后端程序员也必须掌握的前端框架（上）

十一、自定义事件内容分发

<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" :item="item" v-bind:index="index" v-on:remove="removeItems(index)" v-bind:key="index"></todo-items>
</todo>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script><script>// 定义一个待办事项的组件
//插槽
Vue.component(‘todo’, {template:
‘<div>\
<slot name="todo-title"></slot>\
<ul>\
<solt name="todo-items"></solt>\
</ul>\
</div>‘
});
Vue.component(“todo-title”,{props: [‘title’],
template: ‘<div>{ {title} }</div>‘
});
Vue.component(“todo-items”,{props: [‘item’,’index’],
//只能绑定当前组件的方法
template: ‘<li>{ {item} }<button @click="remove">删除</button></li>‘,
methods:{remove:function (index) {//自定义事件并发
this.$emit(‘remove’, index);
}
}
});var vm = new Vue({el:”#app”,
data:{title:’kaungshen’,
todoItems:[‘狂神说’,’java’]
},
methods: {removeItems:function (index) {console.log(“删除了”+this.todoItems[index]+”OK”);
this.todoItems.splice(index,1);
}
}
});
</script>

十二、vue-cli

vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板

1.安装 vue-cli

cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序，通常我们选择 webpack
vue list

2.第一个 vue-cli 应用程序

1、我们新建一个文件夹 vue-cli；
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，我们手动执行;运行结果!初始化并运行cd myvue
npm install
npm run dev

3.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：开发环境依赖

项目的入口文件：

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: ‘’ ：模板，会将 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 代码模板，会替换 < App /> 中的内容
import HelloWorld from './components/HelloWorld'：引入 HelloWorld 组件用于替换 template
中的 < HelloWorld/>
export default{...}：导出 NodeJS 对象，作用是可以通过 import 关键字导入name: 'App'：定义组件的名称components: { HelloWorld }：定义子组件
在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,
是当前的界面私有的!
*/

十三、Vue的Webpack

安装Webpack

npm install webpack -g
npm install webpack-cli -g

测试安装成功

webpack -v
webpack-cli -v

使用webpack

1.创建项目
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js用于编写JS模块相关代码

如：
/暴露一个方法/

exports.sayHi = function () {document.write(“<h1>java</h1>“)
}

4.在modules下创建一个名为main.js的入口文件用于打包设置entry属性

如：

var hello = require(“./hello”);
hello.sayHi();

5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包webpack
6.在主页面引入打包之后的js文件

webpack.config.js模板

module.exports = {entry:””,//入口文件
output：{//输出，指定WebPack把处理完成的文件放置到指定路径
path：””,
filename:””
},
module:{//模块，用于处理各种类型的文件
loaders:[
{test:/.js$/,loader:””}
]
},
plugins:{},插件，如：热更新，代码重用等
resolve:{},//指定路径指向
watch:true//监听，用于设置文件改动后直接打包
}

十四、vue-router路由

安装

npm install vue-router --save-dev

Vue的原理

1、 components 目录下存放我们自己编写的组件
2、定义组件 Content.vue 组件

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

3、安装路由,在src目录下,新建一个文件夹 : router ,专门存放路由，写入 index.js

    import Vue from 'vue' // 导入路由插件 import Router from 'vue-router' // 导入上面定义的组件 import Content from '../components/Content' // 安装路由 Vue.use(Router); // 配置路由 export default new Router({ routes: [ { // 路由路径 path: '/content', // 路由名称 name: 'content', // 跳转到组件 component: Content } ] });

4、我们在新建一个 Main.vue 组件

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

5、将Main组件也配置到路由中！

import Main from '../components/Main'
{ // 路由路径 path: '/main', // 路由名称 name: 'main', // 跳转到组件 component: Main
}

6、在 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/>'
})

7、在 App.vue 中使用路由

<template> <div id="app"> <router-link to="/main">首页</router-link> <router-link to="/content">内容</router-link> <router-view></router-view> </div>
</template>

调用过程

main.js–>App.vue
main.js–>index.js(路由设置)
App.vue–>其他按照路由vue
index.js–>引入其他vue

十五、elementUI

1.创建一个名为xxxx的工程，vue init webpack xxxx
2.安装依赖

# 解压压缩包
# 进入目录
cd xxxx
# 安装依赖 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

3.npm命令解释

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为该命令的缩写

4.页面参考上面的vue-router路由

十六、路由嵌套

路由嵌套

children:[{path:'',compnent:}
]

页面还是按照上面的vue-router路由

十七、参数传递和重定向

1.参数传递

1.前端传

params接收参数   v-bind绑定事件
<router-link :to="{name:'路径',params:{参数} }"></router-link>

2.中间index.js接收，path:’路径/.参数’
3.用户展示

所有的元素必须在根节点下（必须在标签中）
{ {$router.params.参数} }

通过props:true解耦

/*修改
1 在component中加上props:true
2 将{ {$router.params.参数} }改为{ {参数名} }，在组件中接收参数
如：
*/
exprot default{props:['参数'],...
}

2.重定向

在index.js中的routes:[{path:'/goHome',redirect:''//重定向的路径}]
加一个导航栏
将路径改为'/goHome'

十八、404和路由钩子

1.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 '../components/NotFound'
{ path: '*', component: NotFound
}

2.路由钩子和异步请求

// beforeRouterEnter:在进入路由钱执行
// beforeRouterLeave:在离开路由前执行
export default{props:['id'],name:"UserProfile",beforeRouterEnter:(to,from,next)=>{console.log("准备进入个人信息页");next();},beforeRouterLeave:(to,from,next)=>{console.log("准备离开个人信息页");next();},
}

参数说明：

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

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

1.安装Axios cnpm install axios -s
2.main.js引用Axios
import axios from ‘axios’
Vue.prototype.axios = axios;
3.准备数据：只有我们的static目录下的文件是可以被访问到的，所以把静态文件放入该目录下
//静态数据存放的位置
static/mock/data.json
4.在beforeRouterEnter中进行异步请求

后记

Java全栈学习路线可参考：【Java全栈学习路线】最全的Java学习路线及知识清单，Java自学方向指引，内含最全Java全栈学习技术清单~

【Vue】Java后端程序员也必须掌握的前端框架（下）相关推荐

Java后端程序员技术栈
Java后端程序员技术栈它可以是知识提纲,便于快速复习与查阅它也可以是你的学习规划,帮助小白快速了解学Java要走的路(当然你也可以选择搭配我的学习路线一起享用!) 相关链接: <gitee ...
Java后端程序员1年工作经验总结
java后端1年经验和技术总结(1) 1.引言毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为 ...
Java后端程序员1年工作经验和技术总结
本文转载自:Java后端程序员1年工作经验和技术总结 1.引言毕业已经一年有余,这一年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这一年里走过一些弯路,也碰到一些难题,也受到过做 ...
我想打老板，作为Java后端程序员，他让我开发电商微信小程序
大家好,我是曹NM,我是一名Java后端程序员,每天开心的撸CRUD: 然后,今天突变- 今天早上老板把我叫到办公室,对我说,"公司最近接了个电商小程序单子,你和王二狗,张SD参与下需求分析 ...
Java后端程序员都做些什么？
这个问题来自于QQ网友,一句两句说不清楚,索性写个文章. 我刚开始做Web开发的时候,根本没有前端,后端之说. 原因很简单,那个时候服务器端的代码就是一切:接受浏览器的请求,实现业务逻辑,访问数据库, ...
2022年秋招 Java后端程序员如何应对面试？
一.简历技巧大部分常识我就不讲了,只讲干货! 1.基本信息个人基本信息,就是姓名.学历.邮箱.电话等,这部分正常写就好了,我只提醒大家别漏了以下几个面试官眼中的加分项. 一般人只在个人信息里写学历 ...
Java后端程序员3年工作经验总结（一）
1.引言工作已经3年有余,这3年里特别感谢技术管理人员的器重,以及同事的帮忙,学到了不少东西.这3年里走过一些弯路,也碰到一些难题,也受到过做为一名开发却经常为系统维护和发布当救火队员的苦恼.遂决定 ...
Java后端程序员未来职业规划路线，超用心整理，建议收藏
1. 什么是程序员上面图片真实的反应了一些程序员的生活常态,那么首先来说一下什么是:程序员吧,所谓程序员就是从事程序开发,程序维护的工作者.说到底就是一个普通的打工仔,一个"搬砖工&quo ...
这份书单Java后端程序员必读，你读过几本呢
前言互联网是这样一个世界一它既复杂.又充满了变数和不确定.在这样一个世界里折腾,你不得不多点思考,多读点儿书. 获取方式:免费获取电子书第一本:亿级流量网站架构核心技术第二本:Java并发编程的 ...

【Vue】Java后端程序员也必须掌握的前端框架（下）