原生js （jquery）

dom 操作


mvc
m（model 数据）v（view 视图）c（controller 控制器） 


vue.js  react.js  angular.js

去 dom 操作

m（model 数据 ajax数据）v（view 页面） vm（view and model） 

双向绑定  

模块（组件）系统

插槽


选看
  自定义指令

  混入

  过滤器
  动画

Vue Router 路由

vue官方提供的 路由 管理工具

页面地址
www.baidu.com /index
www.baidu.com /about


路由模式：

  路径变化的时候，页面不会刷新

  hash
  www.baidu.com/#/index?id=1
  www.baidu.com/#/about

  window.location.hash

  onhashchange 监听地址栏的 hash 地址变化，然后拿到新的 hash地址，然后去映射表中找到这个地址对应
               的页面，然后把页面显示到指定位置


  history
  www.baidu.com/index
  www.baidu.com/about

    pushState() 和 replaceState()

    补发代码实现的网址


   
有两种页面跳转的方式

  query
  www.baidu.com/index?id=1&page=1
    :to="{ name: '/info', query: { id:item.id } }" 

    取参数：this.$route.query.参数字段名

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

    :to="{ name: '/info', params: { id:item.id } }" 

    取参数：this.$route.params.参数字段名

    注意： path: '/info/:id/:name',  


 $router  vue-router 提供的方法   
 $route   获取路由信息 

 this.$router.push 跳转后，可以返回之前页面

 xxx.replace  不能返回


 导航守卫

   全局导航守卫
     beforeEach
   路由导航守卫
     beforeEnter
   页面导航守卫
    beforeRouteEnter
    beforeRouteUpdate
    beforeRouteLeave



vue.js   

 2.x

 3.x

  this 指向

  setup(){


  }


vue-cli 脚手架  开箱即用

  vue-cli 2.x 

  vue-cli 3.x 以上