vue学习（1）——基本指令

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