Vue 思维导图模板_ProcessOn思维导图、流程图

什么是VUE

作者：尤雨溪

Vue是用于构建用户界面的渐进式框架

Vue 只关注视图层，采用自底向上增量开发的设计

优势

1、集成了模块化

这是Angular的特性

2、结合了虚拟dom

这是react的特性

3、支持双向绑定

v-model

4、Vue是MVVM的具体应用

引入Vue和axios

Vue

axios

axios是Vue推荐的通信框架，不推荐使用jQuery是因为jQuery对dom操作太频繁了，影响效率

推荐在mounted的钩子函数里写

计算属性

节省计算开销，计算属性在内存中运行

conputed属性中写

当计算缓存被修改会重新计算

⭐插槽（slot）

Vue支持热拔插

示例

1、插槽结构

introduce

self

family

2、插槽定义

introduce

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt; color: rgb(169, 183, 198);"> Vue.component("introduce",{ template :'<div>' + '<slot name="self"></slot>' + '<slot name="family"></slot>' + '</div>' }) </pre>

self

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt; color: rgb(169, 183, 198);"> Vue.component("self",{ props:['name'], template : '{{name}}' }) </pre>

family

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt; color: rgb(169, 183, 198);"> Vue.component("family",{ props:['family'], template : '<ul>' + '<li>{{family.name}}</li>' + '</ul>' }) </pre>

3、插槽使用

4、对应关系

1、introduce里的两个插槽分别对应下面的self和family

template内嵌套插槽需要用name属性绑定子插槽

2、插槽定义有值传递的时候，需要用props接受参数

3、插槽使用的时候，子插槽需要绑定插槽名称

4、插槽有参数使用的时候，需要通过v-bind：绑定参数（也可以直接：，省略掉v-bind） 绑定的参数和插槽定义时的props内属性对应

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> Vue.component("self",{ props:['name'], template : '{{name}}' }) </pre>

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> Vue.component("family",{ props:['family'], template : '<ul>' + '<li>{{family.name}}</li>' + '</ul>' }) </pre>

事件分发

