2021-06-02

web开发常见高级特性：
解耦视图与数据
可复用组件
前端路由
状态管理
虚拟DOM

MVVM模式：
低耦合、可重用性、独立开发

Vue.js开发模式：
单文件组件形式与webpack结合
单文件组件：
Vue.js自定义的.vue文件，包含HTML、CSS、JS代码到一个文件，实现对组件的封装。
一个.vue就是一个单独的组件。浏览器识别不了，在webpack构建时需安装vue-loader对.vue解析。
VS code中也需安装Vetur增加对文件支持。
< template>中为HTML代码

Vue实例与数据绑定：
new Vue({
el: ‘#app’, //提供页面上已存在的DOM元素为Vue实例挂载目标，可为CSS、HTMLElement实例。
//在次为id=app的元素中
router, //router:router的简写
components, //包含Vue实例可用组件的哈希表
template}) //模板替换挂载元素

插值表达式：
{{ }} 模板语法（Mustache语法）-前端模板引擎
大括号中数据替换为对应属性展示，绑定
插值表达式可写内容： JSON数据、数字、字符串、插值表达式（加减三目等）

生命周期：
实例对象从构造函数开始执行（被创建）到被GC（garbage collection）回收销毁的整个存在时期
在生命周期中被自动调用的函数叫做生命周期函数，也称生命周期钩子函数。用于完成不同周期操作。
beforeCreate、created、beforeMount等！！

class与style绑定：
v-bind指令绑定class类名或style
绑定class：对象、数组语法 ：class
绑定style： 内联样式 ：style

前端与服务端通信：
connect-moke-middleware工具
Mock.js语法模拟前端页面数据
利用Axios获得模拟的API接口数据
snail mock工具