实战总结 Vue 学习看这一篇就够了

<div :class="[classA,classB,{'classC':flag}]" >

data(){
    return{
        flag:true
    }
}

<div :class="{classA:falg1,classB:flag2}" />

data(){
    return{
        falg1:true,
        falg2:true
    }
}

<div :class="['ac','bd',falg?'active','']" / >

data(){
    return{
        falg:true,
    }
}

<div :class="classObj" />

data(){
    return{
      classObj:{classA:falg1,classB:flag2}
    }
}

    <div :class="styleObj" />

    data(){
        return{
          styleObj:{color:red}
        }
    }

<div :class="[styleObj1,styleObj2]" />
 data(){
    return{
      styleObj1:{color:red},
      styleObj2:{color:red}
    }
}

<div v-for='(item,key,index) in object' :key='index'>
 {{item}}--{{key}}--{{index}} 
</div>
<div v-for='(count in 10)'> </div>

<div v-for='(item,key) in object' :key='index'>
 {{item | dateFormat}}
</div>

<div v-for='(count in 10)'> </div>

vue.filter('过滤器名称',function(){
     
  })

 filters:{
      dateFormat:function(data,param){
          do some
      }
 }

<input @keyup.enter='方法名'></input>

Vue.directive('focus'{
  //每当指令绑定到元素上的时候,会立即执行bind 函数,只执行一次,
  注意:在元素刚绑定元素的时候,还没有插入到dom中去,这时候,调用focus方法没有作用,即放在focus 放在bind中是不起作用 的
  bind:function(el,binding){
     el.style.color=binding.value
  },
  
  //表示元素插入到dom中的时候,只执行一次
  inserted:function(){
    el.focus() js行为放在这里去创建  
  },
  
  //当组件更新的时候,可能会触发多次
  updated:function(){},
 
})

directives:{
    '指令名':{
     bind:function( el,b){

     }
   }
 }

'指令名':function(el,binding){
    
} //注意这个function 等同于 把代码写到bind和update中去

 <style>

 .v-enter,
 .v-leave-to{
     opacity:0;
     transform:translateX(150px) --这东西是位移
 }
 
 .v-enter-active,
 .v-leave-active{
 transition:all 0.4s ease;     
 }
</style>

<transition name='my'>
 <h3 v-if="flag"></h3>
</transition>

<script>
 data(){
  return {
    flag:false
  } 
 }
</script>

<transition enter-active-class="bounceIn"
leave-avtive-class="bounceOut"  duration='200' 

>
 <h3 v-if="flag" class="animated"  ></h3>
</transition>

<transition
  <div 
 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  >
  
  </div>
  </transition>

<transition
  <div 
  v-show="flag"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  >
  
  </div>
  </transition>

<script>
  methods:{
    beforeEnter(el){
    //动画入场之前,此时动画尚未开始, 可以在beforeEnter中设置元素开始动画之前的初始位置    
    
   el.style.transform=
   "translate(0,0)"
    },
    enter(el,done){
     /*这句话,没有实际的作用,但是,如果不写,出不来动画效果,可以认为 这个会强制刷新动画,ofset触发了重绘重排导致动画更新了*/
     
     el.offsetWidth
     
     el.style.transform=
     "translate(150px,450px)"
     
     el.style.transition='all 1s ease'
    
     /*这里的done 代表着 
     afterEnter的引用,
     这个会立即执行afterEnter 否则会有延时 
     */
     done()       
    },
    
    afterEnter(el){
    /*动画完成之后,会调用afterEnter */
      this.flag=!this.flag
      
    }
  } 
</script>

<transition-group appear tag='ul'>
 <li v-for >
 
 <li>

</transition-group>

 .v-enter,
 .v-leave-to{
     opacity: 0;
     transform:translateY(80x);
 }
 
 .v-enter-active,
 .v-leave-active {
     transition: all 0.6s ease;
 }
 
 /*离开后下一个东西没有动画使用这个可以使用动画实现下一个东西渐渐地飘上来的效果,要和 v-leave-active的absolute 配合 固定写法*/
 .v-move {
  transition:all 0.6s ease
 }
 
 .v-leave-active{
   /* absolute 有个特点元素默认宽度就是最小值,要在元素上添加width:100%*/
    position:absolute;
 }

