qq_45083936的博客

组件通信之 event bus

vue3.0

vue中使用async和await

flv总结

前端面试题汇总个人笔记

数组(array)方法

flv

**1.使⽤subtring() 截取字符串，对于⽂件名中会出现多个点的很有⽤，从最后⼀个点的地⽅截取代码如下： var text_name='文件名测试.mp4' // 文件名 var name=text_name.substring(0, text_name.lastIndexOf(".")); // 转码后的后缀名 var txt=text_name.substring(text_name.lastIndexOf('.')+1)

{{ size| | formatbytes}}1.组件里使用在 filters 属性里面：filters: { formatbytes: function (bytes) { if (bytes === 0) return '0 B'; var k = 1000, // or 1024 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Mat

let arr1 = ['a', 'b', 'c'] let arr2 = [ { str: 'a', num: 1 }, { str: 'as', num: 2 }, { str: 'b', num: 3 }, { str: 'ca', num: 4 }, { str: 'c', num: 5 }, { str: 'ddd', num: 6 }, ] let arr1 = ['a

//利用计算属性 computed: { listData() { return this.$store.state.listData; } }, //监听执行 watch: { listData(val) { 写上你需要的东西 } },

<div class="upload_time"> <el-upload class="upload-demo" ref="upload" multiple action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handleP.

简要描述websocket连接协议连接URIWS协议(使用这种)WSS协议新信息通知{“code”: 200, //状态码 200-监控信息变动“message”: “监控信息变动”, //信息“moduleId”: 1, //变动的模块id“time”: 1642757761000 //当前系统时间(unix毫秒级时间戳)} created() { this.initWebSocket();//webscorket }, destroyed() {

监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。watch的基本用法在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：<script>export default { name: "app", // 数据 data() { return {}; }, // 方法 methods:{}, // 侦听

<template> <div class="hello"> <el-button type="primary" size="medium" @click="quChong()">点击</el-button> </div></template><script>export default { name: 'HelloWorld', data(){ return{ arr:[

父组件向子组件传值步骤：在这里先定义一下，相对本案例来说：App.vue是父组件，Second-module.vue是子组件。一、首先，值肯定是定义在父组件中的，供所有子组件共享。所以要在父组件的data中定义值：二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：调用：　注册：　　引用：三、接下来，就可以在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：这里我绑定了两个值，一个是数组，一个是字符串。2018-03-30 10:15:55

dataList:[{id:"1,name:“li”,cretime:‘2019-02-06 :08:30’}]computed: {newdataList: function() {return this.sortKey(this.dataList, “cretime”);}},sortKey(array, key) {return array.sort(function(a, b) {var x = a[key];var y = b[key];return x >

1.ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。一、一般数组用法for of支持遍历数组、类对象（例如DOM NodeList对象，也称伪数组）、字符串、Map对象、Set对象；for of不支持遍历普通对象，可通过参考下面的Object.keys()搭配使用遍历for (le

1.通过下标判断 <div class="main_li" v-for="(item,index) in list" :key="index" :class="index == activeIndex ? 'active' : ''" ></div> data(){ return{ activeIndex: "0", } }, created(){

可以利用ES6语法 set方法1 .let arr = [1,2,3,4,5,1,2] let set = new set（arr） console.log(set) set {1,2,3,4,5}2.使用ES6中Array的Array.from静态方法，它将一个类似数组的对象转为一个数组 let arr = [1,2,3,4,5,1,2] let set =Array.form( new set（arr）) console.log(se

1.循环这个数组变成数组对象var data = [ "USA", "Denmark", "London"]; var data = [ { "id" : 1, "label": "USA" }, { "id" : 2, "label": "Denmark" }, { "id" : 3, "label": "London" } ];解决方法：1.使用push（）数据阵列 var data = [ "USA", "Denmark", "London"]; var demArray =[]; d

切换下一屏 <el-carousel :autoplay="false" arrow="never" ref="carousel" height="340px"> <el-carousel-item v-for="(item,index) in num" :key="index" name="index"> <div class="photo animated"> ..

1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save　　2.在main.js里引入import scroll from 'vue-seamless-scroll';Vue.use(scroll);new Vue({ router, store, render: (h) => h(App),}).$mount('#app');3.再组件里使用：<!-- 文件描述：无缝滚动组件--&gt

1.使用npm命令安装momentnpm install moment --save2.在main.js文件里引用momentimport echarts from 'echarts'//5.x 引用方式为按需引用//希望使用5.x版本的话,需要在package.json中更新版本号,并切换引用方式//import * as echarts from 'echarts'Vue.prototype.$echarts = echartsVue.config.productionTip = fa

前言.不同组件多次复用的话，建议在 src 下新建一个 common 文件夹，创建 date.js 文件，方便多次复用组件中使用：<template> <div> <p>{{ date | formatDate }}</p> <p>{{ date | formatDate2 }}</p> <p>{{ date | formatDate3 }}</p> </div>

1、 value-format="timestamp" daterange 上面是从ElementUI里面粘过来的:default-time 作用是 限定你选择的时间范围吧 如果你选择5月1日至5月2日 默认 传回来的一个是5月1日 00:00:00 ，另一个是5月2日 00:00:00 不知道是不是我骚错了value-formate=“timestamp” 加上这个属性的作用是 将返回你选择的日期的时间戳获取选择的时间戳 直接 value9 你就

一个参数子组件向父组件传递一个参数时主要有以下两种方法//子组件this.$emit('itemClick',item)//父组件 <div id="app"> <Child @itemClick="handleItemClick"/> </div> methods:{ handleItemClick(item){ console.log(item) } }...

1.这个key===的值为你存储sessionStorage声明的key// 只需修改xxxxx值，其余无需修改 Vue.prototype.resetSetItem = function (key, newVal) { if (key === 'roleName') { // 创建一个StorageEvent事件 var newStorageEvent = document.createEvent('StorageEvent'); const storage = { setItem: function

前言：我们在使用Vue框架时，常常会引入Vuex作为跨组件数据与状态管理工具。由于Vuex的数据是存储在内存中的，那么当浏览器刷新时，Vue实例会重新加载，原本存在的Vuex数据将会丢失。这其中可能包含一些必要的认证信息，使得站点需要重新登录，影响用户体验。前言.使用sessionStorage解决sessionStorage是window对象属性，允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在页面刷新时数据不会删除，但在关

1、app的根组件定义mounted函数：mounted() { // 监听浏览器的返回按钮 if (window.history && window.history.pushState) { history.pushState(null, null, document.URL); window.addEventListener("popstate", this.onCloseModal, false); } }2、app根组件定义dest

1.导出接口安装 js-file-downloadimport fileDownload from ‘js-file-download’;import Axios from ‘axios’import store from ‘@/store’ // 获取token3。download() {var requestUrl = “tcmp/api/devices/model”;var Authorization = store.state.user.token;Axios({method:

leftChartOne.on('click',params=>{ console.log('打开组建或者弹出方法')})leftChartOne // ehcarts 名字params // echarts 参数

1.安装echarts插件命令行：npm install echarts --save2.组件导入echarts如图：<template> <div id="tu"> <div id="lond"></div> </div></template><script>import {lond} from '../api/lond'import * as echarts from 'echarts';

1.下载插件命令：npm install vue-count-to2.代码在这里插入代码片 3.插件参数：参数描述startVal开始值endVal结束值duration持续时间，以毫秒为单位autoplay自动播放decimals要显示的小数位数decimal十进制分割sepaeator分隔符prefix前缀suffix后缀useEasing使用缓和功能easingFn缓和回调

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父组件向子组件传递方法</title> <script src="../../vue/vue-v2.6.11.js"></script></head><body><div id="app"> <

第一步：右击将要上传的文件夹，在右键菜单栏里选择Git Bash Here选项第二步：在弹出的Git命令窗口中输入git init第三步：复制gitee仓库的HTTPS链接第四步：在Git命令窗口中输入git remote add origin+复制出来的仓库的HTTPS链接第五步：在Git命令窗口中输入git pull origin master 并在弹出的窗口中输入码云登陆的对应的账号和密码第六步：输入git add .（.表示所有文件）或者git add + 文件名（作用：将文件保

打包出错显示空白页，或者Failed to load resource: net::ERR_FILE_NOT_FOUND1.webpack.prod.conf.js 中output添加参数publicPath:’./’2.修改webpack.base.conf.js中：publicPath: process.env.NODE_ENV === 'production'? './' +config.build.assetsPublicPath: './' + config.dev.assets

最近用vue写了一个官网踩坑了，打包时发现了有几个问题，element ui样式失效了一.页面一片空白并报错Failed to load resource: net::ERR_FILE_NOT_FOUND第一次打包后发现页面一片空白，并且报错Failed to load resource: net::ERR_FILE_NOT_FOUND解决方法：1.webpack.prod.conf.js 中output添加参数publicPath:’./’2.修改webpack.base.conf.js中：

这是循环出来的多个div循环的数组加上这个方法就可以为每个div添加一个id 为 person_1,person_2 ,person_3…

vue项目打包后，elementUI样式失效最近写一个官网vue+ElementUI项目，打包时发现了有几个问题，打包后报错，elementUI图标失效一.页面一片空白并报错Failed to load resource: net::ERR_FILE_NOT_FOUND1新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样