
vue
2401w
不要让你的脑袋成为别人思想的跑马场
展开
-
vue2.4新增 - $attrs & $listeners & inheritAttrs
$attrs只读属性包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)可以通过v-bind="$attrs"传入内部组件包含了父作用域中不作为 props 被识别 (且获取) 的特性绑定 (class 和 style 除外)父组件<template> <div> // 子组件上绑定了三个值 - happy、peter、attrs <child :happy="happy" :peter="原创 2022-04-18 00:11:59 · 2836 阅读 · 1 评论 -
Quill富文本编辑器
// html代码<view v-model="content" class="kindeditor-component" style="width: 625px; height: 302px;"> <view id="editor"> </view></view>// 引入// 富文本import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import原创 2022-04-10 22:14:01 · 1094 阅读 · 0 评论 -
router导航守卫 - router.beforeEach()
导航守卫主要通过跳转或取消的方式守卫导航导航守卫可以用于在页面跳转前做一些需要的逻辑处理例如:点击我的,登录前跳转进入登录页面,登录后跳转进入我的页面可以在router文件夹下的index.js中写入路由导航router.beforeEach((to, from, next) => { // to:即将进入的路由对象,包含name、params、meta等 // from:即将离开的路由对象,包含name、params、meta等 // next():确保调用next(),否则钩子原创 2022-03-27 09:19:18 · 1218 阅读 · 0 评论 -
el-date-picker type=daterange日期回显
回显时,el-date-picker 所绑定的 v-model 的值已经改变,但是控件中没有实时更新在@input中采用 this.$set 方法进行数据的更新<el-date-picker v-model="baseForm.liveTime" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" @input="timeDetail原创 2022-01-23 20:57:17 · 4174 阅读 · 0 评论 -
项目在打包时,去掉所有的console.log输出
在main.js中写入如下配置// process是Node环境全部变量, 运行时根据敲击的命令不同, 脚手架会取环境变量给env添加属性和值if (process.env.NODE_ENV !== 'development') { console.log = function () {} console.error = function(){} console.dir = function(){}}...原创 2022-01-09 20:16:58 · 734 阅读 · 0 评论 -
vue中使用clipboard实现点击复制功能
1、在Vue中引入clipboardnpm install clipboard --save2、在需要的组件中引入import Clipboard from 'clipboard';3、页面中使用<view class="relation"> <span>联系我们</span> <span id="copy" class="mlr">{{copyEmail}}</span> // :data-clipboard-text=原创 2021-12-04 09:08:08 · 1156 阅读 · 0 评论 -
vue - 文件导出
接口// 导出某场考试的成绩export function scoreDownload (params) { return request({ url: '/api/eExamInfo/download', params, method: 'get', responseType: 'blob' })}调用接口// 导出downloadScore(row){ let params = { examInfoId: row.id } Exa原创 2021-11-28 17:48:32 · 403 阅读 · 0 评论 -
vue - 密码加密
第一步:在终端npm install jsencrypt安装安装后查看node_modules,确认已经安装好了第二步:在utils文件夹中新建文件rsaEncrypt.jsimport JSEncrypt from 'jsencrypt/bin/jsencrypt'// 可以在这个网站生成私钥和公钥// 密钥对生成 http://web.chacuo.net/netrsakeypair// 这个网站生成的公钥,项目暂时使用这个公钥const publicKey = ''// smp原创 2021-11-21 19:33:32 · 4726 阅读 · 1 评论 -
分页,点击加载更多
<div v-if="isHadMessage"> 暂无消息</div><div v-else> <div v-if="isLoading" @click="loadMore"> 点击加载更多...... </div></div>// 接口引入import CaseSearch from '@/api/system/caseSearch.js'data(){ return{ // 用于存放原创 2021-05-16 11:38:06 · 278 阅读 · 0 评论 -
vue - v-if和v-for不能用在同一个元素上
原因:v-for优先级比v-if高如果把v-if和v-for同时用在同一个元素上,每次渲染都会先循环再进行条件判断,会带来性能方面的浪费,所以永远不要把v-for和v-if同时用在同一个元素上用法:1、将v-if放到循环列表元素的父元素中2、在外层嵌套template层(页面渲染不生成dom节点)进行v-if判断,然后在内部进行v-for循环例子:错误写法: <div id='app'> <!-- 每循环一次,就进行一次v-if判断 比如,原创 2021-03-28 09:24:22 · 554 阅读 · 0 评论 -
vue - 高阶函数(filter、map、reduce)的基本使用
filterfilter即过滤,filter() 指创建一个新的数组,新数组中的元素是原数组中所有符合条件的元素。filter回调函数要求必须返回一个boolean值当返回的布尔值为true时,函数内部会自动将回调的值加入数组中当返回的布尔值为false时,函数内部会过滤掉该值const num = [10, 111, 14, 333, 23, 56, 67, 40, 222, 1000];let filterArr = num.filter(function(n){ return n<原创 2020-07-05 11:14:55 · 1212 阅读 · 0 评论 -
vue - 循环遍历
一. 遍历数组data: { moives: ['奥特曼', '进击的巨人', '鲁路修', '夏目'] }在遍历过程中没有使用索引值(下标值)<ul> <li v-for='item in moives'>{{item}}</li></ul>2. 在遍历过程中获取索引值<ul> <li v-for='(item,index) in moives'>{{index+1}} . {{i原创 2020-06-30 16:02:47 · 883 阅读 · 0 评论 -
vue - 条件判断
v-if 和 v-else当v-if为true时,存在v-if的标签里面的内容显示;当v-if为false时,存在v-else的标签里面的内容显示。v-else后面不需要跟表达式。data(){ message:"hello", isShow:true}<h2 v-if="isShow">{{message}}</h2><h2 v-else>isShow为false</h2>浏览器页面显示通过控制台改变isShow的值此时浏览器页面原创 2020-06-26 21:18:31 · 1529 阅读 · 0 评论 -
vue - 事件监听(v-on的使用方法及修饰符)
一. v-on基本用法v-on语法糖:@data(){ counter:0},methods(){ add(){ this.counter++; }}<button @click='add'>+</button>原创 2020-06-21 09:33:35 · 672 阅读 · 0 评论 -
vue - 计算属性的基本使用方法及完整写法(setter和getter)
一. 计算属性的基本使用计算属性虽然书写时是方法的形式,但是本质是属性,所以起名时按照属性的起名规则,应为名词data(){ firstName:'aaa', lastName:'bbb'}computed:{ fullName(){ return this.firstName+' '+this.lastName }}<h2>{{fullName}}</h2>二. 计算属性的复杂操作计算书的总价格 data: { book原创 2020-06-20 11:43:54 · 9486 阅读 · 3 评论 -
vue - v-bind动态绑定属性
v-bind基本使用作用:动态绑定指令语法糖::预期:any(with argument),任意参数 | Object(without argument),对象参数:attrOrProp(optional)v-bind:title='doubi'v-bind是指令title是参数doubi是预期值v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值在开发中需要动态绑定的属性:图片的src、网站的href、动态绑定一些类、样式等data: { li原创 2020-06-20 09:03:22 · 2352 阅读 · 0 评论