<transition mode="out-in">
    <component  :is="comName" >
    </component>
</transition>

var coml=Vue.extend({
 template:'<h3>这是使用Vue.extend 创建的组件</h3>'
})

//第一个参数组件名称,第二个参数创建出来的组件模板对象
 Vue.component('myComl',coml)

<my-coml><my-coml/>

Vue.component('mycom2',{
   
template:'<div>
 <h3>
    这是直接使用Vue.component 创建出来的组件
 </h3>
</div>'    
    
})

<template id='tmp1'>
<div>
 <h1>
 这里通过template元素,在外部定义的组件结构,这个方式,有代码的智能提示和高量
 </h1> 
</div>
</template>


 Vue.component('mycom3',{
  template:'#tem1'   
 })

<template   id='temp2'>
 <h1>这是私有login组件</h1>
</template>

componment:{
 login:
  {
   template:'tmpl2'
  }
}

 <a href=""
 @click.prevent="flag=true"
 >
 登录
 </a>

 <a href=""
   @click.prevent="flag=flase"
  >
 注册
 </a>

 <a href=""
   @click.prevent="flag=flase"
  >
 注册
 </a>

//component 是一个占位符

:is属性,可以用来指定要展示的组件的名称 写死的时候这个组件名要是个字符串,动态绑定时key普通写法就好,但value必须是字符串。

<component :is="'componentId'">
</component>

<component :is="oneName">
</component>

data(){
    return{
     oneName:"login",
    }
}

//父组件中
  <component-name 
  :children='children'  //传值
  @handle='show'  //绑定方法
  >
  </component-name>
  
  data(){
    
    return(){
        children:11
    }  
      
  }
  
  methods:{
      
    show(data){
          
      }
  }

 //子组件中
   methods:{
    handle(){
        this.$emit('func',{
            age:1,
            name:'搞事'
        })
      }
  }

1.子组件传出单个参数时：

// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'

2.子组件传出多个参数时：

