![](https://img-blog.csdnimg.cn/86cdb9f98dee438aa41ce958831576ee.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
终结!
前端报刊
来了老弟......!
展开
-
vue双向绑定原理
双向绑定的原理也叫响应式原理,Vue它是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调,来完成双向绑定。Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。Object.defineProperty()方法接收3个参数:第一个参数:需要定义属性的当前对象;第二个:当前需要定义的属性名;第.原创 2021-04-18 18:58:46 · 334 阅读 · 0 评论 -
Vue实例常用的4个选项
我们都知道,定义一个Vue实例的参数选项除了有el(指定挂载的DOM元素)、data(实例的数据)之外,还可以定义其他的参数。今天我们讲Vue实例常用的4个参数选项:filters(过滤器)、computed(计算属性)、methods(方法)、watch(观察)1、filters(过滤器)第一个要讲的就是过滤器filters选项,那么为什么要有这个东西呢?首先,我们举个例子,假设我们有一组数字,并且都是小数,如下:<script>export default { .原创 2021-04-01 22:31:51 · 2356 阅读 · 0 评论 -
vue-cli2.x:vue项目运行npm run dev命令时,项目在浏览器自动打开页面的方法
1.方法一:找到配置文件 config => index.js , 修改配置 autoOpenBrowser: true ,默认是false,改成 true 即可;如下图:2.方法二:这种方法比较万能, 在 package.json 文件下 修改 scripts 中 dev 的命令 在里面加上 --open ; 如下图:...原创 2021-04-01 15:56:22 · 600 阅读 · 0 评论 -
axios在vue中的使用
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { count: 0, name:'小明', age:20, sex:'男' }, getters: { doneTodos(state) { return state.count; }, mapName(state){ .原创 2021-03-26 19:02:02 · 33041 阅读 · 10 评论 -
像开发Element-Ui一样开发vue组件,当作npm包并上传到npm上
开发vue组件首先要做的事就是先创建一个vue项目,通过vue-cli命令创建vue项目。npm install -g @vue/clivue create vm-mint-ui新创建好的项目,目录如下:下面我们修改一下配置文件,根据个人习惯修改。package.json(初始配置)package.json(现修改为)将“private”:true修改为false,即由私有的改为公共的才能上传到npm上,否则的话会上传失败。项目启动,在这...原创 2022-01-29 12:26:57 · 1716 阅读 · 0 评论 -
Vue中watch(监听器)的用法详解(通俗易懂,简单明了)
官方解释:一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 watch,遍历 watch 对象的每一个 属性。示例:滴哟<template> <el-card class="box-card"><el-input v-model="name" style="width: 30%;"></el-input></el-card></template.原创 2022-01-19 12:08:21 · 37071 阅读 · 11 评论 -
vue项目:element-ui---el-upload上传视频
<!-- 上传 --> <el-upload v-if="ruleForm.jump === 1" class="upload-demo text-images" action="https://up.qbox.me" :limit="1" :data="formData" list-type="picture-card" :file-list="photo" :before-upload="beforeUpload"...原创 2021-08-22 18:06:49 · 1181 阅读 · 0 评论 -
Vue项目中,如何使用ECharts:(2)折线图
从畅享畅享畅享畅享原创 2021-08-12 14:17:32 · 708 阅读 · 0 评论 -
JS: 格式化数字,格式化金额
格式化数字,格式化金额:function number_format(number, decimals, dec_point, thousands_sep) {/** 参数说明:* number:要格式化的数字* decimals:保留几位小数* dec_point:小数点符号* thousands_sep:千分位符号* */number = (number + '').replace(/[^0-9+-Ee.]/g, '');v...原创 2021-08-12 05:24:59 · 315 阅读 · 0 评论 -
vue项目: Table表格合计 ( Element )
<template> <el-card class="box-card"> <!-- 只合计不做其他处理 --> <h2>只合计不做其他处理</h2> <el-table :data="tableData6" border show-summary style="width: 100%"> <el-table-column prop="id" label="ID" width="180" align="ce..原创 2021-08-12 05:11:30 · 2944 阅读 · 0 评论 -
vue项目中,导出下载Excel表格
方法:// 导出详情数据 exportExcel() { const data = { time_type: '', type_id: this.activity_type, activity_id: this.activity_id, start_day: this.formDate.start_time, end_day: this.formD..原创 2021-08-11 15:58:22 · 383 阅读 · 0 评论 -
element-ui上传图片
<template> <el-card class="box-card"> <h2 style="margin-bottom: 20px;">element-ui上传图片</h2> <el-upload action="#" list-type="picture-card" :auto-upload="false"> <i slot="default" class="el-icon-plus"></i>..原创 2021-07-25 01:34:03 · 199 阅读 · 0 评论 -
element-ui导入Excel文件
<template> <el-card class="box-card"> <h2 style="margin-bottom: 20px;">element-ui导入Excel文件</h2> <el-upload multiple action="fileUrl" :limit="limitNum" accept=".xls,.xlsx,csv" :file-list="fileList" :before-upload="befor..原创 2021-07-25 01:30:14 · 3125 阅读 · 0 评论 -
vue中,图片下载到本地,图片保存到本地
<template> <el-card class="box-card"> <div> <h2 style="margin: 20px;">vue中,图片下载到本地,图片保存到本地</h2> <el-button type="primary" @click="downs()">下载图片</el-button> </div> </el-card></template&g.原创 2021-07-24 21:29:20 · 5334 阅读 · 5 评论 -
JS中防抖和节流
假设一个场景:比如你快速点击一个按钮的时候,你会发现,无论你点击的有多快,只要点击了一次,日志就会打印一次;需求:在快速点击的过程中,如何只让最后一次点击能产生效果。原创 2021-06-09 02:21:30 · 170 阅读 · 0 评论 -
Vue项目中,如何使用ECharts:(1)安装ECharts
一、安转echarts这里只介绍npm install echarts --save原创 2021-06-02 00:09:15 · 1961 阅读 · 4 评论 -
vue-cli3+/4+中的vue.config.js文件配置项
一、publicPathType:string Default:'/'转载 2021-05-28 23:48:56 · 653 阅读 · 0 评论 -
Vue脚手架vue-cli:新老版本的安装及创建项目等方式的比较
vue-cli 3.0 正式版本于2018年8月发布,截止到2020年08月05日版本已经更新到4.4.6。Vue CLI 的包名称由 vue-cli 改成了 @vue/cli,目前网上很多的Vue项目搭建教程由于没有说明使用的vue-cli的版本,不同的操作方式往往给新人造成很大的困扰。3.0+与2.*版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友。...原创 2021-05-27 19:28:12 · 939 阅读 · 0 评论 -
Vue后台管理系统权限控制
基于Vue和element-ui组件库搭建后台管理系统,处理权限控制相关问题;包括:菜单控制、界面控制、按钮控制、请求和响应控制。原创 2021-05-17 14:25:43 · 225 阅读 · 0 评论 -
Vue面试题:Vue中我改变了data中的一个值,但现在视图上没有实时更新,请问我怎么拿到更新后的值?(考察Vue中$set作用)
在我们进行Vue项目开发的过程中,当Vue实例生成后,想要再次给数据赋值时,有时候并不会自动更新到视图上。比如:我们想给Vue实例data数据中的某个对象新增一个属性,但新增的属性有时候并不会自动更新到视图上,是因为Vue实例中的数据是响应式的,而我们新增的属性并不是响应式的,由于受现在JavaScript的限制,Vue无法检测到属性的新增或删除。所以有时无法实时的更新到视图上。<template> <div> <div>首页</div..原创 2021-04-25 19:57:57 · 986 阅读 · 3 评论 -
面试题:Vue路由跳转的四种方式
1.第一种:router-link(声明式路由)当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用router.push(...)。router-link中常用的几个属性:(1)to(string | Location):表示目标路由的链接。当被点击后,内部会立刻把to的值传到router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。字符串型&l...原创 2021-04-24 03:09:58 · 1111 阅读 · 0 评论 -
Vue核心面试题:为什么Vue组件中的data是一个函数(而不是一个对象)
<script> export default { data() {//data是一个函数,data:function(){}的简写 return { //页面要初始化的数据 disabled: true, isArrowdown: false, submenuName: '', childName: '', sideName: '', indexData: [.原创 2021-04-22 02:19:12 · 1087 阅读 · 1 评论