文章分类 - Vue
摘要：更改前： { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'fonts/' } } ] } 更改后： { test:
阅读全文
摘要：直接上代码： .el-message { min-width: 100px !important; padding: 8px 10px 8px 10px !important; background: #fff !important; border-color: #fff !important; b
阅读全文
摘要：使用el-popover组件时，弹出框的动画默认是fade-in-linear，设置其他的方式如下： transition的值设置：el-zoom-in-left、el-zoom-in-top、el-zoom-in-bottom
阅读全文
摘要：在Element UI中，要使el-popover在点击空白处关闭，可以通过监听全局的点击事件，并在点击空白处时关闭el-popover。以下是实现这一功能的示例代码： <template> <el-popover ref="popover" placement="top" title="标题" w
阅读全文
摘要：一个有一项数据取一个范围，并做验证，但是UI的验证提醒文字是合并在一起的，并不是每个输入框有单独的验证提醒 <template> <div class="app-container"> <el-form ref="ruleForm" :model="ruleForm" :rules="rules"
阅读全文
摘要：如果想改动单元格的行的高度，不能缩小，存在原来的高度 解决方式： 表格中设置 :cell-style="{padding:'0px'}" :row-style="{height:'20px'}" 这样就可以设置单元格的高度为20px或者更小 感谢源博主的方案：https://blog.csdn.ne
阅读全文
摘要：前端代码： <el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" style="width: 400px" type="datetimera
阅读全文
摘要：Vue在线引入地址 vue2 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> vue3 <script src="https://unpkg.com/vue@3/dist/vue.global.j
阅读全文
摘要：在安装时可以手动指定从哪个镜像服务器获取资源，我们可以使用阿里巴巴在国内的镜像服务器，命令如下： npm install -gd express --registry=http://registry.npm.taobao.org npm install --registry=https://regi
阅读全文
摘要：error:0308010C:digital envelope routines::unsupported出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响. 在node.js V
阅读全文
摘要：1. elementui自带的方式： <template> <div id="app"> <el-table :data="tableData" border style="width: 100%" ref="table"> <el-table-column fixed type="index" a
阅读全文
摘要：封装一个通用的方法 在需要使用的页面引入 /** * 通过url下载文件并对下载的文件更名 * @param {*} url * @param {*} filename */ export const downloadFile = (url, filename) => { function getB
阅读全文
摘要：Vue 中使用自定义插件： 定义一个我们的插件 myPlugin.js (function () { const Carver = {}; Carver.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMe
阅读全文
摘要：Vue的内置指令比较多：例如：v-if 、v-show、v-text、v-html、ref、v-cloak（防止闪现）等等。 Vue如何自定义指令，本节小课详细介绍： 一：注册全局指令（整个Vue实例） //所有的Vue 实例都能使用 Vue.directive('指令名', function (e
阅读全文
摘要：Vue 中的 v-if 和 v-show： v-if 和 v-show 都可以切换元素的显示和隐藏 区别：v-if 的话是直接把元素移除掉了，而 v-show 只是隐藏了元素，元素还在内存中，如果需要频繁地切换使用 v-show 比较好 使用如下： <div id="app"> <input typ
阅读全文
摘要：浅谈Vue 中列表渲染中用到的v-for： v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值 1. 基本使用【遍历一般数组】： <div id="app"> <ul> <li v-for="item in arr"> {{item}} </li> </ul> </div> <scri
阅读全文
摘要：浅谈 Watch： 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性 普通的监听： <body> <div id="app"> <input type="text" v-mod
阅读全文
摘要：computed 方法的介绍： 在初始化及相关的data属性数据发生改变的时候会调用一次哦! 特点： 计算属性在使用时不需要加(),直接写名称即可 如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值 计算属性在第一次使用时的结果会被缓存起来，直到属性中所依
阅读全文
摘要：v-on 如何操作： 为元素绑定监听事件 v-on:事件名="函数名"，简写@事件名='函数名' v-on绑定的事件触发后，vue会去实例对象的methods中找对应的回调函数 使用修饰符，如v-on:事件名.once="函数名" 使用@事件名='函数名($event)'来获取事件对象 常见的事件修
阅读全文
摘要：Vue中的 v-bind 指令基本用法和介绍： 1. 使用字符串来绑定数据 v-bind指令主要用于响应式的更新html属性，一般我们要想在元素节点的属性上绑定vue的data数据，是不可以直接使用{{ }}插入值语法来使用 <h1 title="{{tit}}">Hello World</h1>
阅读全文
