HarryHY的博客

1.在你的目录下有一个config文件夹2.在这个config文件夹中有一个index.js3.在这个index.js的文件中有一个build的对象4.在这个build的对象那个中有一个assetsPublicPath属性5.修改他的值 assetsPublicPath: './',然后你打包你的项目即可一般的命令是npm run build然后你会发现你项目中多了一个dis...

delimiters类型：Array默认值：["{{", “}}”]限制：这个选项只在完整构建版本中的浏览器内编译时可用。详细：改变纯文本插入分隔符。分明声明前后的包裹符号各为什么 delimiters: ['${', '}']然后你是你的template页面插值就不在是{{}}了 <span>${qiqi}</span>...

删除当前点击的template<button class="content_btn" @click="stand(item.id)">-1</button>methodsstand(id) { this.dataList = this.dataList.filter(o=>o.id !=id) console.log(this.dataList)}...

在VUE项目中使用了v-for 却没有绑定key 会导致报错点击左下角的设置在搜索设置当中输入"vetur.validation.template" 将勾选去掉即可但还是建议绑定key较为好 切记不能绑定index:key="item.label"（没法之前的交接的前端v-for都没有绑定key值）...

跳转路由 joinAct(topic,functioName,desc) { //根据id跳转活动详情 if (topic == 1 && functioName=="daydaysale") { this.$router.push({ name: "daydaysale" }); }else { this...

view部分 <div v-if="active_Tab == 0"> <!-- 分类导航栏 --> <div class="classList"> <div class="_nav" style=...

// module.exports = {// // 选项...// devServer: {// proxy: {// '/api': {// target: 'http://tingapi.ting.baidu.com',// pathRewrite: {// ...

组件懒加载scriptconst sundrying =()=>import("../../components/chatComponents/Sundrying.vue")const Leaderboard =()=>import("../../components/chatComponents/Leaderboard.vue")const Quiz =()=>impo...

点击其他区域关闭 //关闭 clickout(event) { // this.giftflag = false let outDiv = document.getElementById("giftbox"); if (outDiv) { if (!outDiv.contains(event.target)) { ...

main.js// 全局前置守卫router.beforeEach((to, from, next) => { if (to.matched.some((item) => item.meta.token)) {//router里的meta的键名 let token = sessionStorage.getItem("token");//你要根据拦截的信息 if ...

main.js：这里是用了vuex做了个管理axios.interceptors.request.use(function(config){ store.commit('loadingFalg',true)//在请求发出之前进行一些操作 return config})axios.interceptors.response.use(function(config){ store....

<div class="content" @click="clickout($event),clickout($event)" >

what？这是一个前端的直播流直播流为m3u8流——我写的是原生JS写的引入的重点是：1.第一要引入Dplayer的JS和CSS；<link rel="stylesheet" href="./js/DPlayer.min.css"><script src="./js/DPlayer.min.js"></script>2.第二要引入hls支持m3u8...

VUE官网给我们解释了mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。首先要了解的是什么是mixin（通俗）——mixin是Vue...

语法如下：Vue.filter( id, [definition] ){string} id{Function} [definition]在你的main.js文件中Vue.filter('money', function (value) { if (!value) return "0.00"; value = Math.round(parseFloat(value) * 100)...

安装px2rem的依赖npm install px2rem-loader --save-dev在你的index.html部分 <script> (function (n, e) { var t = n.documentElement, i = "orientationchange" in window ? "orientationchang...

socket.js 部分var websock = null;let rec; //断线重连后，延迟5秒重新创建WebSocket连接 rec用来存储延迟请求的代码let isConnect = false; //连接标识 避免重复连接let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理...

在你想要的地方引入const appData = require("../../utils/emojis.json");view部分 <div class="browBox" v-if="faceShow"> <ul> <li v-for="(item,index) in faceList" :key="index" @cli...

对于数组里面全是numbercomputed部分：computed:{ sortItems:function(){ return this.items.sort(sortNumber); } }methods部分function sortNumber(a,b){ return a-b }对于一个对象 有多种类型data部分st...

这个是在已经创建好的vue项目中进行一个加入了websocketscript的部分 data() { return { value: "", //输入框的值 path: "ws://192.168.1.22:18308/test", //后端的接口 socket: "", websocketMessage: {},//接收的messag...

有关于VUE生命周期的函数一般的执行顺序如下图下面的这个函数是在mounted(){}加载完成后的这个函数会执行的这个函数也可以写在create之前之后的周期当中也是可以的 不会影响效果 但是一般为了代码的规范还是建议写在mounted(){}，函数里面 this.$nextTick(() => { });这个图是https://segmentfault.co...

做的一个账户金额刷新旋转的小图标veiw页面部分 <img src="../../../images/assets/img/shuaxin.png" @click="shuaxin" :class="[isRotate?'rotate':'rotate1']" />sc...

VUE-cli 3.0中的proxy使用方法 //vue-cli3.0 里面的 vue.config.js做配置devServer: { proxy: { '/api': { //这里最好有一个 / target: 'http://192.168.1.22:18308', // 后台接口域名 ws: true,...

安装vue-meta-infonpm i vue-meta-info -D在main.js中引入import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)静态的title和meta用法在你需要使用的组件中使用（切记不要写进了data中） metaInfo: { title: ``, meta: [ { // set meta name: "description",

在你的router里面的index.js中new Router中添加这个base可根据你的具体情况修改即可 mode: 'history', base: '/front/',

在你想要使用的组件内使用 在beforeRouteEnter中不能直接使用this获取到组件内的方法和data通过使用这个vm来获取了我这里的使用场景是面包屑 然后进行了一个to from的匹配 beforeRouteEnter(to, from, next) { next((vm) => { switch (from.name) { case "Home": vm.fromname.name = "首页"; vm.f

定义类型：{ [key: string]: Function | { get: Function, set: Function } }详细：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。...

main.js文件const _Vue = new Vue({ el: "#app", router, store, components: { App }, template: "<App/>" }); export default _Vue;js文件中import _Vue from "../main...

首先你需要装一个项目依赖npm i vuex-persistedstate -S然后在你的store里面的index引入import createPersistedState from 'vuex-persistedstate'Vue.use(Vuex)然后在你的const store = new Vuex.Store({ 里面写上 plugins: [createPersiste...

Vue.set( target, propertyName/index, value )参数：第一个参数想要修改的数组或者对象{Object | Array} target第二个参数想要修改的对象名称或者对应的下标{string | number} propertyName/index第三个参数想要修改成功后的值{any} valueVue.set(app.arr,1,'qq')...

Vue.extend( options )参数：{Object} options在你的main.js中书写var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { ...

语法如下：Vue.directive( id, [definition] ){string} id{Function | Object} [definition]指令钩子函数会被传入以下参数：el：指令所绑定的元素，可以用来直接操作 DOM 。binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive=...

html<div class="lookAllreply" :id="forId(item.id)"></div>JS forId(id) { return `f${id}` },

父组件newstree组件是一个循环递归的子组件这里有一个itemChild是数据结构需要递归的数据deep这个是递归的深度ref是父组件触发子组件所用我这里可能有不同的层级的子组件所以不是单一的所以是个动态的 <div class="replay_child"> <newstree :itemChild="item.child" v-if="ite

监听VUEX变化首先在想要监听的组件里面 利用computed注意：一定要return这里监听一个已经存在vuex里面的liveheader值 computed: { liveheaderfn() { return this.$store.state.liveheader; }, },首先在想要监听的组件里面 利用watch然后在这个函数里面做你想要做的逻辑即可将newValue 赋值给 本组件的一个变量liveheader watch: { l

页面常规绑定函数<div class="digCommentReplyreplay" @click="showReplyinputfn(item.c_fid,item.id)"></div>字符串模板绑定函数 `<div class="digCommentReplyreplay" οnclick="showReplyinputfn(${datas[f].c_fid},${datas[f].id},2,${kk})"></div>`JS的函数

mounted() { let _this = this; window.onscroll = function () { //变量scrollTop是滚动条滚动时，距离顶部的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度 var windowHeight = ..

由于是内网限制了复制的功能 所以只能是图片了vue-cropper配置——elementvue-cropper页面——elementvue-cropper页面绑定——elementvue-cropper上传的两个函数——elementelementUI上传部分——elementvue-cropper结合vantvue-cropper——vant上传功能vant图片上传vue-cropper裁剪页面——vantvue-cropper配置data(option)——v