目录
一、Vue基本常识
Javascript的渐进式框架
@vue/cli是vue官方提供的全局模块包，用于创建脚手架项目
脚手架好处：开箱即用，webpack0配置
全局安装@vue/cli yarn global add @vue/cli
创建脚手架项目 vue create vuecli-demo 项目名不能有大写字母，中文和特殊符号
选择模板和包管理器
启动服务 yarn serve
项目构架
main.js 项目打包的主入口---Vue初始化
App.vue Vue页面主入口
index.html 浏览器运行的文件
修改运行的端口号
src并列处，新建vue.config.js,填入配置，重启webpack开发服务器
关闭eslint检查
module.exports={
devServer:{
port:3000,
open:true //浏览器自动打开
},
lintOnSave:false //关闭eslint检查
}单vue文件的好处：
Vue推荐使用.vue文件来开发项目
template里只能有一个根标签
js独立作用域互不影响
style配合scoped属性，保证样式只针对当前template内标签生效
MVVM设计模式
model 数据层
view 视图层
viewmodel Vue源码层
二、vue命令
插值表达式
又称为声明式渲染/文本插值， 在dom中，直接插入vue数据变量
{{表达式}}
v-bind
给标签属性设置vue变量的值
v-bind:属性名=”vue变量” 简写 :属性名=”vue变量“
v-on
给标签绑定事件
v-on:事件名=”要执行的少量代码”
v-on:事件名=”methods中的函数名”
v-on:事件名=”methods中的函数名（实参）”
简写：@事件名=”methods中的函数”
vue事件处理函数，拿到事件对象
语法 无传参，通过形参直接接收
传参，通过$event指代事件对象传给事件处理函数
@事件名：修饰符=”methods里的函数”
修饰符 .stop 阻止事件冒泡
.prevent 阻止默认行为
.once 程序运行期间，只触发一次事件处理函数
.enter 按下回车键
.esc 按下取消键
v-model
v-model=”vue数据变量”
数据变——>视图变
视图变——>数据变
表单的value属性的vue变量实现双向绑定
但是当遇到复选框 如果vue变量是非数组 关联的是复选框的checked属性
数组 关联的是复选框的value属性
v-model.修饰符=”vue数据变量”
修饰符： .number 以parseFloat转换成数字类型
.trim 去除首尾空白字符
.lazy 在change时触发而非input时，失去焦点内容改变时，触发
v-text和v-html
v-text=”vue数据变量”
v-html=”vue数据变量”
注意：他们会覆盖插值表达式
v-show和v-if
v-show=”vue数据变量” 隐藏用的是display:none(频繁切换）值是布尔型 true是显示，false是隐藏
v-if=”vue数据变量” 隐藏是直接从dom树上移除（移除） 值是布尔型 true是显示，false是隐藏
v-if 可以配合v-else和v-else-if使用
v-for
想要谁循环，放到谁身上 in两边必须有空格
v-for =”（值变量，索引变量）in 目标结构” （item，index） obj (value,key)
v-for=”值变量 in目标结构”
目标结构：可以遍历数组/对象/数字 数字时，从1开始、
v-for的临时变量名不能用到v-for范围外
v-for更新监测
变更方法才会导致v-for更新，页面更新n
变更方法pop()、 push()、 shift()、 unshift()、splice()、sort()、reverse()
不会更新：filter()、concat()、slice()、map() 可采用将原数组赋值为新数组的值
数组转换reverse()会让v-for更新
截取slice（）不会让v-for更新
更新某个值的时候，v-for检测不到 可采用this.$set() 参数1：更新的目标结构，参数2：更新的位置，参数3：更新的值
用v-bind
给标签class设置动态的值 :class=”{类名：布尔值}”
给标签动态设置style的值 :style=”{css属性名：值}”
二、DOM+diff
Vue采用虚拟DOM+diff算法提高性能
虚拟DOM
本质：保存dom关键信息的js对象
（回流：当页面中的元素的大小或是位置等发生改变，浏览器会根据改变对页面的结构重新计算）
（重绘：当页面中元素的背景、颜色改变引发浏览器对元素重新描绘）
diff同级比较
根元素改变-删除重建整个DOM树
根元素不变-属性改变更新属性
根元素不变-子元素/内容改变
无key,最大限度尝试就地修改/复用相同类型的元素
有key,值为索引
基于key来比较新旧虚拟dom，移除key不存在元素
先产生新旧虚拟DOM，根据key比较，还是就地更新
有key,值为唯一不重复的字符串或数字
基于key的来比较新旧虚拟DOM，移除key不存在的元素
key的取值：有id用id 无id用index
三、过滤器
过滤器只能用在，插值表达式和v-bind动态属性里
Vue.filter(“过滤器名，（值）=>{return “返回处理后的值”} 全局
filters:{过滤器名字:（值）=>{return “返回处理后的值”}} 局部
filters:{过滤器函数}
过滤器的使用：无参数：vue变量|过滤器名字
有参数：vue变量|过滤器（实参）
使用多个过滤器 vue变量|过滤器1|过滤器2
四、计算属性
计算属性computed{
“计算属性名”(){
return”值”
}
}
计算属性也是vue数据变量，所以不要和data里重名，用法和data相同
计算属性的优势是带缓存，当计算属性对应函数执行后，会把return值缓存起来，若依赖项不变，多次调用都是从缓存取值，若依赖项值变化，自动重新执行并缓存新的值。
计算属性完整写法
computed:{
“计算属性名”：{
set(值){} //给计算属性赋值触发set方法
get(){ return 值} //使用计算属性的值触发get方法
}
}
五、侦听器 watch
可以侦听data/computed属性值的改变
watch:{ //变量名对应值改变这里自动触发
“被侦听的属性名”（newVal,oldVal){
}
}
侦听复杂类型，或者立即执行侦听函数
watch:{
“要侦听的属性名”:{
immediate:true, //立即执行
deep:true, //深度侦听复杂类型内的变化
handler(nweVal,oldVal){
}
}
}
vue组件
全局注册--------main.js import 组件对象 from “vue文件路径’
Vue.component(“组件名”，组件对象)
局部注册------某.vue文件内 import 组件对象 from ‘vue文件路径’
components:{
“组件名”:组件对象
}
scoped 作用过程：
当前组件内标签自动添加data-v-hash值属性，所有选择器都带data-v-hash值属性选择器
单向数据流： 从父到子的数据流向
子组件修改，不通知父级，造成数据不一致
Vue规定props里的变量是只读的
组件通信
父传子
(父引入子，被引入的是子） 父：App.vue 子：MyProduct.vue
- 子组件内，props数组内定义变量，准备接收，
- 父组件内，使用子组件，属性方式给props变量传值进去
父传子 循环使用 每次循环，变量和组件都是独立的
子传父
1.父组件内，绑定自定义事件和事件处理函数
@自定义事件名=”父methods里的函数名”
2.子组件触发父自定义的事件方法
this.$emit(“父组件自定义事件名”,传给父组件函数名参数的实参)
跨组件通信(兄弟）
创建空白vue对象----监听和触发
空白对象------>eventBus.$on(‘事件名’，函数体)
eventBus.$emit(‘事件名’，值)----->空白对象
- src/EventBus/index.js -----创建空白对象并导出 导入时只导入到EventBus步骤即可
- 在要接收值的组件 eventBus.$on(‘事件名’，函数体)
- 在传递值的组件 eventBus.$emit(‘事件名’，值)
组件名/组件文件名都以大写英文开头
Vue生命周期
从创建到销毁的整个过程
钩子函数 ： vue框架内置函数，随着组件的生命周期阶段，自动执行
作用：特定的时间点，执行特定的操作
场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据
分类:
阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed
初始化
- new Vue() Vue实例化（组件也是一个小的Vue实例）
- Init Events&Lifecycle 初始化事件和生命周期函数
- beforeCreate 生命周期钩子函数被执行
- Init injection&reactivity vue内部添加data和methods等
- created 生命周期钩子函数被执行，实例创建
- 接下来是编译模板阶段 开始分析
- Has el option? 是否有el选项 检查要挂到哪里
没有，调用$mount()方法
有，继续检查template选项
挂载
1.template选项检查
有 编译template返回render渲染函数
无 编译el选项对应标签作为template（要渲染的模板）
2.虚拟化DOM挂载真实DOM之前
3.beforeMount 生命周期钩子函数被执行
4.Create 把虚拟化DOM和要渲染的数据一并挂到真实的DOM上
5.真实DOM挂载完毕
6.mounted 生命周期钩子函数被执行
更新
- 当data里的数据改变，更新DOM之前
- beforeUpdate 生命周期钩子函数被执行
- Virtual DOM 虚拟DOM重新渲染，打补丁到真实DOM
- updated 生命周期钩子函数被执行
- 当有data数据改变 重复这个循环
销毁 手动移除全局事件 移除当前组件、计时器、定时器、eventBus移除事件$off方法
- 当$destory()被调用 比如组件DOM被移除（例v-if）
- beforeDestory 生命周期钩子函数被执行
- 拆卸数据监视器、子组件和事件侦听器
- 实例销毁后，最后触发一个钩子函数
- destoryed 生命周期钩子函数被执行
341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
