Zwx's blog
Zwx
2022-01-22
0

vue

# 1.动态类

:class="['iconfont', `icona-${percentStep.otherPer}`]"
:class="['info-list', item.status === 0 ? 'opay':'']"
1
2



# 2.深度监听Vuex数据

// 这样就可以使数据经过过滤器，方法，计算属性

data() {
    return {
        donateDate : {},
        info : {},	//当前拥有的捐赠物质
        consumeInfo : {},	//每日消耗量
        percentageVO : {},	//捐助物质剩余百分比
        continueVO : {},	//可维持多少时间
        otherList : []	,// 额外采购数据
        //默认的收获地址
        defaultAddress: {}
    }
},
watch:{
    // 监听action请求的数据
	['active.donateDate']:{
        handler(val){
        console.log(val)
        this.donateDate = val;
        this.info = val.info;
        this.consumeInfo = val.consumeInfo;
        this.percentageVO = val.percentageVO;
        this.continueVO = val.continueVO;
        },
        deep:true
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28



# 3.节流

function throttle(fn, gapTime) {
  if (gapTime == null || gapTime == undefined) {
    gapTime = 1500
  }

  let _lastTime = null

  // 返回新的函数
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn.apply(this, arguments)   //将this和参数传给原函数
      _lastTime = _nowTime
    }
  }
}

module.exports = {
	throttle:throttle,
	vuemixin:{
		created: function () { console.log(1) }
	}
}

//-------引用
const util = require('../../util/util.js');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26



# 3.子父组件值绑定问题

绑定 一般通过prop进行传值

  1. Object 和 Array 这种非基本类型的对象可以直接在子类中 v-model 就可以与父类进行双向数据绑定了

  2. 如果是基础类型那子类无法直接修改父类的值且会 报错 需要通过 this.$emit("update:val", val) 通知父类更新值 父类使用 :val.sync="val" 动态改变 配合 watch 进行监听

    (1)但是如果 v-model 直接绑定 prop 值时数据依旧会改变但是，也会报错，需要重新赋值给子类的 data ，监听子类变化来处理，即可

    (2)有时候也可以使用 computed 来处理，通过 get 和 set 来处理

  3. prop 的直接赋值给子类 data 后直接更改，新的 data 值不会改变父类的值

# 4.深度拷贝的方法

# 1.对象

  • 方法一：Object.assign({},origin)

    let person={name:'jack'}
let student=Object.assign({},person)
    1
    2

    只对一级属性的对象有效

  • 方法二：JSON.parse(JSON.stringify(origin))

    let person={name:'jack'}
let student=JSON.parse(JSON.stringify(person))
    1
    2

# 2.数组

  • 方法一：[].concat(origin)

    let animals=['老虎','狮子']
let zoo=[].concat(animals)
    1
    2

    对于一维数组是深拷贝，对一维以上的数组是引用

  • 方法二：origin.slice()

    let animals=['老虎','狮子']
let zoo=animals.slice()
    1
    2

    对于一维数组是深拷贝，对一维以上的数组是引用



# 5.proxy代理

1.下载 axios

npm install axios
1

2.src 目录下创建 request/request.js

import axios from "axios";

var http = axios.create({
  timeout : 3000,
  baseURL : process.env.VUE_APP_URL,
  headers  :{
    'Content-Type' : 'application/json'
  }
});


http.interceptors.request.use(config => {
    //参数为body，参数为字符串时
  // config.isChangeHeaders ? config.headers['Content-Type'] = 'text/plain' : ''
  config.headers['yxnAppid'] = 'xxx'
  config.headers['token'] = 'xxxx'

    return config
  }, error => {
    console.log(err)
    return error
  }
);

http.interceptors.response.use(response => {
    const res = response.data
    return res.code != 200 ? new Error(JSON.stringify(res)) : res.data
  }, error => {
    console.log('err:' + erro)
  }
)
export default http;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

3.src 目录下创建 request/index.js

import http from "@/request/request"