// 子组件
this.$emit('test',this.param1，this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'

 <h3  id='myh3' ref='myh3'> </h3>
 methods:{
   getElement(){
     console.log( this.$refs.myh3.innerText)
  } 
 }

//组件也可以使用ref,让父组件调用子组件里的方法和属性值
<login ref='mylogin'> </login>

 methods:{
     getElement(){
     //父组件调用子组件里的属性值
     console.log(this.$refs.mylogin.msg)
     }    
}

<router-view></router-view>

<router-link to="/login" tag='span' >
登录
</router-link>

new VueRouter({
//路由匹配规则
routes:[
   {
     path:'/',
     redirect:'/login'
    },
    
    {
     path:'login',
     component:login
    },
    
    {
     path:'/register',
     component:register
    }
]  

//路由高亮的类名
linkActiveClass:'myactive'
})


var vm=new Vue({
 el:'#app',
 data:{},
 methods:{},
 router //将路由规则对象注册到vm实例上,用来监听Url地址的变化，然后展示对应的组件。
})

//获取id
this.$route.query.id

//参数要一一对应不可缺失,不然可能会
造成路由的不匹配
< router-link
  to="/login/12/ls"
>

{
    path:'/login/:id/:name',component:login   
}

<router-link
to="/account/login"
>
</router-link>

routes:[{  path:'/account',  component:account,  children:{   {   path:'login',   component:login   }     }}] 

<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="main"></router-view>

var header={
    template:'<h1>header</h1>'
}

var leftBox={
    template:'<h1>leftBox</h1>'
}

var mainBox={
    template:'<h1>mainBox</h1>'
}

{
    path:'/',components:{
        'default':header,
        'left':leftBox,
        'main':mainBox
    }
}

 watch:{
    'obj.a'(newValue,oldValue){  },
     immediate:false  
  }

 watch:{
    'obj':{
              handler (newValue, oldValue) {
            }
      },
      deep:true   //深程度监听 性能消耗大
  }

watch:{ 
    //监听路由
    '$route.path':{
              handler (newValue, oldValue) {
            }
      },
      //immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
      immediate:true   
  }

computed:{
 'fullname':(){
  return 
 }
}

 render:function(createElements){ //createElements是一个方法,调用它,能够把指定的 组件模板 渲染为html结构  return createElements(login)  //注意 这里 return 的结果,会替换页面中el 指定的那个容器 }

 <div v-if="layout === 'block'" class="layout-block" :class="scroll?'layout-scroll':''">
      <slot></slot>  //匿名插槽
    </div>
    

   <!-- 左右块 -->
    <div v-if="layout === 'both'" class="d-flex jc-between">
      <div class="layout-both" :class="scrollLeft?'layout-scroll':''">
        <slot name="left"></slot> //有名字的插槽
      </div>
      <div class="layout-both" :class="scrollRight?'layout-scroll':''">
        <slot name="right"></slot>
      </div>
    </div>    

  //有名字的插槽 # v-slot的缩写是#
   <template #left></template>
   <template v-slot="left" > </template>

<template>
 插槽的内容
</template> 

 "scripts":{
   "dev":"webpack-dev-ser  ver --open --prot       3000 --contentBase src --hot "     
 }

   devServer:{
     hot:true 就热更新了
}

阉割版
import Vue from 'vue'

齐全版
 1.
 import Vue from '../node_modules/vue/dist/vue.js'
 2.
 module.exports={
  resolve:{
   //设置 Vue被导入的时候的包的路径
      alias:{
        "vue$":"vue/dist/vue.js"  
      }
  }
 }

  render:function(createElement){
     return  createElement(login) 
  }
  
  //就一行可以省略{} 并且没有花括号默认就有return, 
  简写: render: c => c(login)

const arr={
     a:'1',
     b：'2'
 }
 export default arr
 
/* export default {
   这个暴露是错误的所以当前注释 一个js文件中只能暴露一次
    address:'北京'
 }
 */

 export title=1 
 import arr, {title as title1 } from  '/xxx.js'

//npm下载 --感觉下的有点慢 换个路径下比较好
 npm install ngrok -g 
//命令
 ngrok http 80

//第一种 图片质量小的可以自动转换为base64的
img: require("@/../public/img/home/user.jpg ")

//第二种 这里可以把最前面的 / 看做是public
/img/abnormal/Trash.png 

即 public/img/abnormal/Trash.png

    <template v-for="(column, index) in btn">
       <el-button size="small"
                       :type='column.type'
                       :plain='column.plain'
                       :class='!isEmpty(column.style)&&[scope.$index + (currentPage - 1) * pageSize==column.style.index?column.style.className:""] '
                       @click="handle(id&&!column.isGetAll?scope.row[id]:scope.row,column.lable,scope.$index + (currentPage - 1) * pageSize)"
                       :key='index'>
              {{column.lable}}
       </el-button>
    </template>

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
  },

 //配合前端的gzip
  在站点配置添加如下代码：

    location ~* \.(css|js)$ {
       gzip_static on;
    }
 
    这是 nginx 的静态 gzip功能，会自动查找对应扩展名的文件，如果存在 gzip 文件，就使用，如果没有就用原文件

   //后端返回gzip
    gzip on;
    gzip_static  on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

    <script src="https://unpkg.com/vue@2.6.10/dist/vue.runtime.min.js"></script>
    <script src="https://unpkg.com/vuex@3.0.1/dist/vuex.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.3/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.9.2/lib/index.js"></script>

  //有了config就按以下配置
  configureWebpack: config => {
    //cdn 
    config.externals = {
      vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      axios: 'axios'
    }
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      )
    }
  }

一、建立环境配置文件
在package.json 同级的目录下 建立3个文件
1 .env.development  --开发环境 (本地环境)
2 .env.production   --正式环境 (正式线服务器--打包)
3 .env.test         --测试环境 (测试线服务器--打包)

二、在每个文件中写入具体的配置内容

/*****.env.development文件的内容*****/
  NODE_ENV = 'development'
  VUE_APP_CURRENT_MODE = 'development'

/*****.env.production文件的内容*****/
  NODE_ENV = 'production'
  VUE_APP_CURRENT_MODE = 'production'

/*****.env.test*****/
  NODE_ENV = 'production' 
  VUE_APP_CURRENT_MODE = 'test'

