前端 - Vue & Element
文章平均质量分 57
前端 - Vue & Element
仁王_雅治
想一想,一步步来到这里也挺不容易的
展开
-
VueCli -- 如何搭建一个与 element ui 结合的前端工程
1、新建工程,cd 到工程对应目录npm installnpm install --save element-ui2、启动工程npm run dev3、main.js4、新建一个 A.vue 文件<template> <div> {{test}} </div></template><script> export default { name: "A", data() {原创 2021-12-09 08:06:17 · 299 阅读 · 0 评论 -
VueCli -- 如何使用 idea 搭建一个 Vue Cli Hello World 工程 & Router 跳转 & 如何去掉连接中的 #
如何新建一个 vue01 工程:https://celtics.blog.csdn.net/article/details/121355597vue01 工程创建完成后,在 Idea 中将工程打开File -> Open -> 选择 E:\vue01 这个目录,打开由于我们之前已经在 vue01 这个目录下执行过 npm install,因此直接在 Terminal Local 中执行 npm run dev 或者直接在 npm 模块中直接点击 dev,就可以启动工程,并访问 http:/原创 2021-11-16 19:51:50 · 801 阅读 · 0 评论 -
Vue -- 如何解决页面在 mount 中的方法执行完成后才开始加载 & 如何为页面设置遮罩
this.mounted=function(){ this.getAllVirtualResourceList();},假设在 mount 中执行的 getAllVirtualResourceList 函数十分耗时,造成了整个页面在函数未执行结束前都无法渲染。这显然是有问题的,可以确定应该是语法层面的问题。页面的渲染过程无需等到 mount 中的方法执行完成后才能进行那为什么会造成这种情况呢?经过排查,发现是在 getAllVirtualResourceList 函数的 ajax 请求中,用到了原创 2020-12-30 00:38:30 · 1397 阅读 · 0 评论 -
Vue -- 使用 element 布局实现页面五等分 & gutter 用法
<el-row :gutter="20" style="height:100%;margin:5px 3px 0 15px"> <el-col v-for="partData in overviewPartData" :span="4" style="height:100%;padding-left:0px;width:20%"> <div style="border:1px solid #eee;height:100%;background-color:#fff;pad原创 2020-12-10 00:05:49 · 6890 阅读 · 0 评论 -
Vue -- 计算属性 computed 的使用及原理介绍,同普通方法有什么区别,同 watch的区别
computed与 watch 的不同在于,watch 是监控这个变量,当这个变量发生变化时触发,compute 是监控与这个变量相关的其他变量(方法中出现的),当这些相关变量发生变化时触发,改变当前这个变量的值注意:在 computed 中定义的字段,就不能在 data 中定义了每增加一个信息框,在启动顺序,停止顺序中就增加一个选项this.computed={ paramsOptio...原创 2020-05-04 21:17:25 · 542 阅读 · 0 评论 -
Vue -- 实现弹框提示 & 弹框交互提示 & 上方浮现
弹框–不交互commonConfirm.show(commonConfirm.level.info, jobManagement_I18N.SAVE_SUCCESS);弹框–交互commonConfirm.show(commonConfirm.level.warn, jobManagement_I18N.DELETE_AFFIRMED, function(params) {...原创 2019-10-29 16:48:22 · 2114 阅读 · 0 评论 -
Vue -- 如何实现页面每隔一段时间自动刷新
this.mounted=function(){ // 需要在一开始调用一下方法,否则在开始的30s是没有数据的 this.getAppListTableData(); if (this.timer) { clearInterval(this.timer) } else { this.timer = setInterval(() => { ...原创 2020-05-06 20:31:54 · 4853 阅读 · 1 评论 -
Vue -- 如何在 span 标签上实现一个点击事件
使用 jquery 时,常通过 on(“click”,function) 的方式为选中的页面元素绑定单击事件$(".myclass").on("click" , function(){}在 Vue 中则不必这么麻烦,如果想为某一个 span 标签绑定 click 单击事件,只需:<span @click="test">Test</span>...原创 2020-08-31 23:44:23 · 14954 阅读 · 1 评论 -
Vue -- 如何在 html 中引用 js 中定义的变量 & 空格如何在 html 中表示
jsthis.data=function () { return { rcResTypeId :'' }},html{{rcResTypeId }} <span class="rootcause-node" slot-scope="{node,data}"> <span>{{ node.label }}</span> <span v-if="data.id == rcResTypeId && !node.is原创 2020-09-02 00:02:12 · 2743 阅读 · 0 评论 -
Vue -- v-for 遍历逻辑 & v-if 在 v-for 中的使用 & 报错:should have explicit keys & 双大括号理解
简单遍历数组<div id="tabContainer" style="height:100%;width:100%;"> <el-col v-for="obj in infoTableData"> <div> {{obj.resId}} + {{obj.resName}} </div> </el-col></div>function init(){ this.template='#testId', thi原创 2020-12-23 01:11:28 · 1273 阅读 · 0 评论 -
Vue -- 借助 v-if,v-else-if,v-else 在 html 中实现多重逻辑 & 如何判断数组不为空 & 如何判断变量不为空
<el-row v-if="item.appInfo!==undefined && item.appInfo.length>0">如果只写 <el-row v-if="item.appInfo.length>0"> ,会在一些情况下由于 item.appInfo 为 undefined 而报错原创 2020-05-08 22:59:23 · 2541 阅读 · 0 评论