Vue.js
Vue.js学习
喜欢吃青椒吗
这个作者很懒,什么都没留下…
展开
-
Vue中静态资源或css文件没有加载出来的说明
问题说明场景1:在Vue.js文件中,你想引入一个css样式文件,你发现引入的路径对的,却始终无法在页面上加载出来。场景2:你想用一张图片资源放到页面上,但是,尽管你的路径完全写对,但是却死活加载不出来。原因在Vue中,config目录下的index.js里面说明了index.html需要引用的静态资源路径。 // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), ..原创 2020-11-19 11:02:20 · 2041 阅读 · 1 评论 -
如何在Vue+echarts开始画一个中国地图
第一步:先npm install echarts --save 在项目中下载好包。第二部:require("../../ndee_modules/map/js/china")在node_modules中引入中国地图。设置option属性(中国地图的各项属性)定义一个方法获取DOM并setOption就行了。var myChart = that.$echarts.init(that.$refs.map);myChart.setOption(that.option);...原创 2020-11-19 11:01:09 · 178 阅读 · 0 评论 -
vue-awesome-swiper滚动插件
安装npm install vue-awesome-swiper --saveimport "swiper/dist/css/swiper.css";import { swiper, swiperSlide } from "vue-awesome-swiper";//局部引入<swiper :options="swiperOption"> <swiper-slide> slide1 </swiper-slide> <swiper-slid..原创 2020-11-19 11:00:26 · 321 阅读 · 0 评论 -
ref
ref在Vue中是用来给元素或是子组件注册引用信息到父组件或是Vue实例上,注册后的引用信息都会呈现在父组件Vue实例的$.refs上,这时,我们就可以通过 $.refs获取到引用的 DOM对象或是子组件信息。在使用 JS/Jquery 获取页面的DOM 元素时,我们一般是根据 id、class、标签、属性等其它标识来获取到页面上的 DOM元素。嗯,可以说,我们很难抛弃Jquery的一个重大原因,就是当我们需要获取到页面上的 DOM元素时,使用Jquery的 API相比于原生的 JS 代码,简单到极致。原创 2020-11-18 11:27:56 · 136 阅读 · 0 评论 -
后台管理系统的布局小解
<template> <div> <!-- 头部 --> <el-row class="vheader"> <el-col :span="24"> <vheader></vheader> </el-col> </el-row> <!-- 侧边及内容区 --> <el-row class="vbody原创 2020-11-18 11:27:34 · 223 阅读 · 0 评论 -
vuex的简单应用
一般vuex的应用npm install vuex --save 安装。在src下新建store或者vuex文件夹,在下面新建index.js文件。index.js文件中 import Vue from 'vue'; import Vuex from 'vuex' 并且 Vue.use(Vuex)const state = { //存放数据 name: 'xxx', num: 2}const mutations = { //存放一些方法,对state的操作。..原创 2020-11-18 11:27:09 · 82 阅读 · 0 评论 -
省市县联动插件 V - Distpicker
步骤一: npm install v-distpicker --save步骤二: 在main.js中全局使用。import VDistpicker from 'v-distpicker'Vue.component('v-distpicker', VDistpicker)步骤三:在组件中使用(推荐)import VDistpicker from 'v-distpicker'export default { components: { VDistpicker }}步骤四:使用&l原创 2020-11-18 11:26:52 · 232 阅读 · 0 评论 -
表格导出功能
第一版(只能导出本页面的表格,并不能导出分页的表格)npm install --save xlsx file-saver //安装插件//在需要的组件引入import FileSaver from "file-saver";import XLSX from "xlsx";exportExcel() { // 设置当前日期 let time = new Date(); let year = time.getFullYear(); let mon.原创 2020-11-18 11:26:19 · 127 阅读 · 0 评论 -
Vue无法识别数组变动
Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。换句话说,vue对象内部不会设置访问器(观察者),你要改变他让它触发视图更新,可以手动调用this.$set()`data () { return { student: { name: '' }, teach:["李磊"] .原创 2020-10-30 10:48:50 · 259 阅读 · 0 评论 -
表格分页
第一种情况:一次只展示一个页面的数据,下一页的数据需要发送数据向后台获取。<el-table> 表格</el-table><el-pagination @size-change="handleSizeChange" //改变一页/X条数据的点击事件 @current-change="handleCurrentChange" //第几页按钮 :current-page.sync="curPage" //当前是第几页 .原创 2020-10-30 10:48:15 · 244 阅读 · 0 评论 -
表尾合计
<el-table:summary-method="getSummaries"show-summary>//表格</el-table>getSummaries(param) { const { columns, data } = param; //解构params,抽出columns,data const sums = []; columns.forEach((column, index) => { if (in原创 2020-10-30 10:47:53 · 132 阅读 · 0 评论 -
在表格中,很多行的状态都绑定在一个变量中,点击一个会修改全部的状态
比如一个表格的所有行都有一个显示详情的弹窗,这个弹窗与否与绑定一个变量,但是点击其中一行的话,改变状态,所有行都打开弹窗了。思路:这个变量改成数组,点击第一行,就修改数组[0]的值,第二个就修改数组[1]的值。data() { return { delayOpenB: [] }}//执行方法showDelayB(index, row) { this.delayOpenB[index] = true; }...原创 2020-10-30 10:45:05 · 123 阅读 · 0 评论 -
Vue路由的懒加载
旧写法import Vue from 'vue' //引入Vueimport Router from 'vue-router' //引入vue-routerimport 组件名 from '组件路径'...Vue.use(Router) //Vue全局使用Routerexport default new router({ routers: [ { path:'', name:'', co..原创 2020-10-30 10:43:53 · 109 阅读 · 0 评论 -
配置开发环境与生产环境
angular# 正常angular开发流程1. 配置environments文件//在app/environments.ts文件中export const environment = { production: false, baseUrl: 'http://dev.com'; //开发环境地址};//在app/environment.prod.ts文件中export const environment = { production: true, baseURL: '.原创 2020-10-14 17:29:05 · 721 阅读 · 0 评论