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

一、初识

简介认识

安装

npm

cdn

download

vue-cli

生命周期

MVVM

options

el

method

data

computed

......

二、基础语法

插值语法

mustache

v-clock

等解析完后再显示数据

v-once

只显示第一次的数据

v-html

解析为html

v-text

解析为文本，同mustache

v-pre

不解析mustache语法

动态绑定属性（v-bind）

作用

用于动态绑定一个或多个属性值，或者向另一个组件传递props值

缩写

:

绑定链接

v-bind:src="Url"

绑定class

对象语法

v-bind:class="a()"

v-bind:class="{pink: ispink,blue: isblue}

数组语法

:class='[a,b]'

绑定style属性

:style="{color: c, fontSize: s}"

计算属性（computed）

简介

原理实现

计算属性的setter和getter

计算属性的缓存

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次

同methods的区别

事件监听（v-on）

作用

绑定事件监听器

缩写

@

参数

三种情况

有形参不加括号

无形参不加括号

有形参有括号

修饰符

.stop

阻止事件冒泡

.prevent

阻止默认事件

监听键盘按键

{.keyCode}

{.keyAlies}

.once

只触发一次回调

.native

监听组件根元素的原生事件

条件判断

v-if

v-else-if

v-else

v-show

和v-if的区别

v-if和v-show都可以决定一个元素是否渲染

v-if当条件为false时，压根不会有对应的元素在DOM中。

v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

作用

用于决定一个元素是否渲染

如何选择

当需要在显示与隐藏之间切片很频繁时，使用v-show

当只有一次切换时，通过使用v-if

作用

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

循环遍历

遍历数组

遍历对象

key属性

作用

高效的更新虚拟DOM

原理

过滤器（filters）

作用

用于一些常见的文本格式化（过滤到你做想要的数据结果格式）

v-model

应用

作用

实现表单元素和数据的双向绑定

原理

v-on结合v-bind

结合radio使用

互斥选择

结合checkbox使用

单选（同意协议）

多选

结合select使用

单选

多选

值绑定

动态更新数据

修饰符

lazy

number

trim

综合案例：购物车案例

三、组件化开发

1.组件化思想

完整的页面拆分为多个组件

单个组件实现某个功能

组件还可进一步拆分

2.注册组件的基本步骤

1.创建组件构造器

Vue.extend({
template: ``
})

2.注册组件

Vue.component(组件标签名, 组件构造器)

3.使用组件

直接使用注册组件绑定的标签名

必须挂载在某个Vue实例下

3.全局组件和局部组件

全局使用

局部使用

4.父组件和子组件

组件树

在父组件注册下的子组件无法在其它没有注册它的组件下使用（包括App）

5.注册组件语法糖

Vue.component('cpn1',{ template:` <div>我是全局注册组件</div>` })

6.组件抽离

将template定义的组件样式进行抽离

方法一：script标签

方法二：template标签

7.组件数据存放问题

1.组件无法直接访问父级和Vue实例的数据

2.组件使用data()函数来存放数据

原因

8.父子组件通信

父级向子级传递数据

props

步骤

1.创建子模版

2.父组件绑定子组件

3.子组件定义props属性

4.父组件定义的子组件标签定义属性绑定父组件数据（v-bind:）

5.子组件使用父组件的数据

类型

数组

对象（常用）

组件命名问题（驼峰命名法）

子级向父级传递数据

自定义事件

子组件通过$emit()触发事件

父组件通过v-on监听子组件事件

流程

1.子组件注册点击事件并将要传递的值作为参数

@click="cclick(item)"

2.通过子组件的methods发送事件

cclick(item){this.$emit('传递给父组件的事件名字', 传递的数据(item)}

3.在绑定的dom节点上将事件传递给父组件

@传递给父组件的事件名='父组件接收的事件名'

4.父组件methods属性处理接收到的子组件事件

父组件接收的事件名(子组件传递的数据){}

加减器案例

父组件直接访问子组件

$children

🔺一般用在需要找到所有子组件的情况下

返回包含所有子组件的数组

$refs

$refs和ref指令通常是一起使用的

步骤

1.我们通过ref给某一个子组件绑定一个特定的ID

2.通过this.$refs.ID就可以访问到该组件了

子组件直接访问父组件

$parent

$root

直接访问根节点

9.插槽

作用

具名插槽

通过定义插槽名将插入内容与插槽一一对应

作用域插槽

编译作用域

通过父组件里拿到子组件插槽的数据并改变值的显示方式

slot-scope

v-slot

1.子组件：<slot name="aaa" :data="fruits"></slot>

2.父组件：v-slot:aaa="message"

3.获取值：{{message.data.join(' * ')}}

四、webpack

1.概念

前端模块化

打包

同grunt/gulp的对比

2.安装

全局安装

局部安装

3.起步过程

1.创建对应的文件夹

2.打包

webpack src/main.js dist/bundle.js

3.index.html引用打包后的文件

4.配置

配置出口和入口

局部安装webpack进行打包的问题

解决方法

1.

2.npm run build

5.Loader

简介

通用使用过程

1. 通过npm安装需要使用的loader

2. 在webpack.config.js中的modules关键字的loaders下进行配置

css-loader、style-loader

less-loader

图片处理

url-loader

file-loader

babel-loader

vue-loader、vue-template-compiler

6.webpack配置vue

配置

resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},

