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

网址

es6常用语法

变量的定义

var变量的提升

const常量的定义

let块级作用域

模板字符串

变量 ${}

箭头函数

类比python的匿名函数lamda let fun2 = x => x+1; console.log(fun2(5))

this

普通函数取决于函数最近的调用者

箭头函数取决于当前上下文的环境

数据的解构

对象

let{key,key}=obj

数组

let [x,y,z]=array

定义类

class

构造方法 constuctor

继承 extends

子类没有this 需要用super方法找到父类的this

vue的常用指令 都是等于一个变量   声明一个Vue对象在data中写变量

v-text

innerText

v-html

innerHtml

v-for

v-if v-else-if v-else appendChild

v-show

display

v-bind

绑定属性简写：

v-on methods

绑定事件简写@

v-model

数据的双向绑定

vue指令修饰符

.lazy 懒加载

.number

自定义指令

Vue.dirctive("指令名称", function(el, binding){ el 绑定指令的标签元素 binding 指令的所有信息组成的对象 value 指令绑定数据的值 modifires 指令修饰符 })

.trim

获取DOM

给标签加ref属性 ref=‘xxxx’ this.$refs.xxxx

计算属性

computed 放入缓存当数据改变的时候才会重新执行计算 跟data中数据的区别

数据的监听  watch去监听

字符串

监听到改变新的值和旧的值不同的

数组

-- 只能监听到长度的变化新旧值相同的 -- 改变数组值的时候监听不到 必须用$set(array, index, value) 新旧值相同的

对象

vue组件

全局注册 任何Vue实例里用 <组件名称></组件名称>

-- Vue.component("组件名称", { template: `只识别一个块级作用域`, data(){ return{ name: xxxx } }, methods: {}, })

局部注册 <div><组件名称></组件名称></div>

-- let com_config = {.....} -- const app = new Vue({ el: "#app", components: { 组件名称： com_config } })

子组件的注册 -- 在父组件的template里展示子组件 <child></child>

在父组件里 components: { 子组件的名称：子组件的配置信息 }

通信

父子通信

先给子组件绑定属性 在子组件通过props:["属性名称"]

子父通信

-- 子组件先提交事件 this.$emit("事件名称"， data) -- 父组件给子组件绑定事件 自己处理这个事件

非父子通信

-- 定义一个中间调度器 let Event = new Vue(); -- 其中一个组件向中间调度器提交事件 Event.$emit("事件名称", data) -- 另一个组件要监听中间调度器里的事件 Event.$on("事件的名称", function(data){ 注意this的问题 })

混合

-- 复用共用的代码块 -- mixins: [base]

插槽

-- 实现组件内容的分发 -- slot -- 直接用slot标签 -- 命名的slot -- 先给slot加name属性 -- 给标签元素添加slot属性= name属性值

vue的路由    $route 路由的所有信息组成的对象

注册

<ol><li>定义一个匹配规则对象 let url = [ { path: "/", component: { } } ] </li></ol>

2.实例化VueRouter对象 并把匹配规则注册进去 let router = new VueRouter({ routes: url })

3. 把VueRouter实例化对象注册Vue的根实例 const app = new Vue({ el: "#app", router: router })

router-link router-view

子路由的注册

在父路由里注册children: [{},{}]

在父路由对应的组件里的template里 写router-link router-view

路由的命名

name -- 注意to一定动态绑定 :to="{name: ''}"

路由的参数

this.$route.params.xxxx this.$route.query.xxxx

手动路由

this.$router.push("/course") this.$router.push({name:'', params:{},query: {})

钩子函数

router.beforeEach(function(to, from, next){ to 你去哪里 from 你从哪里来 next 你接下来要做什么 }) 路由的重定向

router.afterEach(function(to, from){})

Vue的生命周期

子主题

Vue的生命周期

　beforecreated ：el 和 data 并未初始化

　created：完成了data数据的初始化 el 没有

beforeMount：完成了el 和 data的初始化

mounted：完成了挂载

beforeupdate

updated

beforedestroy  触发了destroy相关的钩子函数，也就是说组件被销毁~ 更改message的值~DOM中的值不变~也就是说DOM元素依然存在只是不受vue控制了~~

destroyed

npm,webpack,vue-cli

node.js npm

Node.js 就是运行在服务端的JavaScript， 基于Chrome V8 引擎的。

node -v查看node的版本

npm

npm 是Node.js 的包管理工具。

npm init -y

输入-y使用默认配置项生成package.json文件

 安装npm install xxxx@0.0.0

卸载 npm uninstall

列出已安装的依赖 npm list

npm -v 查看npm版本信息

模块打包器webpack

默认的入口文件 手动创建的src/index.js

默认的出口文件 dist/main.js

全局安装 npm install webpack webpack-cli -g -D

模式区分· webpack --mode development/ production

development 开发者模式打包默认不压缩代码

production 生产者模式上线时使用，压缩代码。默认是这个模式

vue-cli

脚手架帮助我们搭建Vue项目的

下载

npm i vue-cli -g

搭建项目

vue init webpack 项目名称

项目的启动

cd 项目目录下 npm run dev

vue-cli项目目录

build 打包后存放的所有文件包括配置文件 config 配置文件 node_models 依赖包 src 工作目录 static 静态文件 index.html 单页面应用 package.json 存放所有项目信息

路由的解耦

下载 npm i vue-router -- 导入 import VueRouter from "vue-router" -- Vue.use(VueRouter) -- 定义匹配规则url -- 实例化VueRouter -- 把VueRouter对象注册到Vue的根实例里

vuex axios

vuex

下载 npm i vuex

store文件夹index.js 注意： 每个组件存放仓库中的数据用计算属性

import Vuex from "vuex" import Vue from "vue"

Vue.use(Vuex) export default new Vuex.Store({ state: { 存放所有的公用数据 } })

getters

getters 给state中的数据做二次处理的

{ 数据名称：function(state, getters){ return state.xxx + "文周" } }

-- 组件中得到getters中数据 this.$store.getters.xxxx

mutations

任何一个组件想要修改仓库中的数据必须告诉仓库 -- 给仓库提交事件 this.$store.commit("事件名称", data)

mutations: { 事件名称: function(state, data){ state.xxx = data } }

main.js

import store from "store文件夹index.js"

把store注册到Vue的根实例里 new Vue({ el: "", router, store })

axios

下载 npm i axios

导入 import axios from "axios"

加入Vue的原型链 Vue.prototype.$axios = axios

在每个组件里发送请求 this.$axios.request({ url: 接口地址， method: 请求方式 data: 请求数据 headers：请求头 }).then(function(data){}) .catch(function(data){})

跨域

原因 浏览器的同源策略进行阻拦

解决办法

JsonP 利用浏览器同源策略不阻止src的请求

中间件定义mycore允许通过

简单请求

复杂请求