vueB站笔记

vue简介：
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动

el:挂载点
vue实例的作用范围：Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用ID选择器
可以使用其他的双标签，不能使用HTML和BODY

data:数据对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

Vue指令
v-text：设置标签的文本值
默认写法会替换全部内容
使用差值表达式{{}}可以替换指定的内容
内部支持写表达式

v-html：设置标签的innerHTML
内容中有html结构会被解析成标签
v-text指令无论内容是什么只会解析成文本
解析文本使用v-text
需要解析html结构使用v-html

v-on：为元素绑定事件
v-on:事件名=“方法”/@事件名=“方法”
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中数据

v-show：根据表达式的真假，切换元素的显示和隐藏
原理是修改元素的display，实现显示隐藏
指令后面的内容，最终都会解析成布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对于元素的显示状态会同步更新

v-if：根据表达值的真假，切换元素的显示和隐藏（操纵dom元素）
当表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换v-show，反之使用v-if，前者的切换消耗小

v-bind：设置元素的属性
完整写法是v-bind：属性名
简写的话可以直接省略v-bind，只保留 :属性名
需要动态的增删class建议使用对象的方式

v-for：根据数据生成列表结构
数组经常和v-for结合使用
语法是（item,index）in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-on补充：传递自定义参数，事件修饰符
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上 .修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

v-model：获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素值相关联
绑定的数据 <- -> 表单元素的值

axios
功能强大的网络请求库

axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})

axios必须先导入才可以使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息

axios回调函数中的this已经改变，无法访问到data中数据
把this保存起来，回调函数中直接使用保存的this即可
和本地应用的最大区别就是改变了数据来源

应用的逻辑代码建议和页面分离，使用单独的js文件编写
axios回调函数中this指向改变了，需要额外的保存一份
服务器返回的数据比较复杂时，获取的时候需要注意层级结构

自定义参数可以让代码的复用性更高
methods中定义的方法内部，可以通过this关键字点出其他的方法

服务器返回的数据比较复杂时，获取的时候需要注意层级结构
通过审查元素快速定位到需要操纵的元素