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

---

前言

本文为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/[email protected]/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: '' 
})

• 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全栈学习技术清单~