Vue 常用知识点

#### Vue路由单页面跳转传值
    router.push方式： 
        1、 this.$router.push({ name: 'invest', params: { name:"小mi",userId:1111111 }})
        2、 this.$router.push({ path: 'regist', query: { name: '这是private' }})
    router-link方式:
        <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

#### Vue配置Vux步骤
      1.项目里安装vux 
      npm install vux --save 
      2.安装vux-loader（vux2必须结合vux-loader使用，本文也只是介绍vux2的配置） 
      npm install vux-loader --save-dev 
      3.安装less-loader 
      npm install less less-loader --save-dev 
      
      安装完成记得在webpack.base.conf.js里做如下配置，在extensions里加入less
        resolve: {
        extensions: ['.js', '.vue', '.json', 'less'],
         alias: {
         'vue$': 'vue/dist/vue.esm.js',
         '@': resolve('src'),
         }
        }
        4.安装yaml-loader 
          npm install yaml-loader --save-dev 
          最后一步在build/webpack.base.conf.js文件里将原来的module.exports的代码赋值给一个新的变量webpackConfig，整个文件如下：
         
            const path = require('path')
            const utils = require('./utils')
            const config = require('../config')
            
           ------ 添加的内容--------
            const vuxLoader = require('vux-loader')
            const vueLoaderConfig = require('./vue-loader.conf')
            -------------------------
            
            function resolve (dir) {
              return path.join(__dirname, '..', dir)
            }
            
            const webpackConfig  = {
              context: path.resolve(__dirname, '../'),
              entry: {
                app: './src/main.js'
              },
              output: {
                path: config.build.assetsRoot,
                filename: '[name].js',
                publicPath: process.env.NODE_ENV === 'production'
                  ? config.build.assetsPublicPath
                  : config.dev.assetsPublicPath
              },
              resolve: {
                extensions: ['.js', '.vue', '.json', 'less'],
                alias: {
                  'vue$': 'vue/dist/vue.esm.js',
                  '@': resolve('src'),
                }
              },
              module: {
                rules: [
                  {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: vueLoaderConfig
                  },
                  {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: [resolve('src'), resolve('test')]
                  },
                  {
                    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                      limit: 10000,
                      name: utils.assetsPath('img/[name].[hash:7].[ext]')
                    }
                  },
                  {
                    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                      limit: 10000,
                      name: utils.assetsPath('media/[name].[hash:7].[ext]')
                    }
                  },
                  {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: 'url-loader',
                    options: {
                      limit: 10000,
                      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                    }
                  }
                ]
              }
            }
             ------ 添加的内容--------
            module.exports = vuxLoader.merge(webpackConfig, {
              plugins: ['vux-ui']
            })
            ---------------------------

#### Vue单页面创建锚点
    <template>
    <div class="invest">
      <div class="nav">
          <ul>
            <li  class="tager" v-for="(item ,index) in items" @key="index"   @click="tabsort(index)">
              <a :href="item.url">
                <span class="span">{{item.text}}</span>
                <div></div>
              </a>
            </li>
          </ul>
      </div>
      <div class="content">
        <div class="content-one">
          <div class="title">标题1</div>
        </div>
        <div class="content-two">
          <div class="title">标题2</div>
        </div>
        <div class="content-three">
          <div class="title">标题3</div>
        </div>
      </div>
    </div>
    </template>
    
    <script>
      import $ from 'jquery'
        export default{
          data(){
            return {
              items:[
                {'text': '新手标','url':'#newNovice'},
                {'text': '产业链','url':'#industry'},
                {'text': '质押贷','url':'#mortgageLoan'},
              ],
              iscur:0,
            }
          }
          ,methods:{
        tabsort(index) {
          this.iscur = index;
          var linex = $('.content-one').position().top;
          var linex2 = $('.content-two').position().top;
          var linex3 = $('.content-three').position().top;
          if( this.iscur == 0){
            console.log("打印指",linex)
            $("html,body").animate({scrollTop:$('.content-one').position().top},500)
          }else if (this.iscur == 1){
            console.log("打印指",linex2)
            $("html,body").animate({scrollTop:$('.content-two').position().top},500)
          }else {
            console.log("打印指",linex3)
            $("html,body").animate({scrollTop:$('.content-three').position().top},500)
          }
        }
      },
      mounted(){
        $("html,body").animate({scrollTop:$('.content-one').position().top},500)
        
        console.log("打印传值",this.$route.params)
      }
    }
    </script>
    
    <style scoped>
      .invest{
        box-sizing: border-box;
        width: 100%;
        background-color: aquamarine;
    
      }
      .nav{
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        height: 50px;
        z-index: 10;
        background: coral;
      }
      .nav ul{
        text-align: center;
        display: flex;
      }
      .nav ul li{
        float: left;
        list-style: none;
        flex: 1;
      }
      .nav ul li a{
        text-decoration: none;
      }
      .span{
        line-height: 50px;
        display: block;
      }
      .content{
        position: absolute;
        top: 50px;
        width: 100%;
      }
      .content-one{
        background-color: antiquewhite;
        height: 100px;
      }
      .content-two{
        background-color: cadetblue;
        height: 200px;
      }
      .content-three{
        background-color: coral;
        height: 800px;
      }
      .title{
        height: 30px;
        background-color: darkgray;
      }
    
    </style>
    
#### 常用的水平垂直居中方式
    方式一：
    <div class="div-demo"></div>
    <style>
        .div-demo{
            width:100px;
            height:100px;
            background-color:#06c;
            margin: auto;
            position:absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
    方式二：
    <style>
    .div-demo{
        width:100px;
        height:100px;
        background-color:#06c;
        margin: auto;
        position:absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
    }
    </style>
    方式三：（新旧伸缩盒兼容）
    <body class="container">
    <div class="div-demo"></div>
    <style>
        html,body{
            height:100%;
        }
        .container{
            display: box;
            display: -webkit-box;
            display: flex;
            display: -webkit-flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .div-demo{
            width:100px;
            height:100px;
            background-color:#06c;
        }
    </style>
    </body>
    
#### 纯Css构建三角形
    <style>
        .div-angles{
            width: 0;
            height: 0;
            border-style: solid;
            border-width:30px;
            width:0px;
            height:0px;
            border-color: transparent transparent #06c transparent;
        }
        .right{
            border-color: transparent transparent transparent #06c ;
        }
        .bottom{
            border-color: #06c transparent transparent ;
        }
        .left{
            border-color: transparent #06c transparent transparent;
        }
    </style>