Vue运行原理：
Vue框架将vue语法编译成原生js语法
MVVM设计思想：
M：model，提供数据
V：view，展示页面，本质即DOM
VM：View-Model，控制逻辑
Vue模版语法
1.插值
作用：前端渲染，即将数据填充到html标签中
- {{ }} 有闪动问题（插值表达式）
- v-text 填充纯文本，没有闪动问题，建议使用（数据绑定指令）
- v-html 填充html片段，容易导致XSS攻击，有安全隐患。本网站内部数据可用，来自第三方的数据不可用
- v-pre 填充原始内容，跳过编译过程
2.指令
本质：自定义属性
格式：以v-开头
v-cloak指令：
作用：解决插值表达式存在的闪动问题
原理：先隐藏，替换好值后再显示最终的值
[v-cloak]{
display:none
}
<div v-cloak>{{message}}</div>
v-once
作用：只编译一次
应用场景：如要显示的内容后续不需要再修改，使用v-once可提高性能
v-model
双向数据绑定：
数据发生变化时，页面内容会跟着变化
用户通过表单域修改内容时，数据也会跟着变化
底层原理：
<input v-bind:value='msg' v-on:input="msg=$event.target.value">
<input type='text' v-model='msg'/>
v-on
作用：事件绑定
<input type='button' v-on:click='num++' />
<input type='button' @click='num++' />
<button @click="say">say</button> //直接跟函数名，默认会传递事件对象作为事件函数的第一个参数
<button @click="say(‘hel’,$event)">say</button> //调用函数,传入参数时，$event事件对象必须放在最后显示传递，固定是$event
事件修饰符号：
.stop: 阻止冒泡
.prevent: 阻止默认行为(如链接跳转)
v-bind
作用：绑定属性
<div v-bind:id='one'></div>
<div :id='one'></div> //简写
样式绑定-class
<div v-bind:class="{active:isActive,error:isError}" ></div> //对象语法
<div v-bind:class="[activeClass,errorClass]"></div> //数组语法
class绑定细节：
1.对象和数组语法可以结合使用
2.class绑定的值可以放到vue实例中
3.默认的class会保留
分支结构v-if和v-show
v-if控制元素是否渲染到页面，v-show控制页面是否显示
v-for循环
遍历数组或对象，item in items形式
建议v-for 与key搭配使用，用来vue区分元素，提高性能
v-for=‘(v,k,i) in obj’
Vue常用特性
1.表单操作
<input type="text">
<input type="radio">
<input type="checkbox">
<option value=""></option>
<textarea name="" id="" cols="30" rows="10"></textarea>
表单修饰符：
- number ：转化为数值
- trim ：去掉开始和结尾的空格
- lazy ：将input事件转为change事件（v-model指令默认触发的是input事件，input事件会时刻监控输入框数据变化，change失去焦点时才触发）
注意事项：
<input type="submit" value="提交"> //提交按钮默认会刷新页面
可通过事件修饰符阻止默认的提交行为，实际场景中用ajax提交
<input type="submit" value="提交" @click.prevent="handle">
2.自定义指令
3.计算属性
当表达式逻辑比较复杂时。使用计算属性会使模版内容更加简洁。
计算属性和方法的区别：
计算属性是基于它们的依赖（指的就是data中的数据）进行缓存的，对于耗时操作可以提高性能
方法不存在缓存
4.侦听器
应用场景：
当数据发生变化时执行异步或开销比较大的操作
5.过滤器
作用：格式化数据（eg：日期格式化为指定格式）
格式：
Vue.filter('过滤器名称',functiong(value){过滤业务})
6.vue实例生命周期
- 挂载
1.beforeCreate
2.created
3.beforeMount
4.mounted - 更新（元素或组建变更）
1.beforeUpdate
2.updated - 销毁（销毁相关属性）
1.beforeDestroy
2.destroyed
VUE-组件化开发
全局组件注册：
Vue.compent('组件名称',{
data:组件数据,
template:组件模版内容
})
注意事项：
- data必须是一个函数
- 组件模版内容必须是单个根元素
- 组件模版内容可以是模版字符串（用反单引号包含），需要浏览器提供支持，es6语法。
- 组件名称命名规则：使用短横线连接，或使用大驼峰，对于驼峰命名方式，只能在字符串模板中使用组件，普通的标签模板中必须使用短横线方式
局部组件注册：
var ComponentA = {} //同上述全局注册方式中的第二个参数一致
new Vue(){
el:'#app',
components:{
component-a：ComponentA
}
}
局部注册的组件只能在注册它的父组件中使用
前后端交互
Promise用法
1.异步效果分析
- 定时任务
- ajax
- 事件函数
2 多次异步调用结果分析
- 多次异步调用的结果不确定
- 异步调用结果如果依赖则需要嵌套
3 Promise
Promise是异步编程的一种解决方案。语法上看，Promise是一个对象，从它可以获取异步操作的消息。
使用Promise好处：
- 避免多层异步调用嵌套问题
- Promise对象提供了简介的api，操作更加容易
4接口调用fetch
基本特性：
基于Promise实现
数据获取方式更加简单，可看作是ajax的升级版
语法结构：
fetch(url).then(f2)
.then(f3)
......
.catch(fn)
Vue路由
路由的本质就是对应关系
开发中路由分为：前端路由和后段路由
后端路由：根据用户的不同url请求，返回不同的内容。本质就是URL请求地址与服务器资源之间的对应关系。