Vue笔记

vue生命周期

概念

    组件/Vue在创建到销毁会经历一系列特殊的过程，称为生命周期
    在过程中执行的回调函数，称为生命周期钩子函数

作用

    可以让我们在恰当时期，做一些自动操作
    网络请求数据，监听dom操作，执行定时器，清除定时器，解除监听

单词

    before 之前
    create 创建
    mount  挂载
    update  更新
    destroy  销毁

生命周期

    创建前后
        beforeCreate
            特点：有this，没有data数据挂载到实例this上

        created
            特点：有data  没有$el
            作用：执行ajax  读取本地数据  开启定时器  注册事件window相关


    挂载前后
        beforeMount
            特点：有$el，没有渲染

        mounted
            特点：页面有渲染
            作用：可以和created重复，可以操作DOM


    更新前后
        beforeUpdate
            特点：数据已经更新，没有渲染

        updated
            特点：数据更新，dom已经更新渲染


    销毁前后
        destroyed
            特点：切断组件与dom的联系

Vue的全局方法/属性

$el 组件/vue的dom节点
$destroy（）销毁当前组件/vue的方法
$nextTick（callback）
  数据更新，等待dom更新后执行callback回调函数
$set()
$refs
$mount()  手动挂载el

脚手架

基于node的环境

    创建复杂的vue项目的模板

安装

    1.nodejs安装
    2.脚手架全局安装
     npm i -g  @vue/cli
    3.检测是否安装成功
     vue  -V

创建项目

    切换到根目录/项目需要所在目录
     cd  /
    创建一个myvue项目
     vue create myvue

运行项目

    cd  myvue
     切换到项目目录
    npm  run  serve
     运行项目

SPA

singlePageApplication

 一个网站的所有页面都集成在一个html文件里面，通过切换div模拟页面的切换

优点

    1.资源公用
    2.前后端分离
    3.页面切换流畅

缺点

    对SEO搜索引擎不友好

原理

 地址改变，不刷新页面，监听地址栏变化实现页面局部更新

Hash路由

    锚点（hash）变化不会刷新页面
    window.onhashchange

历史记录路由

    H5新增特性
    history.onpopstate