单文件组件

1.loader安装

2.webpack.config.js配置

关注点分离

7.webpack-plugin

简介

是什么

同loader的区别

使用过程

添加版权信息插件

引入

const webpack = require('webpack')

使用

plugins: [
new webpack.BannerPlugin('我是版权信息哈哈哈')
]

打包html插件

安装

npm install html-webpack-plugin --save-dev

引用

const HtmlWebpackPlugin = require('html-webpack-plugin')

配置

plugins: [
new webpack.BannerPlugin('我是版权信息哈哈哈'),
new HtmlWebpackPlugin({
template: "main.html" //模板
}),
],

js压缩插件

安装

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

引用

const Uglifyjs = require('uglifyjs-webpack-plugin')

配置

plugins: [
new Uglifyjs(),
],

本地node服务器插件

安装

npm install --save-dev webpack-dev-server@2.9.1

使用

devServer: { contentBase: './dist/', inline: true, port: 3333 }

参数说明

配置

在package.json文件中可以定义--open直接打开该服务

8.webpack配置文件分离

安装相应插件

npm install webpack-merge --save-dev

引入

const webpackMerge = require('webpack')

文件分离

1. base.config.js（基础）

2. prod.config.js（生产环境）

3. dev.config.js（开发环境）

9.打包文件

app.js

当前应用程序开发的所有代码

mainifest

打包代码的底层支持~联想一下CommonJS AMD CMD标准，使浏览器能识别那些导出导入规则

vendor

第三方框架（bs\axios\vue）代码

五、Vue CLI

简介

特点

安装

npm install @vue/cli -g

创建

vue create 项目名

CLI2

vue init webpack 项目名

可视化界面

vue ui

初始化项目选项

Runtime-Compiler和Runtime-only的区别

render和template

三种使用方式

项目目录

CLI4和CLI2大体一样，但会少了很多文件夹（进行了隐藏处理）

build和dev

npm run build

npm run dev

可以使用vue ui去操作这两个选项

配置查看以及修改

vue ui

可视化界面

添加相关插件以及移除

运行时编译和发布时编译

配置文件位置

node_modules文件夹下

修改文件配置

项目根目录下新建vue.config.js文件

添加相关配置

tabbar案例

六、Vue Router

作用

路由器

概念

广义

狭义

后端路由

前端路由

单页面富应用阶段（SPA）

url→hsah

location.hash = 'url地址'

html5→history

history.pushState({data},'title','url')

history.back()

history.replaceState({data},'title','url')

history.go(n)

history.forward()

安装

方法一：npm install vue-router --save

方法二：创建脚手架时将该选项选上

router文件夹下进行配置

使用步骤

结合笔记

路由默认路径

html5的history模式

router-link样式设置

代码实现路由跳转

$router.push('url')

$router.replace('url')

动态路由（params）

设置

router：index.js

path: '/user/:userid'

App.vue

方法一：路由控件直接跳转

<router-link :to="'/user/'+ userid" tag="button">用户</router-link>

方法二：methods绑定按钮点击事件实现跳转

this.$router.push('/user/'+this.userid)

获取路由信息

<h1>lalala，我叫{{$route.params.userid}}</h1>

路由懒加载

原因

使用

const Home = () => import('../views/Home.vue')

三种方式

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })}

const About = resolve => require(['../components/About.vue'], resolve)

const Home = () => import('../components/Home.vue')

路由嵌套

注意，嵌套路由不能加'/'

✔path: 'news',

×path: '/news',

步骤

1.在需要嵌套的组件定义router-view和router-link标签

2.router中的index.js挂载子组件路由

路由默认路径

{
path: '',
components: HomeMessage
}

参数传递

params

动态路由

query

传递方式

<router-link :to="{path:'/home/message',query:{name:'你好啊',age:19}}" tag="button">消息</router-link>

通过绑定事件

参数获取

params的通过`$route.params`获取数据

query的通过`$route.query`获取数据

$route和$router的区别

$route主要是用来动态获取当前路由 $router是用来获取路由对象

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为当前router跳转对象（动态获取到当前跳转到的路由路径），里面可以获取当前路径的name、path、query、params等

URL

概念

protocol :// hostname[:port] / path / \[;parameters\]\[?query\]#fragment

参数含义

protocol（协议）

hostname（主机名）

port（端口号）

path（路径）

parameters（参数）

query(查询)

fragment（信息片断）

导航守卫

简介、作用

beforeEach钩子函数

前置钩子

afterEach钩子函数

后置钩子

类型

全局导航守卫

路由独享守卫

组件导航守卫

导航解析流程

keep-alive