库和框架的区别:
- 库(如jQuery)
库是工具. 提供大量API，体现了封装的思想、需要自己调用这些API
- 框架
框架提供了一套完整解决方案,
使用者要按照框架所规定的某种规范进行开发
vue的基本操作：
1. body中,设置Vue管理的视图<div id="app"></div>
2. 引入vue.js
3. 实例化Vue对象 new Vue();
4. 设置Vue实例的选项:如el、data...
new Vue({选项:值});
5. 在<div id='app'></div>中通过{{ }}使用data中的数据
el
- 作用:当前Vue实例所管理的html视图
- 值:通常是id选择器(或者是一个 HTMLElement 实例)
- 不要让el所管理的视图是html或者body!
data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
- 可以通过 `vm.$data` 访问原始数据对象
- Vue 实例也代理了 data 对象上所有的属性，因此访问 `vm.a` 等价于访问 `vm.$data.a`
- 视图中绑定的数据必须显式的初始化到 data 中
methods
- 其值为可以一个对象
- 可以直接通过 VM 实例访问这些方法，或者在**指令表达式中使用**。
- 方法中的 `this` 自动绑定为 Vue 实例。
- 注意，**不应该使用箭头函数来定义 method 函数** (例如 `plus: () => this.a++`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.a` 将是 undefined
1. 内容绑定,事件绑定
- v-text:设置标签的文本值
(v-text指令无论内容是什么,只会解析为文本，,简写为{{}})
[很像innerText]
- v-html:设置标签的innerHTML
(内容中有html结构会被解析为标签)
注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
- v-on:为元素绑定事件
(指令可以简写为@,绑定的方法定义在methods属性中,方法内部通过this关键字可以访问定义在data中数据)
2.属性绑定，显示切换
- v-show：根据表达值的真假,切换元素的显示和隐藏（ 原理是修改元素的display,实现显示隐藏，指令后面的内容,最终都会解析为布尔值，数据改变之后,对应元素的显示状态会同步更新）
- v-if：根据表达值的真假,切换元素的显示和隐藏，操纵dom元素
- v-bind：设置元素的属性(比如:src,title,class)[简写的话可以直接省略v-bind,只保留 :属性名]
> 如果需要非常频繁地切换，则使用 `v-show` 较好；
>
> 如果在运行时条件很少改变，则使用 `v-if` 较好。
3.表单元素绑定，列表循环
- v-for:根据数据生成列表结构( 数组经常和v-for结合使用,语法是( item,index ) in 数据,tem 和 index 可以结合其他指令一起使用)
- v-on:传递自定义参数,事件修饰符
修饰符
- `.once` - 只触发一次回调。
- `.prevent` - 调用 `event.preventDefault()`。
> 简写: @事件名.修饰符 = 'methods中的方法名'
- v-model:获取和设置表单元素的值,双向数据绑定
`v-model` 会忽略所有表单元素的 `value`、`checked`、`selected` 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 `data`选项中声明初始值。
### computed和methods
- computed:
- 一旦data中的数据发生**变化**,就会触发计算属性的方法
- 会将data中属性的结果进行缓存,对比缓存中的结果是否发生变化
- methods: 一调用就会触发, 和数据的变化与否无关
axios:功能强大的网络请求库
- axios必须先导入才可以使用
- 用get或post方法即可发送对应的请求
- then方法中的回调函数会在请求成功或失败时触发
- 过回调函数的形参可以获取响应内容,或错误信息
## Vue 生命周期
- vue.init()初始化创建一个实例
- beforecreate，这个时候 el 还没有挂载，data 也没有初始化，可以添加一些 loading 事件
- created，这个时候 el 还没有挂载，但是 data 已经初始化了，可以结束 loading 事件，发出 ajax 请求等
- beforemount，这个时候生成了虚拟的 dom 节点
- mounted，这个时候真实的节点已经形成，页面已经基本渲染完成
- beforeupdate,更新前的一个钩子，dom 中的数据已经改变
- updated，更新完成
- beforedestroy，销毁前的钩子，可以在这里添加销毁的确认弹框
- destroyed，完全销毁，所有的事件监听都会被解绑，生命周期结束，子实例也会被销毁，原生的 DOM 还存在，但数据已经不能够被访问