Vue基础

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

前言

本文为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="/npm/vue@2.5.21/dist/vue.min.js"> </script><script>// 定义一个待办事项的组件//插槽ponent(‘todo’, {template:‘<div>\<slot name="todo-title"></slot>\<ul>\<solt name="todo-items"></solt>\</ul>\</div>‘});ponent(“todo-title”,{props: [‘title’],template: ‘<div>{{title} }</div>‘});ponent(“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 应用程序，通常我们选择 webpackvue 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 myvuenpm installnpm 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({…}) ：实例化 Vueel: ‘#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 -gnpm install webpack-cli -g

测试安装成功

webpack -vwebpack-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命令打包webpack6.在主页面引入打包之后的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.vuemain.js–>index.js(路由设置)App.vue–>其他按照路由vueindex.js–>引入其他vue

十五、elementUI

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

# 解压压缩包 # 进入目录 cd xxxx # 安装依赖 vue-routernpm install vue-router --save-dev#安装element-uinpm 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:true2 将{ {$router.params.参数} }改为{ {参数名} }，在组件中接收参数如：*/exprot default{props:['参数'],... }

2.重定向

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

十八、404和路由钩子

1.404

路由模式有两种：

hash：路径带 # 符号，如 http://localhost/#/loginhistory：路径不带 # 符号，如 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 -s2.main.js引用Axios

import axios from ‘axios’

Vue.prototype.axios = axios;3.准备数据：只有我们的static目录下的文件是可以被访问到的，所以把静态文件放入该目录下

//静态数据存放的位置

static/mock/data.json4.在beforeRouterEnter中进行异步请求

后记

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