html css 写在html
     也没有div + css

     table + css(选择器)

js 发展

   div + css 

   jquery   操作dom的

|
|
nodejs
|
|

过渡年代：前端 m（数据）v（视图）c（控制器） 年代


前端三大框架   m（数据）v（视图） vm（视图和模型） 框架  
spa (框架)单页web应用

操作虚拟dom  diff  组件化开发

angular.js

react.js

vue.js

  vue 1.x  php  laravel 作者
  vue 2.x  进入国内（全球）   vue-router 3.x
    es5 语法的 js写的

   |
   |
   typescript 
   |
   |

  vue 3.x(next)  vue-router 4.x


  vue.js  三套语法风格：
    vue 1.x vue 2.x   options api  选项式
                        {
                            data: {}
                            methods: {}
                        }

            过渡：vue2 支持  ts 语法的 插件包 （很多）  
            class api       

    vue3.x  composition(function) api  组合式
            


   
基于 html 来用

基于 nodejs 来用


vue-router

  hash
    #地址名字
    #/about

  history
    /about

  $router  访问 vue-router 内置方法
  $route  访问 vue-router 的地址信息
   
  页面跳转
    标签跳转 router-link
    方法跳转 this.$router.xxx 

  参数传递：

    query传参
    http://www.baidu.com/index?id=1&page=2 

    params
    http://www.baidu.com/index/1/2 

    注意：
    params 传参一定不能用 path 进行跳转


  导航守卫
    全局守卫
      全局前置守卫
      全局后置钩子

    路由独享的守卫  

    组件内的守卫
      beforeRouteEnter
      beforeRouteUpdate
      beforeRouteLeave


vue 

  vue-cli 脚手架 （帮我做好了所有基本的事情和准备）

    2.x

    3.x

  vue-cli 2 + vue 2

  vue cli 3 + vue 3