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

生命周期

created

在实例创建完成后被立即调用。

mounted

渲染整个视图之后运行的代码

updated

updated数据发生改变

destroyed

实例销毁

DOM

el：

Vue 实例挂载目标,只在用 new 创建实例时生效。

类型：string | element

详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

template：

字符串模板，被使用会代替挂载元素

创建

cd day+tab
vue create +项目名
选择你的配置
创建方式(manually select features 手动) choose vue version，babel，router，vuex

基础

MVVM模式

MVVM是Model-View-ViewModel的简写

它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

MVVM中 ViewModel是核心，ViewModel提供了两个主要的功能，DataBindings（数据绑定）和DOM Listeners(DOM监听);Model指的是数据部分，对应到前端就是Javascript对象,View指的是视图部分，对应到前端就是DOM,ViewModel就是连接视图和数据的中间件

渐进式框架

侵入式框架

如果在使用该框架时，要继承框架提供的实体类或实现框架提供的接口，这就说明该框架是侵入式框架，因为程序本身对框架有了依赖，当去除框架时，程序也就无法运行，这个也就是我们说的重量级框架

非侵入式框架

非侵入式框架是轻量级框架的重要特点

数据/选项

data

Vue实例数据对象，组件的定义必须是function

类型：Object | function

props

用于接收父组件的数据，数组或者对象。props是专门获取父组件传递信息的，只需定义声明类型

应用子组件绑定一个属性用来获取父组件信息
s_f_message 绑定之后为了能够生效一定在子组件中定义
因为是组件标签，所以默认会认为是父组件传递的信息，所以必须使用props接收(详情看day15_vue_templatee视频)(第四周第一天)

类型

String、Number、Boolean、Array、object、Date、Function、Symbol(表示独一无二的值，定义对象唯一属性名)

computed

计算属性，将被混入到Vue实例中。结果会被缓存，依赖不变化不会重新计算。

计算属性的方法直接在mustache语法中直接写名字即可方法的调用是没有缓存的，每一次调用都执行计算属性中有缓存，如果重复调用可以直接取缓存的值，节省资源

在处理数据的时候是有缓存的，多次使用的时候也只会调用一次，性能比较高。

methods

方法;方法中的 this 自动绑定为 Vue 实例。

调用几次就执行几次，性能较低。

类型：{ [key: string]: function }

mustche语法

ES6增强写法

如何区分是ES6的写法

{name,age} 对象存放单个值，意味着一定增强写法

必须允许key就是变量名字

可省去:function

let 定义的是变量
const 定义的是常量

axios（详情看第四周day05）

Jquery的ajax获取数据

回调函数方式

