Vue基础
1、Vue简介
1）JavaScript框架
2）简化Dom操作
3）响应式数据驱动
2、第一个Vue程序
1）导入开发版本的Vue.js
2）创建Vue实例对象，设置el属性和data属性
3）使用简洁的模板语法把数据渲染到页面上
3、el挂载点
1）el是用来设置Vue实例挂载（管理）的元素
2）Vue会管理el选项命中的元素及其内部的后代元素
3）可以选择使用其他的选择器，但是建议使用ID选择器
4）可以使用其他的双标签，不能使用HTML和BODY
4、data数据对象
1）Vue中用到的数据定义在data中
2）data中可以写复杂类型的数据
3）渲染复杂类型数据时，遵守js的语法即可
本地应用
（一）内容绑定，事件绑定
1、v-text
1）v-text指令的作用是：设置标签的内容（textContent）
2）默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
3）内部支持写表达式
2、v-html
1）v-html指令的作用是：设置元素的innerHTML
2）内容中有html结构会被解析为标签
3）v-text指令无论内容是什么，只会解析为文本
4）解析文本使用v-text，需要解析html结构使用v-html
3、v-on
1）v-on指令的作用是：为元素绑定事件
2）事件名不需要写on
3）指令可以简写为@
4）绑定的方法定义在methods属性中
5）方法内部通过this关键字可以访问定义在data中数据
4、计数器
1）创建Vue实例：el（挂载点），data（数据），methods（方法）
2）v-on指令的作用是绑定事件，简写为@
3）方法中通过this关键字，获取data中的数据
4）v-text指令的作用是：设置元素的文本值，简写为{{}}
5）v-html指令的作用是：设置元素的innerHTML
（二）显示切换，属性绑定
1、v-show
1）v-show指令的作用是：根据真假切换元素的显示状态
2）原理是修改元素的display，实现显示隐藏
3）指令后面的内容，最终都会解析为布尔值
4）值为true元素显示，值为false元素隐藏
5）数据改变之后，对应元素的显示状态会同步更新
2、v-if
1）v-if指令的作用是：根据表达式的真假切换元素的显示状态
2）本质是通过操纵dom元素来切换显示状态
3）表达式的值为true，元素存在于dom树中，为false，从dom树中移除
4）频繁的切换v-show，反之使用v-if，前者的切换消耗小
3、v-bind
1）v-bind指令的作用是：为元素绑定属性
2）完整写法是 v-bind:属性名
3）简写的话可以直接省略v-bind。只保留 :属性名
4）需要动态的增删class，建议使用对象的方式
4、图片切换
1）列表数据使用数组保存
2）v-bind指令可以设置元素属性，比如src
3）v-show和v-if都可以切换元素的显示状态，频繁切换用v-show
（三列表循环，表单元素绑定
1、v-for
1）v-for指令的作用是：根据数据生成列表结构
2）数组经常和v-for结合使用
3）语法是 (item,index) in 数据
4）item和index可以结合其他指令一起使用
5）数组长度的更新会同步到页面上，是响应式的
2、v-on补充
1）事件绑定的方法写成函数调用的形式，可以传入自定义参数
2）定义方法时需要定义形参来接收传入的实参
3）事件的后面跟上 .修饰符 可以对事件进行限制
4）.enter 可以限制触发的按键为回车
5）事件修饰符有多种
3、v-model
1）v-model指令的作用是：便捷的设置和获取表单元素的值
2）绑定的数据会和表单元素值相关联
3）绑定的数据 <--> 表单元素的值
4、小黑记事本
1）列表结构可以通过v-for指令结合数据生成
2）v-on结合事件修饰符可以对事件进行限制，比如 .enter
3）v-on在绑定事件时可以传递自定义参数
4）通过v-model可以快速的设置和获取表单元素的值
5）基于数据的开发方式
网络应用
1、axios
1）axios必须先导入才可以使用
2）使用get或者post方法即可发送对应的请求
3）then方法中的回调函数会在请求成功或失败时触发
4）通过回调函数的形参可以获取响应内容，或错误信息
2、axios+vue
1）axios回调函数中的this已经改变，无法访问到data中数据
2）把this保存起来，回调函数中直接使用保存的this即可
3）和本地应用最大的区别就是改变了数据来源
3、回车查询
1）应用的逻辑代码建议和页面分离，使用单独的js文件编写
2）axios回调函数中this指向改变了，需要额外的保存一份
3）服务器返回的数据比较复杂时，获取的时候需要注意层级结构
4、点击查询
1）自定义参数可以让代码的复用性更高
2）methods中定义的方法内部，可以通过this关键字点出其他的方法
综合应用
1、歌曲搜索
1）服务器返回的数据比较复杂时，获取的时候需要注意层级结构
2）通过审查元素快速定位到需要操纵的元素
2、歌曲播放
1）歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注
3、歌曲封面
1）在vue中通过v-bind操纵属性
2）本地无法获取的数据，基本都会有对应的接口
4、歌曲评论
1）在vue中通过v-for生成列表
5、播放动画
1）audio标签的play事件会在音频播放的时候触发
2）audio标签的pause事件会在音频暂停的时候触发
3）通过对象的发送设置类名，类名生效与否取决于后面值的真假
6、总结
1）不同接口需要的数据是不同的，文档的阅读需要仔细
2）页面结构复杂之后，通过审查元素的方法去快速定位相关元素
3）响应式的数据都需要定义在data中
来源：哔哩哔哩
