vue
关注
分享
扫一扫
vip李少
这个作者很懒，什么都没留下…
展开
-
VUE生命周期函数使用场景
生命周期运用场景created：进行ajax请求异步数据的获取、初始化数据mounted：挂载元素内dom节点的获取nextTick：针对单一事件更新数据后立即操作domupdated：任何数据的更新，如果要做统一的业务逻辑处理watch：监听具体数据变化，并做相应的处理nextTick作用：使用该函数可DOM操作（在修改数据之后立即使用这个方法，获取更新后的 DOM，进行操作） 通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它，对新DOM的js操作原创 2021-06-11 18:32:48 · 681 阅读 · 0 评论 -
vue生命周期函数
官方图详解<body> <div id="app"> <h3 id="h3">{{msg}}</h3> <input type="button" value="修改msg" @click="msg='No'"> </div> <script> var vm = new Vue({ el:'#app',原创 2021-06-11 16:10:57 · 242 阅读 · 0 评论 -
vue嵌入html页面显示
1，html文件必须放到根目录的public下（有静态文件夹static的好像也可以，没试过）2，在使用的vue页面引入 <div> <iframe src="../../../../../beijing.html" frameborder="0" style="width: 100%; height: 100%" id="iframeBox" ></iframe> &l原创 2021-06-08 15:22:08 · 3927 阅读 · 2 评论 -
vue屏幕监测当前屏幕总高度,宽度
//分辨率适配 var _height =Number(window.screen.height); // this.clientHeight = _height * 2 -90 this.clientHeight = _height -45原创 2021-06-02 10:20:27 · 265 阅读 · 0 评论 -
VUE指定元素吸顶
1<template> <div> <ul> <li v-for="(item, index) in headerData" :key="index">{{ item }}</li> </ul> <!-- 这里需要给组件添加一个class，用于控制固定的位置，看css注释部分 --> <sticky-slot class="stickyTop"&原创 2021-06-01 15:49:23 · 394 阅读 · 0 评论 -
vue封装接口，网络请求，router.js
1，接口 (api.js) 使用的话注册全局变量或者使用页面引入 export const baseUrl="https://xxxxxxxxxxx.cn/api/"; //线上 //export const baseUrl = "http://192.168.1.164:1800/api/"; //线下export const api = { "checkUserLogin": baseUrl + "Admin/check_user_login", //原创 2021-05-29 23:17:22 · 511 阅读 · 0 评论 -
Vue定义全局变量
定义import Vue from 'vue'import router from './router'import App from './App.vue'import './plugins/vueamap.js' // vue-amap 高德地图import './plugins/element.js' // elemnt组件import {post,get,put,deletes,toJson,isEmpty} from './plugins/http.js' // 请求方式中间件原创 2021-05-29 22:50:43 · 364 阅读 · 0 评论 -
七牛云，el-upload简易使用上传图片示例
1， el-upload图片上传回显<template> <div class="admin_form_main"> <el-form label-width="100px"> <el-form-item label="背景图"> <div class="imagess"> <el-upload :file-l原创 2021-05-29 22:40:25 · 224 阅读 · 0 评论 -
数组树状子节点显示在列表
<template> <div class="qingwu"> <el-table :data="list" @selection-change="handleSelectionChange" row-key="id" :lazy="true" :load="load" :tree-props="{ children: 'area', .原创 2021-04-17 23:21:42 · 158 阅读 · 0 评论 -
el-date-picker区间选择器使用
<el-form-item label="日期:"> <el-date-picker type="daterange" value-format="yyyy-MM-dd" v-model="info.dateValue" range-separator="-" start-placeholder="开始日期"原创 2021-04-15 13:35:33 · 169 阅读 · 0 评论 -
js字符串替换
js中字符串的替换在js中字符串全部替换可以用以下方法：两种区别：正则&常规str.replace(“需要替换的字符串”，“新字符串”)str.replace(/需要替换的字符串/g，“新字符串”)比如：“yyyy-MM-dd-hh-mm-ss”.replace("-","/")结果如下： “yyyy/MM-dd-hh-mm-ss”“yyyy-MM-dd-hh-mm-ss”.replace(/-/g,"/")结果如下：“yyyy/MM/dd/hh/mm/ss”综上：常规的替换原创 2021-04-15 11:23:11 · 226 阅读 · 0 评论 -
页面JSON数据导出生成excel
<html><head> <p style="font-size: 20px;color: red;">使用a标签方式将json导出csv文件</p> <button onclick='tableToExcel()'>导出</button></head><body> <script> const tableToExcel = () => {原创 2021-04-04 15:40:17 · 131 阅读 · 1 评论 -
el-table-column表格中使用el-pagination进行分页
el-table-column表格中使用el-pagination进行分页1.el-table<el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"> ...</el-table>2.el-pagination<div> <el-pagination background @current-change="原创 2021-04-04 15:32:54 · 484 阅读 · 0 评论 -
js字符串截取
示例1在下面示例中使用 lastIndexOf() 获取字符串的最后一个点号的下标位置，然后从其后的位置开始截取 4 个字符。var s = "http://c.biancheng.net/index.html";var b = s.substr(s.lastIndexOf(".") + 1,4); //截取最后一个点号后4个字符console.log(b); //返回子字符串“html”如果省略第二个参数，则表示截取从起始位置开始到结尾的所有字符。考虑到扩展名的长度不固定，省略第二个参数会原创 2021-04-08 11:29:55 · 141 阅读 · 3 评论 -
element ＜el-cascader＞ 多级下拉框设置选中
多级下拉框默认选中<template> <div> <el-cascader v-model="place_value" :options="place_options"//绑定下拉框数据 style="width:400px"></el-cascader> </div></template><script>export default {dat原创 2021-04-10 23:41:10 · 935 阅读 · 1 评论 -
Vue中watch的简单应用
Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。demo1<template> <div> <el-input v-model="demo"></el-input> {{value}} </div></template><script> export default {原创 2021-04-09 10:24:47 · 62 阅读 · 0 评论