qq_42546652的博客

一、v.stop作用 ：阻止事件冒泡<div @click="alert(1)"> <div @click="alert(2)">第二个</div></div>此时点击第二个 div 弹出的顺序为 2 1<div @click="alert(1)"> <div @click.stop="alert(2)">第二个</div></div>弹出的就只有2二，v.prevent作用 阻止事件

MVVM，MVC都是一种设计模式我们常用的vue框架实际上就使用了MVVM这种设计模式，采用了双向绑定的原理。MVVM—M:model 逻辑层 V:view 视图层 VM:view-model 视图模型实现的方式是DOM事件监听。在这种模型下 实际上是视图和模型之间是不能直接通信的。他们通过ViewModel来通信。通常要实现一个observer观察者。数据发生变化的时候。ViewModel能够监听到数据的这种变化。然后通知到对应的视图做自动更新。用户操作视图 ViewModel也能监听到视图的变

什么是SPA?单页 Web 应用 (single-page application 简称为 SPA) 是一种特殊的 Web 应用。它将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了， SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。SPA的优点是什么、？1.良好的

Vue.directive('scroll', { inserted(el) { el.scrollIntoView() }})自动滑动到底部

这就是一个平平无奇的日期选择器。第一次点击正常无比。在第二次开始切换之后。就出现弹出框错位的问题。百思不得其解。如下图所示于是乎 阿陆同学就开始尝试改动样式问题。甚至翻阅了饿了么的文档 以为是没有放置align:center这个属性导致的。经过百般尝试。没想到是v-if导致出来的错误！！！！瞳孔震惊。原理是什么 不清楚 总之将v-if改成了v-show就完美的解决了。附送部分代码一张。...

less和sass都是css的一种预处理器。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。sass和less的区别1、Less环境较Sass简单2、Less使用较Sass简单3、从功能出发，Sass较Less略强大一些4、Less与Sass处理机制不一样（前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点）关于变量在Less和Sass中的唯一区别就是Less用@，Sass用

时隔很久复盘一下这个问题。当时遇到了，虽然按照自己的常规写法。但是出现了一个不知道如何解决的问题----点击三次才能正常获取到数据。不知道如何产生的这种情况。但是目前先整理出来可以正常获取出来的正确操作 <!-- 表格主体部分 --> <el-main class="table-container"> <div class="tableBox" :style="height" > <el-table :data="t..

加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新过程父beforeUpdate->父updated销毁过程父beforeDestroy-&gt

由于我们产品的幺蛾子。据说那是个风和日丽的下午。产品大人去和大佬们谈需求。大佬们说要把这个树结构里的数据啊 改一改。也就是上面的数据里后面为0的就不显示了。如下图是的 没有看错。于是乎就产生了思考。让我这个过了十一还没怎么动手敲过代码的孩儿 重新捡起来js。oh~nice getThreeData() { this.$axios.get(this.MICRO_CONFIG.baseUrl + "/transferStation/transferStationTree").t.

先上图如上图所示，在运用饿了么这个组件库的时候。有时因为表格字数过多导致内容溢出。一般会采用:show-overflow-tooltip="true"这个属性。该属性可以让内容在一行显示，如果显示不下时，显示…,并且鼠标划过时显示全部文字如果想要上述提示中所有的提示字都完整显示出来，那么就需要修改这个样式：样式代码如下：可以在全局添加这样全部生效，如果不想加在全局的话，可以单独加在页面当中，但是切记修改elementui自带样式的话，不能在中修改，因为不会生效。一个全局的代码段：...

先上效果图上传Pdf的具体代码如下： <el-upload class="upload-demo" ref="upload" :action="action" :on-preview="handlePreview" :on-remove="handleRemove" :befor

项目中遇到需要导出excel的需求首先安装依赖首先安装依赖项：npm install -S file-saver xlsx或者是以下命令，这两个命令一样。npm install --save xlsx file-saverfile-saver：保存文件xlsx：电子表格解析器接下来我们开始写一个表格，给表格一个id（项目中用到id并没有多大用，不知道是哪里的问题 总之先带着还是没毛病的）<el-table :data="meterList" style="width: 100

好记性不如烂笔头。总也记不住<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="新密码" prop="newPwd"> <el-input v-model="ruleForm.newPwd" clearable size="sma

我们大部分情况下 使用计算属性即可。但是watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。<div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p></div><!

1.简洁的模板方式实现<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})生成的页面：动态绑定属性：<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span&

vue模糊搜索关键代码如下： <el-input placeholder="请输入关键信息" v-model="keyword" class="input-with-select" @keyup.enter.native="findKey" clearable @change="getCompany()"> <!-- @change="pageNum=1,getCompany()" --> <el-button cl

代码如下<el-select v-model="currentObj.carUnitName" size="small" clearable placeholder="请选择运营单位" style="width: 100%" @change="chooseUnits"> <el-option v-for="item in unitsArray" :key="item.code" :label=

父组件：子组件：利用Props接收上述打印应该为console.log(this.itemId)