Vue的初步学习---基础

VUE 数据都没有！你设置个屁的指令啊 先给数据再设置指令
我们需要改变我们的思维 重点关注在数据上
数据更新后 数据对应的元素 会同步更新
this可以获取被实例化的vue对象的元素下的所有东西 从而拿到数据
可以通过this关键字访问定义在data中的数据
vue呢 是通过控制数据从而去控制元素 而不是直接DOM元素

都是现在vue实例中进行 定义 然后再将其添加到页面的元素中进行渲染

vue.min.js跟vue.js的差别
vue.js 开发环境版本，包含了有帮助的命令行警告。
vue.min.js 生产环境版本，优化了尺寸和速度

el（挂载点）data（数据）methods（方法）
VUE指令就是以 v- 开头的特殊语法

v-text指令 简写成 {{}} Mustache标签 (胡子)
作用是 设置标签的内容 默认会替换全部内容
内部支持写表达式 无论内容是什么都只会解析成文本

v-html指令
设置标签的innerHTML 内容中有html结构就会被解析成标签
就是在一个标签内添加 HTML文本会被解析成标签

v-on指令 可以简写成 @事件名="方法"
作用是 为元素绑定事件 格式是 v-on:事件名="方法" 事件名不需要写on
绑定的方法写在 vue 实例中的 methods 属性中
传参@click="doit('666','777')参数一二
在methods中 doit:funciton(p1,p2){}
在事件的后面添加 .修饰符 可以对事件进行限制 例
@keyup="方法名" 按任意键都可以触发方法
可以使用@keyup.enter 按enter键触发 enter是keyup的属性

v-show指令 用的多的时候用 操纵的是display属性
根据表达式的真假，切换元素的显示和隐藏 操纵的是display属性
当后面的值为 false时 该元素中的display属性将被设置被display:none
v-show="true" v-show="isShow" v-show="age>=18"
无论v-show="内容" 中内容为什么 它都会被解析为Boolean值

v-if指令 用得少的时候用 操纵dom树
根据表达式的真假，切换元素的显示和隐藏 直接操纵元素而不是属性
改标签跟v-show大致相同 也是表达式 被解析成boolean类型
当为true时 元素存在 当为false时 元素将直接被删除 直接操纵dom树
当操作的次数比较多的时候用v-show 操作次数较少用v-if 前者消耗的小些

v-bind指令 可简写成 :
用来绑定设置元素的属性的 比如src、title、class
在设置类的时候更推荐用 对象的方式 对象定义在data中
:class="{active:isActive}" 通过判断后面的 isActive 再给类名赋值
等同于三元表达式 :class="isActive?'active':''" isActive在vue实例的data中
伪类 :active点击 :hover划过

在图片切换实例中
列表数据可以使用数组保存 图片
通过下标来判断 v-show 左切换右切换

v-for指令 根据数据生成列表结构 响应式 数组会同步更新到dom树
v-for="item in arr" arr时定义在data中数组 数组经常跟v-for结合使用
v-for="(item,index) in arr" item是数组中的值 index是值对应的下标
同一元素可以结合其他指令一起使用 并可以直接使用对应的数据

v-model指令 获取和设置表单元素的值（双向数据绑定）
双向：你更改页面上的或者data中的数据 都会同步更新 并不会修改源代码

v-pre指令 使标签内编译成原本的样子
v-cloak指令 写在挂载点的元素中的属性 防止让用户看到vue未解析前的html代码
当vue解析之前 div中就有一个属性叫v-cloack 解析后v-cloak就没了
在style中加上一个[v-cloak]{dispaly:none;} （了解一下）

arr.splice(index, num) splice方法 从第几个索引开始 删除几个
后面还可以给参数 用于添加元素到第index个元素前

网络应用 Vue结合网络数据开发应用 axios+vue
他与本地应用的不同点是 data中的数据有一部分是从网络中获取到的
axios(网络请求库) 内部就是ajax 但是通过封装后用起来更加便捷
axios是一个功能强大的网络请求库 js库
作为js库 首先我们需要导包 确保在有网的状态下
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
在引入后 他会在页面上注册一个全局的axios对象 来发送请求
axios.get(提供的接口地址?查询字符串key=value&key2=values).then(function(response){},function(err){})
axios.post(提供的接口地址,{查询字符串key:value,key2:values}).then(function(response){},function(err){})
前者用来接收数据 err是错误 里面的参数response和err都可以获取到
axios里面的this会变 但在axios外部可以获取到vue的this
我们就可以将this赋值给that var that = this

ajax和axios的优缺点对比
ajax：
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务
axios：
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作
————————————————
Promise API 简介
译者注: 到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部。
Promise 直译为“承诺”，但一般直接称为 Promise;
代码的可读性非常重要,因为开发人员支出一般比计算机硬件的支出要大很多倍。
虽然同步代码更容易跟踪和调试, 但异步方式却具有更好的性能与灵活性.怎样在同一时刻发起多个请求, 然后分别处理响应结果?
Promise 现已成为 JavaScript 中非常重要的一个组成部分, 很多新的API都以 promise 的方式来实现。