什么是Vue
构建用户界面
通过vue向html页面中填充数据，开发便捷；
框架
将前端开发沉淀为一套解决方案，程序员根据框架规范，可以直接复用框架去完成业务功能开发；
Vue特性
数据驱动视图
数据变化会驱动视图自动更新；
程序员是需要维护数据，vue会自动根据数据进行渲染；
双向数据绑定
- js数据变化，自动渲染至页面；
- 页面表单采集数据，vue自动获取并更新至js中；
MVVM
MVVM指的是Model、View、ViewModel，它将每个HTML页面拆分为三部分，如图所示：
其中：
Model表示当前页面渲染时所依赖的数据源；
View表示当前页面所渲染的DOM结构；
ViewModel表示vue的实例，也是MVVM的核心；
Vue指令
指令（Direcctives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面数据；
vue中指令按照用途不同可以分为6大类：
内容渲染指令
v-text:将数据内容渲染至标签中，但会覆盖标签内原有内容，实际开发中使用较少；{{}}:Mustache,也叫插值表达式，将表达式中变量内容渲染至页面对应位置；插值表达式只能用在内容节点，不可用在属性节点
v-html:将带标签的数据渲染成真正的html内容；
属性绑定指令
v-bind：为元素的属性实现动态绑定；可简写为冒号:;绑定属性如果为为一个表达式，包含字符串时，字符串需使用单引号包围，否则会当做变量去data中查找；
事件绑定指令
v-on:为事件绑定处理方法，可简写为@;- 事件修饰符：针对事件触发时配置默认行为
prevent：阻止默认行为，如阻止链接跳转、阻止表单提交等；stop:阻止冒泡事件；capture:已捕获模式触发当前事件处理函数；once：绑定事件仅触发一次；self:只有在event.target是当前元素自身时触发处理函数；
- 按键修饰符:根据键盘事件触发响应操作；
esc：键盘按键esc触发对应函数操作；enter：键盘按键enter触发对应函数操作；
- 事件修饰符：针对事件触发时配置默认行为
双向绑定指令
v-model：辅助程序员在不操作DOM情况下，快速获取表单数据;number：将表单输入字符串转换为数字；trim：将表单输入内容去除前后空格；lazy：懒加载模式，当表单失去焦点时进行双向同步；
常用表单元素有
input、textarea、select等
条件渲染指令
v-if：根据条件选择是否显示元素，实现原理为动态添加或移除元素来实现；v-show：根据条件选择是否显示元素，实现原理为对元素动态添加或移除display:none样式来实现；频繁切换元素显示状态，v-show性能较好；
部分元素默认不需要展示，使用v-if加载速度较快；
实际开发一般使用
.vue单文件模式，直接使用v-if即可；
列表渲染指令
v-for：循环遍历数据中列表渲染生成列表元素；官方建议在使用v-for时，最好绑定遍历元素的id值至key；key值绑定必须为数字或字符串，且内容需唯一(索引不具备唯一性);
过滤器
过滤器（Filter）仅可用于vue2.x，常用于进行文本格式化，可用于插值表达式及v-bind中，过滤器应该添加在js表达式尾部，由管道符进行调用；
<script >
//全局过滤器
Vue.filter('Cap', (str) => {
return str.charAt(0).toUpperCase()+ str.slice(1)+'...'
})
//创建vue实例
const vm = new Vue(
{
//指定vm需要控制的页面区域
el: '#app',
//定义需要渲染的数据
data: {
username: 'semon',
brand : 'Bmw'
},
//私有过滤器
filters: {
cap(val) {
console.log(val, val.charAt(0))
const letter = val.charAt(0).toUpperCase()
const res = letter + val.slice(1)
return res
}
}
}
)
</script>过滤器本质是一个有返回值的函数，需在Vue中filters节点中；
过滤器的第一个参数为管道符传递过来的内容，过滤器允许传入多个参数；
过滤器分为全局过滤器与私有过滤器，如果过滤器名字相同，则优先使用私有过滤器；
全局过滤器需在script最上方定义；
过滤器支持串联调用；
侦听器
侦听器(Watch)用于侦测数据变化，从而针对数据变化触发特定操作；侦听器支持函数式与对象式；
<script >
//创建vue实例
const vm = new Vue(
{
//指定vm需要控制的页面区域
el: '#app',
//定义需要渲染的数据
data: {
username: 'semon'
info: {
username: 'admin'
}
},
watch: {
username(newVaule,oldVaule) {
console.log("watch username : " + newVaule + " and oldValue is " + oldVaule)
},
//对象式
username: {
handler(newVaule,oldVaule) {
console.log("obj watch: username : " + newVaule + " and oldValue is " + oldVaule)
},
immediate: true
},
//深度侦听
info: {
handler(newValue,oldValue) {
console.log("deep watch :" + newValue)
},
deep: true
},
//深度侦听变形
'info.username'(newValue,oldValue) {
console.log("deep watch transform: username : " + newValue + " and oldValue is " + oldValue)
}
}
}
)
</script>侦听器本质上也是一个函数，函数名与侦听数据名保持一致；
函数式侦听器无法进入页面立刻触发;
对象式侦听器可以进入页面立刻触发,对象式侦听器支持多层嵌套数据变化侦听；
典型应用场景：注册用户名占用判断
计算属性
计算属性是指通过一系列运算后最终得到一个属性值，得到的属性值可用于模板、方法及指令中使用；
<script >
//创建vue实例
const vm = new Vue(
{
//指定vm需要控制的页面区域
el: '#app',
//定义需要渲染的数据
data: {
r: 0,
g: 0,
b: 0
},
computed: {
rgb() {
return `rgb(${this.r},${this.g}, ${this.b}`
}
},
}
)计算属性按照函数形式定义，使用时直接当做普通属性使用；
能够实现实现代码复用，计算属性来源发生变更，会自动触发重新求值；
axios
axios是一个专注于网络请求的基础库；
<script src="../lib/axios.js"></script>
<script >
const res = axios({
method: 'GET',
url: 'https://petstore.swagger.io/v2/store/inventory',
//get请求传参
params: {
},
//post请求传参
data: {
}
})
res.then(function (inventory){
console.log(inventory.data)
})
</script>使用async修饰，且方法返回值为promise对象，则方法前可用await
