vue工作总结

555 阅读2分钟

过滤器的应用

  • 插值表达式中应用 {{scope.row.createTime | formatDateTime}}
filters: {
  formatDateTime(time) {
    if (time == null || time === '') {
      return 'N/A';
    }
    let date = new Date(time);
    return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
  }
},

$confirm then()中无法使用await

$confirm then中的异步请求

在$confirm中需要点击确定之后再执行某些操作,最开始我是直接写在methods的方法前面,但是直接报错Can not use keyword ‘await’ outside an async function(不能在异步函数外使用关键字’await’),所以判断await所在的区域不是异步函数,需要把async放到then()里面即可

image.png

el-select 配合value-key="id" 使用及回显

项目中后端需要传当前option的id和name,所以通过以下方式传递,参考地址:www.cnblogs.com/yxkNotes/p/…

 <el-form-item label="反馈内容">
        <el-select v-model="fankui_contentobj" class="shutiao" value-key="id" @change="selectSubjectItem($event)">
          <el-option v-for="item in fkcontentType" :key="item.id" :label="item.name" :value="item" />
        </el-select>
</el-form-item>
data() {
    return {
        fankui_contentobj: { id: '' }, // v-model绑定的是对象时,select 有value-key="id" 时
    }
}
methods:{
    init(){//回显
        for (const key in this.form) {
            this.form[key] = this.info[key]
          }
        // 处理反馈内容和类型
          this.fankui_contentobj.id = this.info.fankui_content
    },
    selectSubjectItem(event) {
      console.log('event', event)
      this.form.fankui_content = event.id
      this.form.fankui_content_text = event.name
    },
}

JSON

JSON字符串转换成JSON对象 var obj = JSON.parse(str)

JSON对象转换成JSON字符串 var str = JSON.stringify(obj)

JSON方式拷贝对象 Json.parse(Json.stringify(obj))

vuex的使用

每个页面获取人员时候都要重复调取接口,所以把请求的数据放到vuex里

方式1:

image.png

方式2:

image.png

移动端调试工具 --eruda.js

Vue 兄弟组件的通信方式,可以采用eventBus

www.cnblogs.com/wjw1014/p/1…

vue父子组件的生命周期顺序,index(父) list(子)

创建:created mounted index created list created list mounted index created

更新:update index beforeUpdate list beforeUpdate list updated index updated

销毁:destroyed index befordestory list beforedestory list destroyed index destroyed

elementUI日期选择器快速选择(今天,昨天,本周上周,本月上月,1234季度)

blog.csdn.net/qq_43440659…

Vue 中Data,Observe,Dep和watcher的关系

  • Data 通过Observe 转换成了getter,setter的形式追踪变化
  • 当外界通过watcher 读取数据时,会触发getter 从而将watcher添加到依赖中
  • 当数据发生了变化时,会触发setter,从而向Dep 中的依赖(watcher) 发送通知
  • watcher接受通知后,会像外界发送通知,变化通知到外界后可能会触发视图更新,也可能触发用户的某个回调函数。

image.png

v-show 和 v-if

v-show 类似于display切换,通过它显示子组件时,用show不会再次进入子组件的created 钩子。

v-if “真正”的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-model的本质

1.v-bind 绑定 value 2.通过监听input的事件,更新message的值

<input type="text" :value="message" @input="message=$event.target.value">

vue-element-admin三级路由无法缓存的问题

blog.csdn.net/weixin_4011…

vue父组件传递对象类型给子组件,props 接收不到值的问题

blog.csdn.net/kairry_/art…

vue resize 时 用到防抖时销毁不了事件

www.cnblogs.com/dzyany/p/14…

js如何查找两个数组是否包含公共项?

方法1:将第一个数组中的每个项目与第二个数组的每个项目进行比较

● 循环遍历array1并从开始到结束迭代它。

● 循环遍历array2并从开始到结束迭代它。

● 比较array1和array2中的每个项目

示例:

<script>
	var arr = new Array();
	var array1 = ['a', 'b', 'c', 'd'];
	var array2 = ['k', 'x', 'z','c', 'd'];

	function findCommonElement(array1, array2) {

		// 遍历array1 
		for(let i = 0; i < array1.length; i++) {

			// 遍历array2 
			for(let j = 0; j < array2.length; j++) {

				// 将array1中的每个数组合array2中的每个数组进行比较
				if(array1[i] === array2[j]) {

					arr.push(array1[i]);
					
				} 
			}
			
			
		}
		if(arr.length==0){
			console.log("两个数组间没有公共项");
		}else{
			console.log("公共项为:" + arr);
		}
		
		
	}

	findCommonElement(array1, array2);
</script>

输出:公共项为:c,d

方法2:

● 使用内置的ES6函数some()迭代第一个数组的每个元素并测试数组。

● 使用内置函数includes()和第二个数组来检查元素是否存在于第一个数组中。

● 如果公共元素存在则返回true,否则返回false

示例:

<script>
	var array1 = ['a', 'b', 'c', 'd'];
	var array2 = ['k', 'x', 'z','c', 'd'];

	function findCommonElement(array1, array2) {
		console.log(array1.some(item => array2.includes(item)))
	}

	findCommonElement(array1, array2);
</script>
输出:true

# vue-element-admin改造顶部一级导航,侧边二级导航+权限路由

blog.csdn.net/qq_41705342… blog.csdn.net/weixin_4318…

# # 基于element UI input组件自行封装“数字区间”输入框组件

blog.csdn.net/My_Soul_/ar…

vue element组件库限制只能输入数字,且保留小数后两位

https://www.jianshu.com/p/75df2814be0e


$ref.**.contains 报错

https://www.freesion.com/article/33241074504/