1 class样式写法：:class="xxx" xxx 可以是字符串、对象、数组。 所以分为三种写法，字符串写法，数组写法，对象写法 字符串写法适用于：类名不确定，要动态获取 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用 12345678910111213141516171819202

github.com/fengshi123/blog 啥是真实 DOM？真实 DOM 和 虚拟 DOM 有啥区别？如何用代码展现真实 DOM 和 虚拟 DOM 参考大佬：https://juejin.cn/post/6844903895467032589 真实DOM和其解析流程webkit 渲染引擎工作流程图 所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —&g

1 v-if 写法： v-if=”表达式” v-else-if=”表达式” v-else=”表达式” 适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除 特点：不展示的 DOM 元素直接被移除 注意：v-if 可以和 v-else-if、v-else 一起使用，但要求结构不能被“打断” template 标签不影响结构，页面 html 中不会

v-for 指令 用于展示列表数据 语法：<li v-for=(item, index) in xxx :key="yyy">，这里 key 可以是index，更好的是遍历对象的唯一标识 如果 key 写的是 index，前面可以不写 index 也能用 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少） 1234567891011121314151

1 问题演示先来个案例引入一下： 1234567891011121314151617181920212223242526272829303132333435<!-- 准备好一个容器--><div id="root"> <h2>人员列表</h2> <button @click="updateMei">更新马冬梅的信息</butto

v-model 双向绑定的一些注意1 收集表单数据 若：<input type="text"/>， 则 v-model 收集的是value 值，用户输入的就是 value 值。 若：<input type="radio"/>，则 v-model 收集的是value 值，且要给标签配置 value 值。 若：<input type

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。 语法： 注册过滤器： 全局过滤器：Vue.filter(name,callback) 局部过滤器：new Vue{filters:{}} 使用过滤器：{\{ xxx | 过滤器名1 }} 或 v-bind:属性 = "xxx | 过滤器名2" 示例：<div>{\{myData | fi

1 内置指令之前学过的指令： 语法 含义 v-bind 单向绑定解析表达式，可简写为* : v-model 双向数据绑定 v-for 遍历数组 / 对象 / 字符串 v-on 绑定事件监听，可简写为 @ v-show 条件渲染 (动态控制节点是否展示) v-if 条件渲染（动态控制节点是否存存在） v-else-if 条件渲染（动态控制节点是

1 引出生命周期生命周期 又名生命周期回调函数、生命周期函数、生命周期钩子 是什么：Vue 在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 生命周期函数中的 this 指向是 vm 或 组件实例对象 12345678910111213141516171819202122232425262728293031<div id="ro

1 模块与组件、模块化与组件化 模块 理解：向外提供特定功能的 js 程序，一般就是一个 js 文件 为什么：js 文件很多很复杂 作用：复用、简化 js 的编写，提高 js 运行效率 组件 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…） 为什么：一个界面的功能很复杂 作用：复用编码，简化项目编码，提高运行效率 模块化 当应

1. Vue CLI 初始化脚手架 Vue脚手架是Vue官方提供的标准化开发工具（开发平台） 最新的版本是 4.x 文档 Vue CLI 1.1 具体步骤 如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org 全局安装 @vue/cli npm install -g @vue/cli 切换到创建项目

1 ref属性 ref 被用来给元素或子组件注册引用信息（id的替代者） 应用在 html 标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象vc 使用方式： 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School> 获取：this.$ref

WebStorage（js 本地存储）存储内容大小一般支持 5MB 左右（不同浏览器可能还不一样） 浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制 相关API xxxStorage.setItem('key', 'value'): 该方法接受一个键和值作为参数，会把键值对添加到存储中

1.组件编码流程 组件化编码流程： 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用： 一个组件在用：放在组件自身即可。 一些组件在用：放在他们共同的父组件上（状态提升）。 实现交互：从绑定事件开始。 props 适用于： 父组件 ==> 子组件 通信 子组件 =

一种组件间通信的方式，适用于 任意组件间通信。 使用步骤： 安装 pubsub：npm i pubsub-js 引入: import pubsub from 'pubsub-js' 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的 回调留在A组件自身。 1234567methods:{ demo(data){......}}

1.props适用于的场景:父子组件通信 注意事项: 如果父组件给子组件传递数据(函数):本质其实是子组件给父组件传递数据 如果父组件给子组件传递数据(非函数):本质就是父组件给子组件传递数据 书写方式:3种 123['todos']{type:Array}{type:Array,default:[]} 特殊情况：路由传递props

1. $nextTick这是一个生命周期钩子 语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 比如编辑按钮使文本变成表单且自动获取焦点。点击表单时会用一个布尔值配合v-show使表单显示，可是改变布尔值的时候，后面的focus方法

vue项目常用的两个Ajax库 axios：通用的Ajax请求库，官方推荐，效率高 vue-resource：vue插件库，vue 1.x使用广泛，官方已不维护 下载 vue-resource 库 npm i vue-resource src/main.js 12345678910111213141516171819//引入Vueimport Vue

1.Vue脚手架配置代理本案例需要下载 axios 库npm install axios 配置参考文档 Vue-Cli devServer.proxy vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的vue字段，但是注意这

插槽(slot)插槽是什么？ 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。 作用：让父组件可以向子组件指定位置插入html