三、在package.json 中写入

 1.在纯粹的vue_cli3.x配置如下
 
 "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },
  
 2.在uni-app下的vue_cli3.x的配置
 
  "scripts": {
    "serve": "npm run dev:h5 -- development", //修改点
    "build": "npm run build:h5 -- production", //修改点
    "build:test": "npm run build:h5  -- test",  //修改点
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5    vue-cli-service uni-build --mode", //修改点
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --mode", //修改点
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js"
  },

module.exports = {
  plugins: [
    require('autoprefixer')(),
    require('postcss-plugin-px2rem')({
      rootValue: 192, //设计图的宽度/10
      unitPrecision: 10, //换算的rem保留几位小数点
      mediaQuery: true,
      minPixelValue: 3
      // exclude:/node_modules|folder_name/i,把第三方的框架排除掉
    })
  ]
}

//第一种
{
  "env": {
    "production": {
      "plugins": [
        ["transform-remove-console", { "exclude": ["error", "warn"] }]
      ]
    }
  }
}
//第二种
一、建立环境配置文件
在package.json 同级的目录下 建立3个文件
1 .env.development  --开发环境 (本地环境)
2 .env.production   --正式环境 (正式线服务器--打包)
3 .env.test         --测试环境 (测试线服务器--打包)

二、在每个文件中写入具体的配置内容

/*****.env.development文件的内容*****/
  NODE_ENV = 'development'
  VUE_APP_CURRENT_MODE = 'development'

/*****.env.production文件的内容*****/
  NODE_ENV = 'production'
  VUE_APP_CURRENT_MODE = 'production'

/*****.env.test*****/
  NODE_ENV = 'production' 
  VUE_APP_CURRENT_MODE = 'test'

三、在package.json 中写入
 
 "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },


四、在babel.config.js 中写
 let transformRemoveConsolePlugin = [];
 if (process.env.VUE_APP_CURRENT_MODE === "production") {
  transformRemoveConsolePlugin = [
    ["transform-remove-console", { exclude: ["error", "warn"] }]
  ];
}

module.exports = {
  presets: ["@vue/app"],
  plugins: [...transformRemoveConsolePlugin]
};

/*导入在内存中生成html页面的插件,只要是插件,都一定要放到plugins节点中去
*/

 const htmlWebpackPlugin=require("html-webpack-plugin")

  //创建一个 内存中 生成html 页面的插件
 new htmlWebpackPlugin({
 template:path.join(__dirname,'./src/index.html')
 filename:'index.html'
 })

//这个节点,用于配置 所有 第三方模块 加载器
module:{
  rules:[
   {test:/\.css$,use:[]}
  ]     
}

npm install prerender-spa-plugin --save
vue.config.js 

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      ),
        config.plugins.push(
          new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, 'dist'),
            routes: [
              // '/'
              '/login'
              // '/show',
              // '/websocket',
              // 'websocket2',
              // '/websocket3',
              // '/home',
              // 'abnormal/AbnormalStatis',
              // 'abnormal/FocusCrowd',
              // 'abnormal/FocusDetail',
              // 'abnormal/ScaleDetail',
              // 'abnormal/WarnSetup',
              // 'abnormal/WarnDetail',
              // 'abnormal/WarnLists',
              // 'abnormal/PsychMonth',
              // 'abnormal/PsychTeacher',
              // 'abnormal/PsychList',
              // 'laboratory/sports/MoveClock',
              // 'laboratory/sports/ClockDetail',
              // 'activity/ActList',
              // 'activity/ActForm'
            ],

            minify: {
              minifyCSS: true, // css压缩
              removeComments: true // 移除注释
            },
            server: {
              port: 8080
            },

            //忽略打包错误
            ignoreJSErrors: true,
            phantomOptions: '--web-security=false',
            maxAttempts: 10,
            renderer: new Renderer({
              injectProperty: '__PRERENDER_INJECTED',
              inject: {
                foo: 'bar'
              },
              headless: false,
              renderAfterTime: 5000,
              renderAfterDocumentEvent: 'render-event'
            })
          })
        )
    }
  },

     main.js
      new Vue({
       mounted() {
        document.dispatchEvent(new Event('render-event')) 
      }
     }).$mount('#app')