Vue ---day04

VS Code

debugger for chrome    调试工具

debugger:  (VSCode 和 浏览器产生联系,浏览器source)

vue.config.js     babel.config.js  ------   Vue配置项

launch.json      ------   VSCode调试配置项   自动生成 webRoot工作目录  url ip+端口号

//  vue.config.js

module.exports = {

  //  配置 webpack 中 devtool

  configureWebpack:{

    devtool:'source-map'

  }

}

//  babel.config.js

module.exports = {

  "env":{

    "development":{

      "sourceMaps": true,  // 位置信息

      "retainLines": true  // 保留行号

    }

  },

  presets: {

    '@vue/app'     // @vue/babel-preset-app 

  }

}

 

Vue Router  嵌套路由  命名路由

   实例配置项: mode  routers   routers[0].path   routers[0].component  routers[0].children

vue-router 为组件注入了两个属性:

  $router  对象,获得 new VueRouter() 的实例对象  

  $route  对象,当前路由匹配的信息

    $route.params 动态路由有关的信息

<router-link>  一个链接,在应用内跳转

  <router-link to="/about">About</router-link>

  <router-link tag="li" to="/about"> <a>About</a> </router-link>   激活的类被应用在外部的 li 标签上,a 成为一个真实的链接

  不支持target="_blank"属性

  打开新标签页只能用 a

<router-view>  命名视图   嵌套命名视图

  命名视图,默认为 default

  <router-view name="a"></router-view> 

路由和视图配合使用,共同完成一个页面

 

全局filter

  Vue.filter("my-filter", function(value){})  // 注册  

  var myFilter = Vue.filter(“my-filter”)   // getter返回已注册的过滤器

options/filters  本地filter

  用法支持管道运算符 {{“abcdef” | capitalize }}

  filters:{  

    capitalize: function (value) {

      if (!value) return '';

      value = value.toString();

      return value.charAt(0).toUpperCase() + value.slice(1);

     }

  }

 

导航守卫

  “导航”表示路由正在发生改变

  全局前置守卫  全局解析守卫  全局后置守卫

  路由独享守卫    组件内守卫

路由元信息

 $route.matched ---数组, 一个路由匹配的所有路由记录

过渡动效

   <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果

   <transition>

    <router-view></router-view>

   </transition>

   单个路由的过渡   基于路由的动态过渡 

滚动行为  :  只在支持 history.pushState 的浏览器中可用

 

posted @ 2020-02-20 21:45  铁塔  阅读(103)  评论(0编辑  收藏  举报