7-10周一

视频：尚硅谷 Js：现代JavaScript教程文档：官方文档

Vue是什么

Vue是一套用于构建用户界面的渐进式框架。

Vue的特点

采用组件化的模式：

将一个功能、一个模块封装成一个.Vue文件（里面包含HTML、Css、Js），例如推荐模块，新闻模块
这样可以方便以后引用这个文件，或者对某个文件进行修改时，不会对其他组件的样式之类的产生有影响

声明式编码：

命令式编码是，你去先怎么怎么做，再怎么怎么做
声明式编码是，你去帮我把什么什么做了，然后他自己发动自己的主观能动性去做成

使用虚拟Dom和Diff方法

就是在代码对文档进行修改的时候，先不直接修改Dom，而是先创建一个虚拟Dom，然后再去修改Dom
如果有新的数据修改，那么肯定会生成新的虚拟Dom，他会和旧的Dom进行Diff算法对比，然后复用相同的，加上新加的

学习Vue之前必须掌握的知识：

Es6语法规范和模块化
包管理器
原型，原型链：大致看了一眼www.bilibili.com/video/BV1ci…
数组常用方法
axios
promise

渲染进DOM

在JS里创建一个Vue实例，并传入配置对象（el和data）new Vue（{el：'CSS中的选择器' data：{当作对象，里面是属性}}）
其中，el是指定这个Vue实例绑在相应的容器模板上
容器可以称为模板，因为模板上有很多需要Vue去修改的东西，她只是一个类似雏形的东西，当被Vue实例选择的时候，Vue进行解析，解析容器里面自己的语法，进行修改之后，解析完生成新的容器，替换掉刚才的容器。需要注意：

容器和组件一一对应，不能一对多，也不能多对一
容器里的花括号里可以写JS表达式，不能写JS代码（表达式是一个值，就是等用等号赋给左面的，代码可能就是if（）for（）什么的），并且{{}}可以读取data里面的所有属性
响应式，一旦数据发生改变，那么Dom也会一并更新
真实开发中只会有一个Vue实例，配合着组件一起使用 ~~后续会讲~~

模板语法

读取data里面的所有属性，但是小心多级结构，比如data里面有一个套娃对象school：{}那么模板语法就不能直接访问school里的属性而是只能访问到school这一个属性

插值语法

前文学的{{}}，就是把指定的值插入到指定的位置中，{{xxx}}，xxx是js表达式
用于解析标签体，标签体（起始标签和结束标签之间）中用插值语法

指令语法

插值语法没法在标签里面动态的声明需要被修改的属性

v-bind：可以绑定一个属性，使里面的值变为js表达式（v-bind可以简写为：）
可以解析标签属性
用于解析标签体（包括标签属性，标签体，实践）
好多东西你不去用指令语法去解析，那他就只是一个字符串
单向绑定（v-bind）：只能从data流向页面
双向绑定（v-model）：不仅能从data流向页面还能从页面流向data
v-model:value 可以简写为v-model:因为默认收集的就是value
双向绑定只能应用到表单类的带输入的

el和Data的两种写法

el可以直接写在Vue实例里面，也可以在实例外面用v.$mount('#id')后者比较灵活
data的两种写法：第一种对象式data：{} 第二种函数式data：function（）{}
后续只用函数式，函数式可以简写为data（）{}（但是必须有返回值），注意不能写成箭头函数
只要是Vue管理的函数，就必须不能写箭头函数

理解MVVM

M：model 模型：data里的数据
V：view 视图：对应未被解析的模板 Dom 中间的代理商，里面包括（dom listener和data blindings）一般用vm绑定
VM：视图模型：Vue实例对象可以访问代理人的东西，包括代理人代理的东西和代理人自己的东西

Object.defineproperty

这个好像需要ES6的知识，暂且搁置，大概理解就是数据代理那一块的知识

数据代理

通过一个对象，对另一个对象里的属性进行操作（读/写）

let obj1={x:100};
let obj2={y=200};
Object.defineproperty（obj2通过谁，x操作谁{
get（）{
return obj.x把他叫出去，让obj代理
}
set(value){
obj.x=value
}
}）

