【笔记】vue2.0构建功能特性整理

仅为个人笔记~，比较老了

一、构建配置

1. 插件安装

1. npm i vue-cli -g //安装脚手架
2. vue init webpack mypro //创建项目
3. npm i axios vue-axios //数据请求
4. npm i vue-router //路由
5. npm i vue-lazyload //图片懒加载
6. npm i scroller //页面滚动
7. npm i element-ui //UI框架
8. npm i clipboard //复制粘贴

2. 目录结构

主要为src下目录

assents //静态资源目录
components //组件
main.js //主js
app.vue //入口组件
router //路由相关
api //接口相关
common //公共js
pages //相关页面
store //状态管理vuex

3.准备事项配置

• 热启动
  启动项目时自动打开浏览器
  
• 代理服务器
  处理跨域调试
  

二、vue简单使用

1.指令

1. v-html //相当于innerHtml，渲染标签
2. v-test //相当于{{}}，渲染文本
3. v-bind // 相当于:src,绑定数据属性
4. v-on //相当于@，绑定上事件。
5. v-cloak //防止数据闪烁
6. vue.directive //自定义指令
7. v-if //条件判断，每次显隐，重绘dom
8. v-show // 视觉上显隐，不重绘

2.生命周期

• 初始化阶段

1. beforeCreate：实例初始化后，$route对象存在，可根据路由信息重定向操作。数据监视观测之前。可做加载动画。
2. created：实例创建完成之后。数据观测，属性算法回调完成。挂载还没开始$el，this.data和methods可用。开始在内存中绘制虚拟DOM。
   结束加载，请求数据过多，会白屏，关键部分请求放这。
3. beforeMount：挂载dom开始之前。render执行中有$el，但为空，无法操作DOM。
4. mounted：挂载之后调用。元素渲染完成，创建vm. el，依赖DOM的代码放这。也可以用来数据请求。

• 更新显示阶段

5. beforeUpdate：$vm.data更新后，虚拟DOM重新渲染之前调用，可以修改$vm.data，不会触发附加的重渲染过程。
6. updated：虚拟DOM重新渲染之后。组件和data更新，可以操作DOM，但不能修改data，不然死循环。
7. activated： keep-alive激活时被调用。
8. deactivated：keep-alive停用时调用。

• 死亡销毁阶段

9. beforeDestroy：实例销毁之前。还是可以用的，哈哈。
10. destroyed：实例销毁之后。绑定解除，监听移除，子实例销毁。
11. errorCaptured：捕获子孙错误时调用。