const plan_img = '/pet_base/api/dictionary/getDictionary'

export function api_getPlan_img(data) {
  return http({
    url: plan_img,
    method: 'post',
    data : data,
    // isChangeHeaders : true
    headers : {
      'content-type' : 'text/plain'
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.根目录创建 .env.development

NODE_ENV = development
VUE_APP_URL = /api	//必须以 VUE_APP 开头
1
2

5.根目录创建 .env.production

NODE_ENV = production
VUE_APP_URL = www.baidu.com	//接口路径
1
2

6.根目录创建 vue.config.js

module.exports = {
  publicPath: './',
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].title = '星爱计划';
      return args;
    });
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'www.baidu.com',
        ws: true,
        changeOrigin: true,
        pathRewrite: {//重写路径
          '^/api': ''
        }
      },
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

7.调用

<template>
  <div class="Live">
    <img :src="imgDate.live" class="live-img">
    <div class="text-box">
      <img src="@/assets/pageText.png" class="text-img" alt="">
    </div>
    <img src="@/assets/newPage.png" class="button-img" alt="" @click="onPage">
  </div>
</template>

<script>
import {api_getPlan_img} from "../request";
import { mapState,mapMutations } from 'vuex'

export default {
  name: 'Live',
  mounted() {
    this.getImg();
  },
  computed : {
    ...mapState(['imgDate']),
  },
  methods : {
    ...mapMutations(['imgDateCommit']),
    onPage () {
      this.$router.push({
        path : '/plan'
      });
    },
    async getImg () {
      let res = await api_getPlan_img('icon_star_love_h5');
      this.imgDateCommit(JSON.parse(res.dictValue.replace(/\s+/g, '')))
    }
  }
}
</script>

<style lang="less" scoped>
header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.27vw;
  color: #232323;
}
.Live {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:5.33vw 5.33vw 0;
  box-sizing: border-box;
  .live-img {
    border-radius: 2vw;
    width:89.33vw;
    height: 126.36vw;
  }
  .text-box {
    flex:1;
    .text-img {
      width: 51.2vw;
      height: 17.6vw;
      margin-top:7.73vw;
    }
  }
  .button-img {
    width: 89.33vw;
    height: 13.33vw;
    padding-bottom: calc(5.33vw + env(safe-area-inset-bottom));
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75



# 6.vue-prism-editor 语法高亮与编辑器

https://github.com/koca/vue-prism-editor (opens new window)

<template>
  <prism-editor class="my-editor" v-model="code" :highlight="highlighter" line-numbers></prism-editor>
</template>

<script>
  // import Prism Editor
  import { PrismEditor } from 'vue-prism-editor';
  import 'vue-prism-editor/dist/prismeditor.min.css'; // import the styles somewhere

  // import highlighting library (you can use any library you want just return html string)
  import { highlight, languages } from 'prismjs/components/prism-core';
  import 'prismjs/components/prism-clike';
  import 'prismjs/components/prism-javascript';
  import 'prismjs/themes/prism-tomorrow.css'; // import syntax highlighting styles

  export default {
    components: {
      PrismEditor,
    },
    data: () => ({ code: 'console.log("Hello World")' }),
    methods: {
      highlighter(code) {
        return highlight(code, languages.js); // languages.<insert language> to return html with markup
      },
    },
  };
</script>

<style>
  /* required class */
  .my-editor {
    /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
    background: #2d2d2d;
    color: #ccc;

    /* you must provide font-family font-size line-height. Example: */
    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
  }

  /* optional class for removing the outline */
  .prism-editor__textarea:focus {
    outline: none;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

image-20211203185612227

上次更新: 5/13/2023, 5:48:10 PM
uniapp
vue响应式插件

← vue响应式插件→

最近更新
01
在 M1 芯片 Mac 上使用 Homebrew
 11-08
02
GIT 遇到问题
 11-06
03
react Router嵌套路由不生效
 10-27
更多文章>
Theme by Vdoing | Copyright © 2019-2023 Evan Xu | MIT License
×