vue学习自用笔记

1.watch事件

watch一般用来监控路由、input输入框的值特殊处理等等，比较适合的场景是一个数据影响多个数据

"obj.olderBirthday": {
        handler(val) {
          if (val != "" && val != null) {
            let birthdays = val.replace(/-/g, "/");
            let age = moment().diff(moment(birthdays), "years");
            this.obj.olderAge = age;
          }
        }
      },

另外一种监听方式

data(){
		return{
			example0:"",
			example1:"",
			example2:{
				inner0:1,
				inner1:2
			}
		}
	  },
watch:{
example0(newVal, oldVal){
	//监听单个变量
	......
},
example2(newVal, oldVal){
	//监听对象
	......
}

}

2.computed

computed用来监控自己定义的变量，该变量不在data里声明，直接在computed中定义，然后就可以在页面上进行双向数据绑定展示出结果或者进行其他处理

	......
	<Table :data="deviceData_c" height="542" size="small">
	......
computed:{
	deviceData_c(){
		//对data进行处理
		......
		
		return breakersData;
	}
}

3.Object.defineProperty()

用来实现数据劫持，控制一个对象属性的特有操作

下面这个例子中，对Book对象的name属性的set和get方法进行了重写

var Book = {}
var name = '';
Object.defineProperty(Book, 'name', {
  set: function (value) {
    name = value;
    console.log('你取了一个书名叫做' + value);
  },
  get: function () {
    return '《' + name + '》'
  }
})
 
Book.name = 'vue权威指南';  // 你取了一个书名叫做vue权威指南
console.log(Book.name);  // 《vue权威指南》

4.v-model

用于实现双向绑定

<input v-model="text" />
	......
data(){
	return{
		text:"这是个文本"
	}
}

5.state

common.js可以用来存储一些公共变量

const common = {
    state:{
        testData:[
            {
                label:'测试',
                value:'测试'
            },
            {
                label: "测试啊",
                value: "测试啊"
            }
        ]
    }
};
export default common;

getters.js用来书写get方法

const getters = {
    //测试
    testData: state => state.common.testData,
};
export default getters;

index.js需要导入以及定义common和getters

import Vue from 'vue';
import Vuex from 'vuex';

import app from './modules/app';
import user from './modules/user';
import dict from './modules/dict';
import getters from "./getters";
import common from "./modules/common";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        // 状态
        test:"12341123"
    },
    mutations: {
        // 改变方法
        test1(state, payload){
        	state.test = payload
        }
    },
    actions: {},
    modules: {
        app,
        user,
        dict,
        common
    },
    getters
});
export default store;

使用

import { mapGetters } from "vuex";
computed:{
            ...mapGetters([
                "testData"
            ])
        },
        
console.log(this.$store.state.test)
this.$store.commit('test1', '52564')
console.log(this.$store.state.test)

输出结果：

12341123
52564

6.引入图片的几种方式

//首先给图片地址绑定变量
<template>
	<img :src='imgUrl'>
</template>

//1.将图片引入为模块
require imgUrl from"../assets/test.png"

//2.将imgUrl放在数据中
data(){
	return{
		imgUrl:require("../assets/test.png")
	}
}

//3.在data中定义，生命周期中赋值
created(){
	let urlTemp = "assets/test.png"
	this.imgUrl = require("@/" + urlTemp)
}
//4.调用语言文件中的图片路径
<img :src="require('' + $t('ydsjtitle') +'')">

对图片引用的解释补充：

<img src="./assets/images/01.jpg" alt=""> // √
// 编译后:
<img src="/img/01.f0cfc21d.jpg" alt="">

常见的引入方式，路径是固定的字符串，图片会被webpack处理，文件若丢失会直接在编译时报错，生成的文件包含了哈希值

<img :src="'./assets/images/02.jpg'" alt=""> // ×
// 编译后:
<img src="./assets/images/02.jpg" alt="">

错误的引入方式，使用:src调用了v-bind指令处理其内容，相对路径不会被webpack的file-loader处理

<img :src="require('./assets/images/03.jpg')" alt=""> // √
<img :src="require('./assets/images/'+ this.imgName +'.jpg')" alt=""> // √
<img :src="img3" alt=""> // √
<script>
export default:{
    data(){
        return {
          imgName:'03.jpg',
          img3:require('./assets/images/03.jpg'),
        }
      },
}
</script>
// 编译后:
<img src="/img/03.ea62525c.jpg" alt="">

当路径的文件名需要拼接变量的时候，可使用 require() 引入，在 template 的:src 或者 script 的 data computed 中都可以进行 require 引入或拼接

<img src="/images/04.jpg" alt=""> // -
// 编译后:
<img src="/images/04.jpg" alt="">

用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。
当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示
但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀
publicPath 是部署应用包时的基本 URL，在 vue.config.js 中进行配置，详情参阅官方文档

<img :src="this.publicPath + 'images/05.jpg'" alt=""> // √
// 编译后:
<img src="/foo/images/05.jpg" alt="">
<script>
export default:{
    data(){
        return {
          publicPath: process.env.BASE_URL,
        }
    },
}
</script>


//vue.config.js
module.exports = {
    publicPath:'/foo/',
    ...
}

引入publicPath并且将其拼接在路径中，实现引入路径的动态变动

7.引入控件时全局引入之后在某些页面不可用

原因暂时未知，需要在使用的页面重新引入

import dataV from '@jiaminghi/data-view';
import Vue from "vue";

Vue.use(dataV);

8.拼接字符串

 <a :href='"https://" + url'> {{message}} </a>

9.render函数

      warnLabel: (h) => {
        return h('div', [
          h('span', {
            style:{
              color:'#ff9900'
            }
          },'紧急'),
          h('Badge', {
            props: {
              count: this.warnCount
         

8.监听localStorage变化

需要重写方法

//首先在uitils文件中新建方法
util.dispatchEventStroage = function(){
  const signSetItem = localStorage.setItem
  localStorage.setItem = function (key, val) {
    let setEvent = new Event('setItemEvent')
    setEvent.key = key
    setEvent.newValue = val
    window.dispatchEvent(setEvent)
    signSetItem.apply(this, arguments)
  }
}

//然后在index.js中进行引入
import Util from '../libs/util';

Util.dispatchEventStroage();

//在页面内进行使用
const that = this;

window.addEventListener('setItemEvent', function (e) {
		if(e.key && e.key === 'alarmEvent' && e.newValue){
			......
		}
})

9.echarts图表的显示与隐藏

使用v-show配合this.$nextTick实现

在vue中dom的更新也是一个异步事件，nextTick也是一个异步事件，新增加的异步事件一定在队列最后，所以保证执行echarts加载时，dom已经存在

<div id="electricityConsumptionStatisticsBarEchartsDiv" v-show="!isParent" :style="{height:`${this.pageHeight - 200}` + 'px'}"></div>

this.$nextTick(() => {
    //	这里写echarts的加载
})

10.for循环顺序创建左右图表

    <div :style="{height: divHeight}"
         style="background-color: #EDF1FF;margin: 0 0 14px 0;box-shadow: 0 4px 5px 0 #CCCCCC; padding: 20px 20px 0 20px;">
      <Card v-for="(i, index) in parseInt(lineNumber)" style="width:49%; height:410px;  margin-bottom: 20px;background: #EDF1FF"
            :key="`k-${index}`" :style="{'float': (i%2 !== 0) ? 'left' : 'right'}">
        <div :id='"echarts" + i' style="height: 375px;width: 100%"></div>
      </Card>
    </div>