相当于一个租房中介obj2，房东把房子交出去（return obj.x）我们就能通过中介（obj2）对房子（x）进行修改
vue中，vm就是中介，data就是房东，const vm=new vue（{}）创建vue实例就是房东把房子交给中介代理
data交给vm的数据被保存在vm里的_data里 ~~大概理解了后续再看一遍，还有数据劫持什么的~~

事件处理

使用v-on（当什么时候）：click（事件）（事件点击的时候）="xxxxx"（干这个事）绑定事件，事件的回调要写在methods（配置事件的回调）对象中（xxxx是对象的方法），其实把方法写在data里也可以，但是会让vue太累

不要用箭头函数，vue里的this一般都是指向vm的，你要用箭头函数就是指向windows了
methods里的事件回调最终还是会出现在vm上
methods里配置的函数都是被vue管理的，最终都是指向vm或实例对象
v-on：click可以简写为@click
v-on：click="xxxxx"可以写为v-on：click="xxxxx（传的参数，$event）"
想传参就加，不想传参就不加

~~event不太会，默认的~~

事件修饰

常用

@click.prevent：阻止默认事件（比如说标签自动跳转）
@click.stop：阻止事件冒泡（比如最外层盒子有一个，里面按钮有一个，他发生两次，阻止的话最外层不用组织，其他都得组织==阻止）
@click.once：事件只发生一次不常用

capture ：使用事件捕获模式（JS原生知识）
self：只有event.target操作元素是当前元素的时候才触发
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

~~后三个没听~~

键盘事件

keyup触发场景：当用户按下键，再次抬起时，被触发
keydown触发场景：当用户按下键时，立刻被触发

~~这章简单一听~~

事件的另外两个技巧

事件修饰符可以连写@click.prevent.stop（又阻止默认又阻止冒泡，有先后但是都差不多）
键盘事件中，如果要绑定ctrl+a之类的，可以直接@keyup.ctrl.a（后面再加一个a）

计算属性

vue认为，data里的东西就叫属性proptery
计算属性：用已有的属性，去加工去计算生成一个=个全新的属性

vue中把属性和计算属性分开放放在computed：{}中格式：computed：{ fullname:{ //get方法是当fullname被读取时调用get方法，返回值作为fullname的值 get(){ return this.1+ ‘-’+this.2（this是指向vm的） } } } 必须得加this！！！！！！！！
有一个缓存，第一个调的是get，后续就不用再调了，或者依赖数据发生变化的时候调用get
一上来帮你调一下
注意，vm上的并不是fullname，他是调用get方法后的返回值，名字叫fullname，
所以直接读取fullname即可，不用fullname.get（） 修改fullname需要调用set方法，和get类似，也是在computed的fullname中

总结

~~这一块大概懂了，但是得细看，比如说this那一块~~

计算属性的简写

确定了是只读不改的时候才可以简写
就是把fullname：{}改写为函数形式fullname（）{} ，{}里面写get的代码，其他都不变。

监视属性

watch：{ 监视的谁：{ handler（newvalue，oldvalue）{} } }

除了handler，还有一个配置是immediate，默认是false，这个配置是当页面打开据立即执行一次

深度监视

监视多级结构的某一属性的时候直接监视那个对象然后.属性，例如：number.a

但是这里报错了，因为 number.a不是系统的值，咱们之前写的所有的都是简写的，正确的应该是'number.a'
所以正确写法是 'number.a'：{ handler（）{} } 但是如果不是监视某个属性的变化而是只要有属性的变化都进行监视呢？
以为是那就不用number.某个属性了，而是直接number不就行了，但是不对，举个例子，监视是监视的number的那个房子（地址），你房子里的东西变化了也就变化了，只要你房子不变就行。所以number：{}是不行的
那么就要引入深度监视的知识，写一个deep：true
但是但是，你房子里的东西怎么变其实Vue是能检测到的，但是检测不到的是watch，是Vue认为大多数业务并不会使用到深度监视，所以默认没给你watch深度监视的权力