温习vue

脚手架

• 安装脚手架

  • vue-cli脚手架安装

• 关闭source-map

  • config>index.js>productionSourceMap:false

• 压缩gzip

  • yarn add compression-webpack-plugin
  • config>index.js>productionGzip: true
  • 后端服务器中间件开启gzip支持
    • nginx:

  //nginx.conf
  gzip on;
  gzip_types application/javascript application/octet-stream text/css image/jpeg;  
  

• 修改静态资源根路径(假设要把所有静态资源放在xxx项目目录下)

  • config>index.js>build>assetsPublicPath: '/xxx/'

注入vuex

• 安装

//yarn add vuex
import Vue from 'vue'
import App from './App'
import router from './router'
/*
1.将vuex的所有方法注入到每个子类
2.用store配置文件生成一个注册了get set监听的新实例
3.将生成的新实例放入Vue实例属性中
 */
import Vuex from 'vuex'
//引入store配置文件
import storeConfig from './store/index'
Vue.config.productionTip = false;
//注入到每个实例中,让每个实例都有访问Vuex方法的权限
Vue.use(Vuex);
//将store配置文件注册监听
const store = new Vuex.Store(storeConfig);

new Vue({
  el: '#app',
  router,
//将注册号监听后的store实例放到vue实例中,让每个vue实例都可以访问到store实例
  store,
  template: '',
  components: { App }
})

• 用法

//storeConfig.js
import axios from 'axios';

export default {
  //设置子模块store 并配置每个模块的命名空间
  modules: {
    "index": {
      namespaced: true,
      state: {
        count: 0
      },
      //用于处理state,不能执行异步操作,在vue实例中用$store.commit(funcName,param)调用
      mutations: {
        increment(state, params) {
          console.log(params);
          state.count++
        }
      },
      actions: {
        //虽然mutaions不能异步处理，
        //但是可以用actions异步处理后调用传入的store实例的commit来调用mutations,
        //使用$store.dispatch(funcName,param)调用
        async addCount({rootState, state, commit}, params) {
          let res = null;
          try {
            res = await axios.get("xx/xx");
            commit("increment", res.data);
          } catch (error) {
            commit("increment", "error");
            console.log(error);
          }
        }
      },
      //类似computed
      //$store.getters.myCount返回的是一个函数->闭包引用了state
      //此时传递参数给返回的函数就可以获取一个处理过的state值
      getters: {
        myCount(state) {
          return num => state.count + num;
        }
      }
    }
  }
}




//App.vue

注入router

• 安装
  • yarn add vue-router
• 用法
  • 配置和vuex一样
  • 设置每个路由标题

```javascript
router.beforeEach((to, from, next) => {
  document.title = to.meta.title||'龙城e驾';
  next()
});
```

- 路由使用


```javascript
//点击转跳路由
    hello
//获取路由路径参数
this.$router.currentRoute.query["name"]
//
```
- 嵌套路由

    //config
    import HelloWorld from '@/components/HelloWorld'
import asd from '@/components/asd'

export default {
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld,
      children:[
        {
          path: '/xx',
          component: asd,
        }
      ]
    },
    
  ]
}
//HelloWorld.vue
//在子控件中点击切换路由 也会显示到子控件的routerview上
  asdasda
    

• 子父路由通信
• 父->子路由传参数请看上面
• 子->父 传参数

//child.vue
created() {
       this.$emit("hello","test","test2");
       }
//parent.vuew

methods:{
   listener(p1,p2){
     console.log(p1,p2);
   }
 },       

vue语法

• 通信

  • 子->父（双向数据绑定）

  //子
  
  export default {
  props: {
    name: String
  },
  computed: {
  //自定义一个计算属性,通过重写他的get set来充当双向数据绑定的媒介
    myName: {
      get() {
        return this.name;
      },
      set(val) {
        this.$emit("update:name", val);
      }
    }
  }
  }
    
  //父
  //.sync其实是实现了一个@update:name="val=>name=var"的语法糖
  
    
  

  • 父->子通信

```javascript
//父
//:name等于v-bind:name="xxx"

//子
props: {
  name:{
     type: String,
     default:"默认值"
  }
},
```

• 监听指令修饰符

  • @click.prevent:表示让元素不触发默认事件,等同于在事件函数内调用event.preventDefault。(如:让按钮不提交表单)
  • @click.stop:让元素的事件不冒泡,等同于stopPropagation
  • e.target是当前触发事件的元素，e.currentTarget是当前处理事件的元素

• 计算属性与侦查器(watchs)

  • 计算属性用于对某个属性数据的封装处理返回一个处理后的值，以及充当双向数据绑定的媒介
  • 侦查器用于监听某个属性数据值发生改变时，触发另一个事件(函数),不需要像data属性那样作为数据使用的情况。

• 动态绑定html元素属性

  //html
    
  hello
    //js
     data() {
      return {
        name:"vijay",
        isActive:true,
        isError:true
      }
  }
  //渲染结果
  hello
  

  • 当然,也可以绑定一个计算属性或者三元表达式去计算出class值
  • 绑定style属性时,要传入一个对象,css样式作为属性时名称要写成驼峰式

• vue的数组属性无法监听length的get set.所以在修改length或者使用arr[xindex]=x的时候修改数组角标上的内容是无法触发页面更新的,所以建议使用数组的splice方法(因为数组方法被vue重写了)进行角标替换或者新增角标赋值,arr.splice(开始角标,删除几个角标,替换成什么值)。