温习vue

作者: Vijay_ | 来源:发表于2017-12-25 05:01 被阅读29次

脚手架

  • 安装脚手架

  • 关闭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: '<App/>',
  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
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <div class="test-bg">{{count}}</div>
    <div class="test-bg">{{oriCount}}</div>
  </div>
</template>

<script>
//  vuex提供了一些工具供使用
import {mapGetters,mapActions,mapState} from 'vuex'
export default {
  name: 'app',
  created(){
//    这两句作用相当
    this.$store.dispatch("index/addCount","test");
    this.pulCount("test");
  },
  methods:{
    ...mapActions("index",{
      pulCount:"addCount"
    })
  },
  computed:{
//    第一个参数是命名空间,第二个参数是注入了state的计算数学
    ...mapState("index",{
      oriCount:state=>state.count
    }),
    ...mapGetters("index",[
      "myCount"
    ]),
    count(){
      return this.myCount(2);
    }
  }
}
</script>

<style>
</style>

注入router

  • 安装
    • yarn add vue-router
  • 用法
    • 配置和vuex一样
    • 设置每个路由标题
```javascript
router.beforeEach((to, from, next) => {
  document.title = to.meta.title||'龙城e驾';
  next()
});
```

- 路由使用


```javascript
//点击转跳路由
    <router-link :to="{path:'hello',query:{name:'vijay'}}">hello</router-link>
//获取路由路径参数
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上
  <router-link :to="{path:'/xx'}">asdasda</router-link>
    <router-view/>
  • 子父路由通信
  • 父->子路由传参数请看上面
  • 子->父 传参数
//child.vue
created() {
       this.$emit("hello","test","test2");
       }
//parent.vuew
<router-view  @hello="listener" />
methods:{
   listener(p1,p2){
     console.log(p1,p2);
   }
 },       

vue语法

  • 通信

    • 子->父(双向数据绑定)
    //子
    <input type="text" v-model="myName">
    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"的语法糖
    <asd-component :name.sync="name"></asd-component>
      
    
    • 父->子通信
```javascript
//父
//:name等于v-bind:name="xxx"
<asd-component :name="name"></asd-component>
//子
props: {
  name:{
     type: String,
     default:"默认值"
  }
},
```
  • 监听指令修饰符

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

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

    //html
      <div class="hello" :class="{'active':isActive,'error':isError}">hello</div>
      //js
       data() {
        return {
          name:"vijay",
          isActive:true,
          isError:true
        }
    }
    //渲染结果
    <div data-v-469af010="" class="hello active error">hello</div>
    
    • 当然,也可以绑定一个计算属性或者三元表达式去计算出class值
    • 绑定style属性时,要传入一个对象,css样式作为属性时名称要写成驼峰式
  • vue的数组属性无法监听length的get set.所以在修改length或者使用arr[xindex]=x的时候修改数组角标上的内容是无法触发页面更新的,所以建议使用数组的splice方法(因为数组方法被vue重写了)进行角标替换或者新增角标赋值,arr.splice(开始角标,删除几个角标,替换成什么值)。

相关文章

  • 温习vue

    脚手架 安装脚手架vue-cli脚手架安装 关闭source-mapconfig>index.js>product...

  • 前端知识温习

    js知识点 温习js css知识点 温习css jquery温习 自己实现一个jquery vue框架温习 温习v...

  • vue2(1)环境配置搭建

    最近项目刚刚结束,想把之前的vue捡起来温习温习,顺便学习下vue2,想搞一搞是如何搭建环境的,毕竟项目还是要运行...

  • 温习温习再温习

    今天把以前背过的从头到尾重温了一遍,一共60多首,这两个多月以来不间断背诗的成果。 结果发现由于最近疲于应付这阶段...

  • 温习

    ABC理论: 事件到结果,是通过我们的信念价值观促使的。不是他这样做,所以我生气了,是因为我不认同或者不认可,所以...

  • 温习

    作者:刘玲 来源:北海日报 8年前,他和她在一场相亲会上相识,那时她正受前男友骚扰,不胜其烦。他帮忙劝走了那个...

  • 《温习》

    2017年6月9日 聚焦网初五原创 张婷 郑州 分享第七天 准备睡觉,突然想起,日志 分享没写,刚...

  • 温习

    北方用雪 一滴一点 描好你微笑的脸 我用词语 一字一句 温习你的美丽 2014.02.19

  • 温习

    arguments 系统自带的,可以接受函数的参数,是个数组 函数最好带着return ,不要直接写输出,避免参...

  • 温习

    书市邂逅 渡边淳一、村上春树 抚阅墨香 才记起很多年过去 文字留下的印象已不深刻 于是带回家温习 读书是一种习惯 ...

网友评论

      本文标题:温习vue

      本文链接:https://www.haomeiwen.com/subject/nwpkgxtx.html