尚硅谷：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=1
计算属性可以实现的功能（computed），监听属性都可以实现(watch)
监听可以实现的，计算属性不一定可以实现，但是如果两种都可以的时候，推荐使用计算属性
**v-for 与 key 使用index索引 或者对象唯一值id的区别：
是否改变数组的顺序？
（不改变，都一样），
改变使用唯一值id
而且使用唯一值，页面渲染效果更好，能更好的复用页面元素！！！
**
目录
vue初识
模板语法
插值语法（标签体）
{{}}
指令语法（标签属性）
v-bind：---> ： （标签属性等）
数据绑定
单向数据绑定（v-bind）
双向数据绑定（v-model）
el与data的两种写法
MVVM模型
数据代理
1、defineProperty方法
var number = 18
var person = {
name: '张三',
sex: "男"
}
// 给对象新增属性（第一种写法）
Object.defineProperty(person,"age",{value: 18, writable: true,enumerable: true,configurable: true})
// 给对象新增属性（第二种写法）
Object.defineProperties(person,{age: {value: 18, writable: true,enumerable: true,configurable: true}})
// 给对象定义方法，设置、获取值
Object.defineProperty(person,"age",{set(value){console.log("设置");number = value},get(){console.log("获取");return number}})
事件处理
写到data中的，最后都会做数据代理；
写到method中，就不会数据代理，直接绑定到vm上；
事件修饰符
event.preventDefault 取消事件（如果该事件可取消）。
event.stopPropagation 停止冒泡，阻止事件在 DOM 中继续冒泡。
事件捕获与冒泡
一般是在冒泡阶段进行事件处理
滚动事件scroll与wheel的区别
scroll是页面滚动条滚动会触发的事件，而wheel是鼠标滚轮滚动会触发的事件。
一旦滚动条到底部后，滑动鼠标滚轮继续滚动，wheel就会一直触发，而scroll不会触发。
键盘事件
计算属性
vue 普通属性 放到 data中
计算属性 放在computed中
计算属性的简写：（只读不改才可以使用简写）计算属性的目的是为了计算出来后，使用的，或者说是页面呈现，很少会进行修改，所以可以简写！！！
监视属性
监视属性
监视属性，深度监视
监视属性简写
只有handler方法的时候，可以进行简写。
计算属性与监听（侦听）属性对比
绑定css样式
页面中的一个div 只能有一个class 如果出现多个，以第一个为准！！！
style 定义样式的时候，使用驼峰命名法，例如：font-size ---> fontSize
条件渲染
VSCode中 按住Alt 可以选中多行
有多个判断的时候，一般使用div包裹，但是会改变页面结构，推荐使用 template 最后渲染的时候，不会改变页面结构！！！但是template只能配合 v-if 不能配合 v-show
列表渲染
persons or personList or personArr
<!-- 遍历数组 -->
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} - {{p.age}}
</li>
</ul>
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}} - {{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value,key) in car" :key="key">
{{key}} - {{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<ul>
<li v-for="(value,key) in 'hello'" :key="key">
{{key}} - {{value}}
</li>
</ul>
<!-- 遍历次数 -->
<ul>
<li v-for="(number,key) in 5" :key="key">
{{key}} - {{number}}
</li>
</ul>
key的原理
在 v-for 中， key是vue内部的属性，会被vue使用，但是最后在页面dom中不会显示
但是如果把key 换成其他（如a），就会在页面中的dom节点上出现(a)
key的原理 以及虚拟dom的 对比算法 问题
根据图中显示，这种条件下，key值使用index就是不合理的，应该使用 对象中的标识 作为key
diff ===》 对比
如果你写v-for的时候没有定义key的时候，vue自动使用index作为key值，与第一种情况就是一样的了！
列表过滤
字符串的indexOf方法中 空串也返回0，而不是-1
"abcd".indexOf("a") 0
"abcd".indexOf("") 0
代码折叠的一些实现方式
//# region
//#endregion
可以使用weatch，也可以使用计算属性
使用watch的代码
使用计算属性的代码
计算属性 依赖于 keyword ，keyword变化，一定会重新计算，返回新的数组！！！
列表排序
更新时的一个问题
vue监测数据的原理
vue监测对象的改变原理
vue获取值 a.b a存在，b不存在，不报错，undefault 页面不显示
vue 获取值 a a不存在，就会直接报错！
image.png
Vue.set(目标对象，添加属性，属性值) 可以定义响应式数据
vm.$set(目标对象，添加属性，属性值) 也可以定义响应式数据
set方法的局限性：
set可以给data中的对象增加属性，但是不能直接给data增加属性！！！
vue监测数组的改变原理
调用那7个改变数组的方法是可以被vue监测到的！！！
原理是vue 包装了一套方法，这一套方法和数组的方法名是一样的，但是它做了2件事情，第一件就是调用原数组方法，第二件就是重新解析模板，并进行后续操作,如重新渲染dom操作等！！！
image.png
var arr = [1,3,5,7,9]
arr.push === Array.prototype.push true
vm.data.arr.push === Array.prototype.push false
总结
数据劫持：
就是把原来的数据对象转为包含getter和setter方法的新对象，就是数据劫持！
主要是为了做数据的监控，如果数据被修改了，就会重新做 模板解析。
收集表单中的数据
账号与input框关联，使用label标签中的for与input中的id对应
<label for="demo">账号</label>
<input id="demo" value="" type="text"/>
input type为text 或password的时候，直接获取value值即可
input type为redio时候，必须设置value值，并且必须设置name作为一组数据，vue获取的是value中的值。v-model绑定到每个redio上
input type为checkbox的时候，如果没有指定value，vue直接获取的就是checked的值，为true或false，必须设置为数组，v-model绑定到每个checkbox上
select 正常使用 option中设置value值即可。v-model绑定在select上
textarea 正常，v-model绑定到textarea上
表单提交的默认行为是刷新页面，有时候我们需要阻止这种操作
（1）@submit.prevent="submit"
（2）在方法中，使用e.preventDefault()，阻止默认事件
v-model的修饰符
<input type="number" v-model.number="age" />
// number：输入框的值，默认是字符串，可以通过修饰符，限制输入值的类型
<textarea v-model.lazy="other" />
// lazy：表示不再实时的收集数据，只有在失去焦点的时候才会收集数据！
<input type="text" v-model.trim="username"/>
// trim：表示获取数据的时候去前后空格处理！只是数据变化，页面还是原来的展示形式！
过滤器
cdn地址：BootCDN https://www.bootcdn.cn/
处理时间的第三方库：moment.js day.js
过滤器的本质就是方法
| 是管道符的意思
三种时间格式化方法
过滤器传参说明
过滤器可以多个一起使用，串联起来！上一个的结果传入下一层作为参数。。。
局部过滤器与全局过滤器
全局过滤器定义必须在vue实例创建之前！！！
内置指令
v-html 安全问题
cookie 按照网站分类
cookie是浏览器存在硬盘里的东西，刷新也不会丢！
插件 cookie-Editor 可以管理cookie，可以批量导出、导入cookie
js阻塞
加载js的时候，其他代码不运行，js必须加载完成后才会继续执行，所以会造成页面加载时间过长，白屏问题。所以一般需要加载的js 放在body中，而不是head中。
v-cloak指令：
v-once指令
v-pre指令：跳过所在节点的编译过程
跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑
自定义指令
自定义指令的命名规则
简写方法
// 对象，键值对的形式
'big-number':function(){
console.log("---------------执行方法")
}
// 简写（去掉：，去掉function）
'big-number'(){ // 一个单词，可以省略‘’
console.log("---------------执行方法")
}
自定义指令中，方法中的this指向window，不是VM
定义自定义局部指令，自定义全局指令
Vue.directive('指令名',"对象")
或者
Vue.directive('指令名',简写方法)
directives:{
'指令名'(element,binding){
console.log(element,binding) //元素，绑定的对象
}
}
或
directives:{
'指令名':{
bind(element,binding){}, // 第一次元素与数据绑定调用
inserted(element,binding){}, // 第一次元素插入页面时候调用
update(element,binding){} // 元素所在模板重新渲染时候调用
}
}
生命周期
对象的简写形式
:style="{opacity: opacity}" ---> 同名简写 :style="{opacity}"
实现一个代码定时显示隐藏的功能：
方法一：定义一个data数据， 在js中写定时器，修改 data中的数据。
const vm = new Vue({
el:'#demo',
data:{
opacity:1
},
})
setInterval(()=>{vm.opacity-=0.01; if(vm.opacity<=0){vm.opacity=1}},18)
方法二：定义一个methods，在js中调用methods中的方法。
const vm = new Vue({
el:'#demo',
data:{
opacity:1
},
methods:{
change(){
setInterval(()=>{this.opacity-=0.01; if(this.opacity<=0){this.opacity=1}},18)
}
}
})
window.onload=function(){vm.change()}
方法三：定义一个methods，在页面中调用该方法，结果死循环了，无限调用定时器。
{{change()}}
const vm = new Vue({
el:'#demo',
data:{
opacity:1
},
methods:{
change(){
setInterval(()=>{this.opacity-=0.01; if(this.opacity<=0){this.opacity=1}},18)
}
}
})
方法四：使用vue的生命周期函数实现！（最佳）
{{change()}}
const vm = new Vue({
el:'#demo',
data:{
opacity:1
},
mounted(){
setInterval(()=>{this.opacity-=0.01; if(this.opacity<=0){this.opacity=1}},18)
}
})
打断点的代码：debugger