Vue组件无法直接调用到Vue实例的方法，需要通过this.$emit('自定义事件名',方法参数）来调用

1、组件编写触发向Vue实例传递index的函数方法

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> props:['family','index'], template : '<ul>' + '<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' + '</ul>', methods: { removeSelf:function (index){ this.$emit('remove',index); } } </pre>

2、组件绑定事件触发条件

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> template : '<ul>' + '<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' + '</ul>', </pre>

3、组件填充时传递index

4、Vue实例中编写事件函数

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">methods:{ removeFamily : function(index){ this.admin.families.splice(index,1); } } </pre>

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE</title> </head> <body> <div id="app"> <introduce slot="introduce"> <self slot="self" :name="admin.name"></self> <family slot="family" v-for="(family,index) in admin.families" :family="family" :index="index" @remove="removeFamily(index)"></family> </introduce> </div> <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 type="text/javascript"> Vue.component("introduce",{ template :'<div>' + '<slot name="self"></slot>' + '<slot name="family"></slot>' + '</div>' }) Vue.component("self",{ props:['name'], template : '{{name}}' }) Vue.component("family",{ props:['family','index'], template : '<ul>' + '<li>{{index}}---{{family.name}} <button @click="removeSelf(index)">删除</button></li>' + '</ul>', methods: { removeSelf:function (index){ this.$emit('remove',index); } } }) var vm = new Vue({ el:"#app", data(){ return{ admin:null } }, mounted(){ axios.get('xiaoye.json').then(res=>(this.admin=res.data)); }, methods:{ removeFamily : function(index){ this.admin.families.splice(index,1); } } }) </script> </body> </html> </pre>

vue-cli

需要node.js的支持

官网下载直接安装就可以了

node.js会自己添加环境变量，不需要手动添加环境变量

npm install cnpm -g

全局安装cnpm

cnpm是国内淘宝镜像，速度更快

安装vue-cli

cnpm install vue-cli -g

全局安装vue-cli

创建一个vue-cli项目

1、cmd进入目标目录

2、cmd输入vue init webpack 项目名

3、询问项目名称，直接回车，因为上面写过了

4、项目描述，直接回车

5、项目作者，可以输入自己的昵称

6、运行时编译，选择第一个

7、各种配置，一路No下去，我们需要自己走一遍才能更加了解运行过程

8、项目已经初始化完成了

9、进入我们的新项目

cd 项目名

10、安装npm

npm install

如果出错了的话，它会提示你怎么做，你照着输入修复指令就可以了

11、打包启动测试

npm run dev

12、出现Done提示后，浏览器输入localhost:8080应该可以成功打开初始页面

13、ctrl+c后输入y确定可以停止服务

webpack

介绍

热部署

打包用的，可以把es6的模块打包降级到es5，使得所有的浏览器都可以使用

目前很多浏览器只支持es5

安装webpack

管理员运行cmd

npm install webpack -g

npm install webpack-cli -g

成功截图

可以手动查看版本

如果安装失败了，改用cnpm install webpack -g一般就可以成功了

简单学习如何使用webpack

1、新建一个文件夹，使用idea打开

2、新建modules文件夹

3、新建hello.js

export暴露js方法

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">//export暴露一个方法 exports.sayHi = function (){ document.write("<h1>hi!,xiaoye!</h1>") } </pre>

4、新建main.js

require引入暴露的js，声明一个变量接受

该变量可以像Java中的类一样通过点来调用js方法

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">//require加载暴露的方法 var hi = require("./hello") hi.sayHi(); </pre>

5、新建webpack.config.js

配置打包参数

1、entry入口

一般就是main.js

2、output输出

新建bundle.js作为接收输出的js（官方规范命名）

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">module.exports = { entry:'./modules/main.js', output:{ filename:"./js/bundle.js" } } </pre>

6、terminal输入webpack打包

打包成功会多一个dist文件夹，里面有一个js文件夹，js文件夹里面就是打包成功的bundle.js

7、新建html，引入bundle.js测试是否成功

8、浏览器打开，显示hi!xiaoye!

⭐vue-router

⭐是vue-router,别少字母，写成vue-route就不对了

浪费了我一下午，淦！

1、安装vue-router

npm install vue-router --save-dev

失败就换cnpm

 2、main.js导入VueRouter

import

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import VueRouter from 'vue-router' </pre>

显示声明使用

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">//显示使用VueRouter Vue.use(VueRoute) </pre>

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import Vue from 'vue' import App from './App' import VueRouter from 'vue-router' Vue.config.productionTip = false //显示使用VueRouter Vue.use(VueRouter) new Vue({ el: '#app', components: { App }, template: '<App/>' }) </pre>

3、编写components组件

4、在router的index.js里面写路径

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">export default new VueRouter({ routes:[ { path:"/content", name:"Content", component:Content }, { path:"/personal", name:"Personal", component:Personal } ] }) </pre>

5、在页面直接应用

vue+element

1、搭建项目

1、命令符进入目标盘，创建前端webpack项目

vue init webpack vue-element

2、确认项目、描述、作者、选择不自动安装相关配置

一路No下去

3、进入项目

cd vue-element

4、安装相关依赖

1、npm install vue-router -D

路由配置

2、npm i element-ui -S

element-ui

3、cnpm install sass-loader node-sass -D

sass-loader和node-sass加载器

sass是css预处理器

4、npm install

2、配置路由

1、创建router目录

2、router目录下创建index.js

3、编写index.js

1、import Vue

2、import VueRouter

3、显式声明使用路由

Vue.user(VueRouter)

4、暴露路由对象

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">export default new VueRouter({ routes:[ { path:"/content", name:"Content", component:Content }, { path:"/personal", name:"Personal", component:Personal } ] }) </pre>

4、main.js引用router

1、import router from "./router"

2、vue实例中配置路由

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">new Vue({ el: '#app', router }) </pre>

3、配置ElementUI

1、main.js中引入ElementUI

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import ElementUI from 'element-ui' </pre>

2、main.js中引入预加载的css

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import 'element-ui/lib/theme-chalk/index.css'; </pre>

3、显示声明使用Element UI

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">Vue.use(ElementUI) </pre>

4、vue实例中配置render渲染

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">new Vue({ el: '#app', router, render: h => h(App) }) </pre>

main.js文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">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.config.productionTip = false Vue.use(ElementUI) new Vue({ el: '#app', router, render: h => h(App) //这里的app的意思是给App渲染 }) </pre>

4、编写两个页面模拟登录

1、main

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><template> <div>我是首页</div> </template> <script> export default { name: "Main" } </script> <style scoped> </style> </pre>

2、login

⭐登录成功跳转路由（编程式导航）

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">this.$router.push("/main"); </pre>

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><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"> 请输入账号和密码 <el-button type="primary" @click="dialogVisible = false">确定</el-button> </el-dialog> </div> </template> <script> export default { name: "Login" } </script> <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> </pre>

⭐注意点

如果npm run dev失败可能是因为sass-loader版本过高，降级后npm install即可

1、node-sass : ^4.13.0

2、sass-loader : ^7.3.1

嵌套路由

1、创建新的页面

2、在router的index.js里配置路由

1、import

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import Profile from "../pages/user/Profile"; import UserList from "../pages/user/UserList"; </pre>

2、配置子路由

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">export default new VueRouter({ routes:[ { path:"/main", name:"Main", component:Main, children:[ { path:"/user/profile", component:Profile }, { path:"/user/userlist", component:UserList } ] }, { path:"/login", name:"Login", component:Login } ] }) </pre>

3、在Main.Vue页面模拟子路由嵌套

文件示例

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><template> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title">用户管理</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/userlist">用户列表</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title">内容管理</template> <e1-menu-item-group> <el-menu-item index="2-1">分类管理</el-menu-item> <el-menu-item index="2-2">内容列表</el-menu-item> </e1-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>个人信息</el-dropdown-item> <el-dropdown-item>退出登录</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <router-view></router-view> </el-container> </el-container> </template> <script> export default { name: "Main" } </script> <style scoped lang="scss"> .el-header { background-color: #048bd1; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> </pre>

参数传递和重定向

参数传递

第一种方式

1、父组件给参数

2、路由index.js对应

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> { path:"/main", name:"Main", component:Main, children:[ { path:"/user/profile/:id/:sex", component:Profile }, { path:"/user/userlist", component:UserList } ] } </pre>

3、子组件拿参数

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">{{ $route.params.id }} {{ $route.params.sex }} </pre>

第二种方式

1、父组件给参数

2、路由index.js对应

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> { path:"/main", name:"Main", component:Main, children:[ { path:"/user/profile/:id/:sex", component:Profile, props:true }, { path:"/user/userlist", component:UserList } ] } </pre>

3、子组件拿参数

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><template> <div> <h1>个人信息</h1> {{ id }} {{ sex}} </div> </template> <script> export default { props:['id','sex'], name: "Profile" } </script> <style scoped> </style> </pre>

重定向

1、路由配置

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"> { path: '/goHome', redirect:'/main' } </pre>

2、视图引用

3、404使用重定向实现

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">{ path: '*', component:NotFound } </pre>

拦截器

1、安装axios

1、npm安装

npm install --save vue-axios

2、main.js引入

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios,axios) </pre>

