脚手架
项目搭建工具 通用使用方法 node包 使用步骤 npm install 包名 -g 使用 安装完成会得到一个命令 vue vue @vue/cli vue create 项目名 npm run serve vue.config.js 为什么要用vue文件 更方便维护 js作用域独立 样式配合scoped可以不冲突
插值表达式
语法：{{表达式}} 表达式有哪些 变量 属性 user.name 字符串、数字、布尔类型等等 {{ "小明" }} 四则运算 {{ 10 * 30 }} 方法调用 {{ fn(date) }} 表达式里的变量需要声明，在data方法的返回对象里
MVVM设计模式
是什么 Model Model模型 View 视图 VM 视图模型 双向绑定 为什么用它 可以让我们专注数据，不必关心视图更新，提升开发效率
v-bind
简写， :属性名="值" on 事件监听 监听DOM事件 监听组件事件 $emit("event name", ...arg) @事件名="监听函数" 语法 @click="少量代码" @click="showDialog = true" <input @click="hello" /> hello第一个参数是什么 第一个参数是事件对象 <user-info @change="hello"> hello第一个参数 组件发送的参数
修饰符
阻止冒泡 @click.stop 阻止默认行为 @click.prevent 只绑一次 @click.once @click="fn($event, item.id)"
v-model
作用：双向绑定 修饰符 转数字 v-model.number 去掉左右空白符 v-moidel.trim="'hello world'" 懒触发 对于input，失去焦点更新变量
v-text和v-html
v-text v-html 把内容作为html解析 控制显示
v-if和v-show
v-if会创建、销毁内容 v-show通过控制display属性控制显示和隐藏 v-if可以和v-else-if和v-else
v-for
语法： v-for=" item in list " :key v-for="item in 10" item从1开始 v-for="(value, key) in obj" v-for="str in string" v-for="item of array" key的作用是什么 提升数据对比更新的效率 提升列表渲染性能 动态设置样式 style :style="{ fontSize: '18px' }" class :class="{ 类名: 布尔值 }" :class="[]"
过滤器
Vue.filter("名字", function (){}) {{ date | formatter }}
计算属性
作用：根据一些数据算出来的变量 computed: { } 完整写法 set 更新值 get 读取值 computed: { age() {return 123; } } 特性：依赖变量变化的时候会重新计算 缓存结果，只有依赖变化才重新运算，性能比较好
侦听器
watch: { } watch: { nickname(newValue, oldValue) {}) 完整写法 deep 深度监听，对象、数组 immediate 带着当前的值立即触发 handler 数据变化的时候执行 组件 如何创建组件 一个vue文件就是一个组件 Vue.component 如何使用 局部注册 components: { '名字': 组件 } 全局注册 Vue.component("名字", 组件) 为什么要封装组件 维护性 复用 提升开发效率
组件通讯
父子
:属性名="值" props 数组 对象 type: 类型 required 必传参数 default 默认值 调用子组件方法 this.$refs.child.hello()
子父
子组件只能向父组件发事件 this.$emit('事件名', ...arg) 插槽传数据出来 v-slot:插槽名="变量" 变量.属性就可以获取组件传出来的参数
兄弟
没有直接通讯的机制 两种方式 Event bus Vuex 单向数据流 动态组件 约等于v-if切换组件 keep-alive 作用：缓存组件 什么时候用 当渲染内容开销比较大的时候 避免频繁的创建和销毁组件 为了性能 用的时候注意 组件有两个钩子函数 activated 组件激活的时候 deactivated 失去激活状态的时候触发
插槽
作用 组件内容允许调用者决定 往往是我们需要传入标签显示的时候 怎么用 默认插槽 具名插槽 向插槽传递数据 v-slot:title="scope" scope.age 插槽可以有默认内容，不传就用默认的
生命周期
四个关键生命周期 created 组件创建时 获取数据 mounted 组件挂载到页面上的时候 updated 数据变化引起DOM更新完毕之后 destroyed 组件销毁
axios
作用：封装ajax请求 可以设置全局地址 有时候你的网站和接口是两个地址 http响应头可以指定允许跨域 access-control JSONP 反向代理
配置拦截器
请求 请求的时候统一要做的事情 token 响应 接口返回统一做的事情 refs 用在原生标签上 this.refs.user获取的是组件的实例 调用组件方法 可以读取组件属性 nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
指令
v-开头的属性 v-model v-bind v-on 自定义指令 Vue.directive("指令名", {}) inserted 文档地址：cn.vuejs.org/v2/guide/cu…
路由
什么是路由 地址和内容的一个对应关系 vue-router3 vue 2 vue-router4 vue 3 如何用 配置路由 Vue.use(VueRouter) 配置路由：数组 path 路径 component 要渲染的组件 redirect 重定向 new VueRouter( { routes } ) 实例化 new Vue( { router } ) 注入我们的Vue app里 router-view放置路由挂载点
声明式导航
什么是声明式导航 router-link 本质就是一个a标签 </router-link <router-link :to="{ path: "", query: {} }" path和params不能一起用，否则params会被忽略 name可以和params一起用 query没有限制
编程式导航
什么是编程式导航 用代码跳转 怎么用 router.go router.back
参数传递
两种方式 内嵌方式：/articleDetail/:id route.query.keyword 特殊字符编码 encodeURIComponent decodeURIComponent
模式
hash 路由信息在井号后面 history 没有井号 需要web服务器配置
嵌套
页面部分内容需要跟url建立对应联系，可以使用路由嵌套 组件内放置router-view，是嵌套组件的挂载点 激活的导航有一个专属类名 router-link-exact-active 作用是给激活的路由内容加样式
守卫
router.beforeEach(function() {}) 作用 当你需要在页面跳转前做一些事情，比如阻止跳转，就可以用它 比如，权限验证 比如要收集页面访问情况，也可以用导航守卫
