Vue指令—通过vue实现常见的网页效果
 1、内容绑定,事件绑定
 (1)v-text设置标签的文本值/内容(textContent)
 默认写法会替换全部内容,使用差值表达式可以替换指定内容,内部支持表达式。可简写为{{}}
 (2)v-html设置标签的innerHTML
 若是普通文本和v-text没有什么差异,若是html结构,v-html可以被解析为标签去渲染,v-text不行(无论内容是什么,只会被解析为文本)。
 (3)v-on为元素绑定事件,v-on:事件名=”方法名” 或者简写为 @事件名=”方法名”
 点击click,移入monseenter、双击:dbclick(不需要写on了),绑定的方法写在定义的vue的实例的methods属性中。在方法中拿到dom中的数据需要通过关键字this ,方法内部通过this关键字可以访问定义在data中的数据。
2、显示切换、属性绑定
 (1)v-show根据表达值的真假切换元素的显示状态(显示和隐藏)
 原理是修改元素的display样式(但标签一直都在),实现显示隐藏。
 指令后面的内容,最终都会解析为布尔值
 true显示元素,false元素隐藏,同时display值会被修改
 (2)v-if根据表达值的真假切换元素的显示和隐藏(改变的不是样式而是直接操纵dom元素,移除或添加)
 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
 (3)v-bind:设置元素的属性(如:src, title, class),为元素绑定属性
 完整语法:v-bind:属性名=表达式,简写:属性名=表达式
 需要动态的增删class建议使用对象的方式
 案列:图片切换
 定义图片数组、添加图片索引、
 图片的更改本质是图片的src属性被更改了(v-bind)
 图片切换逻辑:改变索引
 事件绑定(v-on)
 第一张和最后一张需要隐藏某个a标签(v-show),显示状态切换
 总结:列表数据使用数组保存
 v-bind指定可以设置元素属性,比如src
 v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
 3、列表循环、表单元素绑定
 (1)v-for根据数据生成列表结构(响应式)
 数组经常和v-for结合使用
 语法是(item,index) in 数据
 item代表每一项数据,index代表索引
 数组长度的更新会同步到页面上,是响应式的
 (2)v-on补充传递自定义参数,事件修饰符
 事件修饰符:https://cn.vuejs.org/v2/api/#v-on
 事件绑定的方法写成函数调用的形式可以传入自定义参数
 定义方法时需要定义形参来接收传入的实参
 事件的后面跟上.修饰符可以对事件进行限制
 .enter可以限制除法的按键为回车
 事件修饰符有多种
 (3)v-model
 作用是便捷的获取和设置表单元素(如:文本框input)的值(双向数据绑定)
 绑定的数据会和表单元素值相关联
 绑定的数据和表单元素值是双向绑定的,无论修改谁,另外一个都会同步更新
网络应用
 Vue结合网络数据开发应用
(1)axios网络请求库(内部是ajax):
功能强大的网络请求库
 Get请求
 axios.get(地址?查询字符串).then(function(response){},function(err){})
 响应成功调用第一个回调函数,失败第二个
 查询字符串格式:key=value&key2=value2
 Post请求:
 axios.post(地址,参数对象).then(function(response){},function(err){})
 数据以对象的形式写在第二个参数内
 参数对象格式:{ key:value,key2:value2}
 可以访问的请求接口(要保证联网状态):
 (2)axios+vue
 Axios回调函数中的this已经改变,无法访问到data中的数据
 解决办法:把this保存起来,回调函数中直接使用保存的this去获取即可
 和本地应该最大的区别就是改变了数据来源
总结:axios必须先导入才可以使用,使用get或post方法即可发送对应的请求,then方法中的回调函数会在请求成功或者失败时触发,通过回调函数的形参可以获取响应内容或错误信息。
 Axios官方文档传送门:https://github.com/axios/axios