2、编写进出前后的方法

1、进入前

beforeRouteEnter

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">beforeRouteEnter:(to,from,next)=>{ console.log("进入个人信息前") }, </pre>

2、离开前

beforeRouteLeave

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;">beforeRouteLeave:(to,from,next)=>{ console.log("离开个人信息前") }, </pre>

3、实际参数

to

将要跳转的路径信息

from

跳转前的路径信息

next（）

跳入下一个页面

next（'/path'）

指定跳入path路由

next (false)

返回原来的页面

next(vm=>{  })

仅在beforeRouteEnter可用，vm为组件实例

⭐Vue的生命周期

请大家点击文字后方的链接移步至我的流程图，流程图理解配合下方代码文件动手验证效果更好

⭐请先在terminal终端中输入 npm install vue 安装vue！！不然是不会成功哒

源码文件

<pre style="background-color: rgb(43, 43, 43); font-family: "JetBrains Mono", monospace; font-size: 9.8pt;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h1 id="h1">{{ msg }}</h1> <button @click="msg = 'bye~'">hi -> bye</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> var vm = new Vue({ el:'#app', data:{ msg:'hi~' }, methods:{ hello:function(){ console.log('你好啊'); } }, beforeCreate(){ // console.log(this.msg) // this.hello() }, created(){ // console.log(this.msg) // this.hello() }, beforeMount(){ // console.log(document.getElementById('h1').innerHTML) }, mounted(){ // console.log(document.getElementById('h1').innerHTML) }, beforeUpdate(){ // console.log(document.getElementById('h1').innerHTML) }, updated(){ console.log(document.getElementById('h1').innerHTML) } }) </script> </body> </html> </pre>