1. 1.vuex
  2. 2.@click.native 给组件点击事件
  3. 3.vuex的工作流
  4. 4.数据持久化
  5. 5.子路由-嵌套路由
  6. 6.路由重定向
  7. 7.vw的使用
  8. 8.渐隐渐显的导航

一、vuex

1-1 获取vuex-state的数据

  1. this.$store.state

1-2 this.$store.dispatch向vuex派发一个事件 —actions

methods:{
        handleClick(city){
            /* this.$store.dispatch 向vuex派发一个事件,同时传递一个参数 */
            this.$store.dispatch("changeCity",city)
        }
}

二、给组件@click事件

@click.native //给组件事件必须加上native修饰符

三、vuex的工作

1.通过this.$store.dispatch()向vuex中的actions派发一个事件同时传递一个参数
methods:{
        handleClick(city){
            /* this.$store.dispatch 向vuex派发一个事件,同时传递一个参数 */
            this.$store.dispatch("changeCity",city)
        }
}
2.vuex-actions中接收dispatch派发过来的事件和参数
export default new Vuex.Store({
  ...
  actions: {
    changeCity(ctx,city){
      /* ctx表示上下文  this.$store
      city是自定义事件传递过来的参数 */
     3.在actions中使用commit方法向mutations提交一个事件,同时传递一个参数
      ctx.commit("toggleCity",city)
    }
  }
})

4.在mutations中接收commit方法提交过来的事件,同时改变state中的状态
export default new Vuex.Store({
  state: {
    city:"武汉"
  },
  mutations: {
    toggleCity(state,city){
      state.city = city;
    }
  }
})

四、数据持久化

function getCity(){
   let defaultCity = "天门";
   if(localStorage.getItem("city")){
     defaultCity = localStorage.getItem("city")
   }
   return defaultCity;
}
export default new Vuex.Store({
  state: {
    city:getCity()
  },
  mutations: {
    changeCity(state,city){
      state.city = city;
    }
  },
  actions: {
    changeCity(ctx,city){
      ctx.commit("changeCity",city)
        //1.设置缓存
      localStorage.setItem("city",city)
    }
  }
})

五、当地所在城市的接口

http://39.97.33.178/api/getLocation

六、子路由-嵌套路由

6-1 配置子路由

//Tips:在主路由的chilren属性中去配置
const routes = [
  {
    path: '/films',
    name: 'films',
    component:()=>import('../views/Films.vue'),
    children:[
      {
        path:'nowPlaying',
        component:()=>import('../views/NowPlaying.vue')
      },{
        path:'comingSoon',
        component:()=>import('../views/ComingSoon.vue')
      }
    ]
  }
]

6-2 在主路由对应的组件中去设置router-view

目的:router-view去装载这些子路由。router-view本质上就是一个动态组件。

//在Films.vue组件中去配置
<router-view></router-view>

七、路由重定向

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

八、vw的使用

8-1 配置postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      utf8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750 
      viewportHeight: 1334, // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置 
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） 
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw 
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 
      mediaQuery: false // 允许在媒体查询中转换`px` 
    },
    "postcss-viewport-units": {},
    "cssnano": {
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

8-2 安装依赖

yarn add cssnano postcss-aspect-ratio-mini postcss-cssnext postcss-px-to-viewport postcss-viewport-units postcss-write-svg
yarn add cssnano-preset-advanced postcss-import postcss-url autoprefixer

8-3 在public/index.html配置

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuecli3vw</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuecli3vw doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->

   //配置下面的js
    <script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>
    <script>
      window.onload = function () {
        window.viewportUnitsBuggyfill.init({
          hacks: window.viewportUnitsBuggyfillHacks
        });
      }
    </script>
  </body>
</html>

九、渐隐渐显的导航

1.style样式的动态绑定
2.生命周期
3.事件监听

<template>
  <div class="about">
    <h1 class="nav" :style="{opacity:opacity}">This is an about page</h1>
  </div>
</template>
<script>
export default {
  data(){
    return {
      opacity:0
    }
  },
  mounted(){
    window.addEventListener("scroll",this.handle)
  },
  methods:{
    handle(){
      var height = document.documentElement.scrollTop;
      /* 到达300完全显示 */
      var opacity = height/300;

      if(opacity>1){
        opacity = 1;
      }
      console.log(opacity)
      this.opacity = opacity;
    }
  },
  destroyed(){
    window.removeEventListener("scroll",this.handle)
  }
}
</script>
<style scoped>
  .nav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 40px;
    background: red;
    z-index: -1;
  }
</style>

作业

//实现 卖座网
https://m.maizuo.com/v5/