$.ajax({ url:'', dataType:'', type:'', data:{}, success:function(res){ //第二个ajax需要第一个ajax的返回和作用域处理数据 } })

回调地狱

需要发送多个异步请求并且每个请求之间需要相互依赖

解决：Promise

跨域

vue.config.js

// 跨域配置
module.exports = {
devServer: {//记住，别写错了devServer//设置本地默认端口  选填
port: 9876,//更改自己前端项目端口
proxy: {//设置代理，必须填
'/api': {//设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:8080',//代理的目标地址
changeOrigin: true,//是否设置同源，输入是的
pathRewrite: { //路径重写
'/api': ''//选择忽略拦截器里面的单词}      }    }}}

axios.get('/api/UserController/findUserList')

组件

基本

const xxx= Vue.extend({
template:'<标签>xxx<标签>'
})

脚本区域：定义初始化组件

注册组件 * 参数1 给当前组件起一个标签名称 * 参数2 注册组件的名称

Vue.component("xxx",xxx);

全局组件

所有地方都可以使用

局部组件

不同点是组件存在父子关系，在一个组件中注册另一个组件

components

在组件中注册组件的时候使用，可注册多个

全局组件-语法糖
Vue.component("comm",{
template:`<div>组件</div>`
})

component

组件创建+注册的过程中使用，只能注册一个

template(模板)

需要给模板起id

数据处理

data(){return{}}、data:function(){return{}}、data:

data数据有三种写法 data:属性的方式，这种方式在没有组件的时候可以正常使用。 data(){return{}} ES6增强写法的方法形式，在组件使用的过程中，可能存在一个组件有多个地方都引用，如果使用data属性的方式会造成数据污染。为了避免这个问题。可使用方法进行返回，方法的特性是每次调用都是重新初始化。 data:function(){return{}} 和ES6增强写法意义一样，只不过是ES6之前的写法

父传子通讯驼峰问题

父子通讯的桥梁 v-bind:fatherMessageToSon --传递不了 v-bind:father-message-to-son --转化后可以传递

例：<son v-bind:father-message-to-son="fatherMessage"></son>

props:{fatherMessageToSon:{}}为v-bind:前传递的，后="" 为数据

父组件操作子组件

父组件向子组件传递方法，使用的是事件绑定机制，v-on 当我们自定义一个事件属性之后，那么子组件就能够通过某些方法来调用，传递进去的这个方法了

操作 $children[0]是通过索引去读取子组件，不精准.

$refs  人性化方式
          this.$refs.abc.son_message='嘿嘿'
          this.$refs.abc.son_method()

子组件操作父组件

//操作 $parent 弊端

//$root  -合理
              this.$root.f_message='吼吼'
              this.$root.f_method()

子传父$emit

触发调用发射

<son v-on:son_event_diy="from_son_method"></son> 第一个参数自定义方法名，第二个参数需要传的值

emit传递父组件中的方法，并且子组件向父组件传递消息

this.$emit('son_event_diy','我是子组件传递来的信息')

常用指令

条件语句

v-if

本质是通过操纵dom元素来切换显示状态

v-show

v-show会渲染标签，如果条件不满足，会使用display:none，原理是修改元素的display，实现显示隐藏。值为true，元素显示。

循环语句

v-for

(item,index) in 数据；数组长度的更新会同步到页面上，是响应的

事件处理

v-on (简写@)

属性绑定

v-bind (简写:)

方法中通过this，关键字获取data中的数据

v-once

对解析的元素或者组件只渲染一次,不跟随表达式

v-pre

不解析nustache语法并原样输出,不跟随表达式

斗篷

v-cloak

设置不显示未渲染的标签

表单双向数据绑定

v-model (语法糖)

.lazy

v-model在每次input事件后触发事件
同步，添加lazy转为change之后. 每次输入都会触发绑定事件去绑定值，效率底

.trim

自动过滤输入的首尾空白字符

.number

输入值转为数值类型。.number将输入转换成Number类型。.number做一次类型转化,也有html type=number的功能

辅助我们转化类型。例：<input type="text" v-model.number="xxx">

v-text

更新元素的 textContent ，通常使用
<p>{{ msg }}</p>代替<p v-text="msg"></p>

设置元素的文本值

v-html

设置元素的innerHTML

双向绑定

v-model

绑定的数据--表单元素的值

路由

前后端渲染和前后端路由

阶段一：原始阶段：演示：JSP后端渲染和后端路由（URL） JSP+Servlet项目

阶段二：前后台分离阶段(半分离状态--主要目的不使用JSP) 演示：前端渲染+后端路由 html+ajax请求（前端） + 后端（SSM）

阶段三：单页面富应用阶段（SPA），主要特点在前端基础之上再加一层路由。。 SPA：simple page web application

别忘了配置地址映射

每一个经过路由的组件都可以获取到当前的路由对象

路由基本使用

<router-link>

是vue中内置的一个组件，渲染后会转化为a链接标签

to属性，指定跳转的路径；custom v-slot，指定router-link能渲染成指定标签

例】<router-link to="/Home" custom v-slot="{ navigate }">2 <button @click="navigate" role="link">首页</button>3</router-link>

<router-view>

会根据当前的路径，动态渲染出不同的组件

动态路由

目的实际为了传递参数

例】<router-link :to="'/user/'+userName" >用户</router-link>

路由懒加载

{

path: '/user/:userName',

component: () => import('../components/User')
}

会默认进路由懒加载，系统会在使用这个路由的时候再执行加载操作

npm run build 查看dist目录

v-slot

<template v-solt:footer="message"></tempalte>后边是插槽名称，=后边是组件内部绑定作用域值的映射

其他

计算 calc；vw,vh
1vh=1%高度

弹性布局

flex布局

flex-direction属性控制项目排列方向与顺序
取值：row(默认) | row-reverse | column | column-reverse

flex-wrap属性用于控制项目是否换行
取值：nowrap(默认) | wrap | wrap-reverse

flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

align-items属性控制项目在纵轴排列方式
取值：flex-start | flex-end | center | baseline | stretch(默认)

align-content

控制多行项目的对齐方式，如果项目只有一行则不会起作用

项目属性

order 取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

flex-grow 取值：默认0，用于决定项目在有剩余空间的情况下是否放大

flex-shrink 取值：默认1，用于决定项目在空间不足时是否缩小

flex-basis 取值：默认auto，用于设置项目宽度

flex 取值：默认0 1 auto

align-self

表示继承父容器的align-items属性。如果没父元素，则默认stretch。

justify-content:center与align-items:center