vue-quick-start-in-4-hours
视屏[4个小时带你快速入门vue]学习笔记，B站链接。
文件名为 sample.html 是我手打的联系，模版.html是官方给的模版文件，示例.html是官方给的完成版，只有比较复杂的练习有模版和示例文件。
项目虽然做完了，但是感觉如果是全栈开发，页面设计这个门面工作还是很重要。这个课程主要是在已经设计好的模版上怎么使用Vue做交互的，做的时候播放器案例的UI界面倒是让我印象很深的说(´▽｀)
实验环境
IDE：VSCode 插件：live server
一些*操作
- VSCode 中，在html文件里输入
!+ 回车，可以快速生成网页模版
Note04
- el用来设置Vue实例挂载(管理)的元素
- Vue会管理el选项命中的元素及其内部的后代元素
- 可以使用其他选择器，但建议使用ID选择器
- 可以使用其他双标签，不能使用Html和Body
Note05
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据
- 渲染复杂类型数据时，遵守js的语法即可
Note07
- v-text 指令的作用是：设置标签的内容（textContent）
- 默认写法会替代全部内容，使用 差值表达式 {{}} 可以替换指定内容
- 内部支持写表达式
Note08
- v-html指令的作用是：设置元素的innerHTML
- 内容中有 html 结构会被解析为标签
- v-text指令无论内容是什么，只会解析为文本
- 解析文本用 v-text，需要解析 html 结构使用 v-html
Note09
- v-on 指令的作用是：为元素绑定时间
- 事件名不需要写 on
- 指令可以简写为 @
- 绑定方法定义在 methods 属性中
- 方法内部通过 this 关键字可以访问定义在 data 中数据
Note10
- 创建 Vue 示例时：el(挂载点)，data(数据)，method(方法)
- v-on 指令的作用是绑定事件，简写为@
- 方法中通过this,关键字获取data 中的数据
- v-text指令的作用是：设置元素的文本值，简写为{{}}
- v-html 指令的作用是：设置元素的 innerHTML
Note11
- v-show 指令的作用是：根据真假切换元素显示状态
- 远离是修改元素的 display, 实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为 true 元素显示，值为 false 元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
Note12
- v-if 指令的作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom 元素来切换显示状态
- 表达式的值为 true, 元素存在于 dom 树中，为 false， 从 dom 树中移除
- 频繁的切换用 v-show, 反之使用 v-if，前者的切换消耗小
Note13
- v-bind 指令的作用是：为元素绑定属性
- 完整写法是 v-bind：属性名
- 简写的话可以直接省略 v-bind,只保留：属性名
将图片保存在本地加快加载速度
Note14
- 列表数据使用数组保存
- v-bind指令可以设置元素属性，比如 src
- v-show 和 v-if 都可以切换元素的显示状态，频繁切换用v-shows
Note15
- v-for 指令的作用是：根据数据生成列表结构
- 数组经常和 v-for 结合使用
- 语法是 (item, index) in 数据
- item 和 index 可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
Note16
- 事件绑定的方法写成 函数调用 的形式，可以传入自定义参数
- 自定义方法时需要定义形参来接受传入的实参
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制出发的按键为回车
- 事件的修饰符有多种
Note17
- v-model 指令的作用是便捷的设置和获取表单元素的值
- 绑定的数据会和表单元素值相关联
- 绑定的数据 <-> 表单元素的值
Note19
- v-for 指令的作用
- v-model 指令的作用
- v-on 指令的作用
- 通过审查元素快速定位
Note20
- 数据改变，和数据绑定的元素同步改变
- 事件的自定义参数
- splice 方法的作用
Note21
- 基于数据的开发方式
- v-text 指令的作用
Note 23
- 列表结构可以通过 v-for 指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制，比如 .enter
- v-on 在绑定事件时可以传递自定义参数
- 通过 v-model 可以快速的设置和获取表单元素的值
- 基于数据的开发方式
Note25
- axios 必须先倒入才可以使用
- 使用 get 或 post 方法即可发送对应的请求
- then 方法中的会调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容或错误信息
Note26
- axios 回调函数中的 this 已经改变，无法访问到 data 中的数据
- 把 this 保存起来，回调函数中直接使用保存的 this 即可
Note28
- 应用的逻辑代码建议和页面分离，使用单独的 js 文件编写
- axios 回调函数中 this 指向改变了，需要额外的保存一份
- 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
Note29
- 自定义参数可以让代码的复用性更高
- methods 中定义的方法内部，可以通过 this 关键字点出其他的方法
Note31
- 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
- 通过审查元素快速定位到需要操纵的元素
Note32
- 歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注
Note33
- 在 vue 中通过 v-bind 操纵属性
- 本地无法获取的数据，基本都会有相应的接口
Note34
- 在 Vue 中通过 v-for 生成列表
Note35
- audio 标签的 play 事件会在音频播放的时候触发
- audio 标签的 pause 事件会在音频暂停的时候触发
- 通过对象的方式设置类名，类名生效与否取决于后面值的真假
Note36
- 不同的接口需要的数据是不同的，文档的阅读需要仔细
- 页面的结构复杂之后，通过审查元素的方式去快速定位相关元素
- 响应式的数据都需要定义在 data 中