vue
一去不复返go
前端程序员
展开
-
Vue3状态管理库——Pinia
Vue3状态管理库——Pinia原创 2022-10-06 19:38:02 · 1268 阅读 · 1 评论 -
全局Vue组件定义的三种方式
注意1.如果使用Vue.component定义全局组件的时候,组件名称使用了驼峰命名,则在引用组件的时候,需要把大写的驼峰改为小写的字母,同时,两个单词之前使用-链接;2.不论是哪种方式创建出来的组件,组件的template属性指向的模板内容,必须有且只有唯一的一个根元素。1.2使用Vue.component(‘组件的名称’,创建出来的组件模板对象)第一个参数组件的名称,引用组件的时候,就是一个HTML标签形式来引入的。1.1使用Vue.extend来创建全局的Vue组件。...原创 2022-07-23 14:17:03 · 1400 阅读 · 0 评论 -
v-cloak指令的使用
v-cloak原理是先通过样式隐藏内容,然后在内存中进行值的替换,将替换的内容再反馈给界面,数据渲染完场之后,v-cloak属性会被自动去除。v-cloak指令常常用在插值表达式的标签中,因为它可以解决当网络加载很慢时,或者频繁渲染时候,页面就会显示出源代码的情况。然后,在css中设置v-cloak的属性为display为none。首先,在差值语法所在的标签处加上v-cloak指令。v-cloak的使用场景。...原创 2022-07-19 10:58:20 · 5972 阅读 · 0 评论 -
什么是跨域 , 跨域解决方法
一、为什么会出现跨域问题出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)二、什么是跨域当一个请求url的协议、域名、端口三者转载 2022-06-06 15:34:25 · 383 阅读 · 0 评论 -
去除element table表格所有边框
在表格外层包一层自定义的div class="table-wrapper",利用三箭头深度修改/* *表格背景透明 */ /* //透明化整体 */ .table-wrapper /deep/.el-table,.el-table__expanded-cell { background-color: transparent !important; } /* //透明化行、单元格,删除表头下横线 */ .table-wrapper /deep/ tr, .table-wrapper /.原创 2022-05-31 21:30:00 · 4174 阅读 · 0 评论 -
vue3 权限菜单( 树形菜单)无限循环
在系统开发过程中,最常见的一个需求就是权限控制了,大到整个系统的用户权限的管理,小到某个状态下操作权限的判断。其中最常见的操作就是权限的添加、删除、鉴权等,那么有什么简单的方法可以去控制这些权限呢?这个项目是根据后台返回的用户可访问的id来判断用户是否有权限来更改这个页面首先看一下后台返回的数据格式,一维数组需要我们把数据进行使用递归算法动态渲染不定层级的菜单将一维数组通过递归生成el-tree所需要的树形结构数组。...原创 2022-05-19 19:45:59 · 1731 阅读 · 0 评论 -
vue3,echarts图表的使用
首先是先引入echarts图表第一步: 安装npm install echarts --save在main.js引入import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'import * as echarts from 'echarts' const原创 2022-05-16 17:26:13 · 3242 阅读 · 0 评论 -
vue3 百度地图marker图片引入
动态引入图片require()和import()一、require// html<img :src="imgList[0]" />// xxx.jslet imgList = [ require('../images/a.png'), require('../images/b.jpg')]let imgName = 'a'; let imgAllName = 'a.png';// example 1let imgUrl = require('...原创 2022-05-15 09:30:00 · 544 阅读 · 0 评论 -
Element-ui(el-table、el-pagination)实现表格分页
<div class="pagination"> <el-pagination background layout="total, sizes, prev, pager, next" :current-page="query.pageIndex" :page-size="query.pageSize" :page-sizes="pageSizes" :total="query.pageTotal" @size-change="handleSizeChange.原创 2022-01-05 17:10:07 · 556 阅读 · 0 评论 -
Vue中html导出docx文件和table导出excel
html导出docx文件方法一、技术实现:fileSaver.js+html-docx-jshtml-docx.js,这个比较是16年的插件,不适合现在的,主要就是with(obj){}这个已经不符合规范,有的框架不适用1.npm安装$ npm install --save html-docx-js$ npm install --save file-saver2.引入import htmlDocx from 'html-docx-js/dist/html-docx';imp.原创 2022-01-05 16:39:12 · 4402 阅读 · 0 评论 -
vue3中购物车单选,全选计算总价购买
购物车的全选,单选,计算总价钱先用请求的数据循环输出到页面,在数组中为每条数据input加一个状态在每条数据的input中加点击事件传下标计算方法封装到一个函数中,计算选中状态的商品,在每次使用时调用,点击单个商品卡片的时候传这个当前商品的下标,然后在事件中检查当前信息中存在不存在选中的属性如果不存在则给这个信息中添加这一属性,如果该商品存在这一属性则状态取反循环数组判断为true的数量是否与数组长度相等,是则全选框也为true,当有一个单选为false时全...原创 2021-12-26 17:56:05 · 1127 阅读 · 0 评论 -
vue页面间传递数组参数
原创 2021-12-25 10:04:10 · 905 阅读 · 0 评论 -
Vant组件的基础应用
1.安装1.1通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn进行安装:# Vue 2 项目,安装 Vant 2:npm i vant -S# Vue 3 项目,安装 Vant 3:npm i vant@next -S1.2通过脚手架安装在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架Vue Cli创建项目并安装 Vant。# 安装 Vue Clinpm install -g @vue/cli# 创建一个项...原创 2021-12-12 09:49:02 · 750 阅读 · 0 评论 -
vue介绍
vue介绍前端三大框架:Angular、React、Vue,目前React最火,Vue和Angular不相上下,但发展趋势vue更大,在大型超大型web应用开发上,看好Angular,小型应用上,看好vue,个性化需求、中型应用,更倾向react 渐进式框架:vue只提供数据驱动和组件开发等核心功能,可以根据需要去安装第三方库实现丰富的功能,比如Vuex、axios、vue-routerVue.js目前最流行的的一个前端框架,三大主流前端框架[1]之一。 AngularJS是Vu...原创 2021-12-01 18:58:10 · 812 阅读 · 0 评论