![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
当白
大人不华,君子务实
展开
-
【vue3】vue路由拆包和自动导入
vue 路由拆包,自动导入原创 2023-01-12 12:08:16 · 516 阅读 · 0 评论 -
【vue3】代码自动格式化和volar卡顿问题解决
代码自动格式化和volar卡顿原创 2022-12-05 14:45:51 · 4858 阅读 · 0 评论 -
【vue3】在vue3里添加全局eventBus
vue3 eventBus原创 2022-08-06 14:15:04 · 979 阅读 · 0 评论 -
【vue】useRouter和useRoute
vue3 router原创 2022-06-07 11:44:43 · 2563 阅读 · 0 评论 -
【vue】解决跨域问题的原理
vue中的proxy主要作用类似于nginx; 将本地请求转发跟随vue项目启动的本地服务; 然后由服务端去请求远程服务端;而本地服务和本地H5资源,因为同源,所以没有跨域的问题原创 2021-12-01 16:59:54 · 2531 阅读 · 1 评论 -
【vue】父子通信中的发布订阅
父组件中写一个监听v-on:key = callback 子组件中发布this.$emit("key",value)发布订阅的话自己写了也比较多,yarn add qc-event-bus用法和上边类似,可以看文档qc-evnet-bus还写了一种异步转同步的发布订阅yarn add async2syncasynctsync...原创 2021-10-27 17:50:25 · 145 阅读 · 0 评论 -
【vue】 vue3+vite2之template中eslint代码检测抛红问题
vetur 和 volar原创 2021-10-11 11:14:21 · 1546 阅读 · 1 评论 -
【vue】provide && inject
provide和inject主要是为了高阶插件和组件库提供用例,但是也可以用于业务中,例如将祖先组件的this,暴露给子孙组件以便可以获取祖先组件的data在祖先组件中provide:------------------------------------ data() { return { color: "blue" }; },------------------------------------- provide() { return {原创 2021-10-11 10:48:44 · 90 阅读 · 0 评论 -
【js/css】当前选中居中短下划线
1.效果2.css实现 .item-selected{ font-size: 18px; font-weight: bold; color: white; //给当前元素添加相对定位,也就是after的父级 position: relative; &:after { content: " "; width原创 2021-09-06 11:46:03 · 785 阅读 · 0 评论 -
【vue】微信sdk中接口和标签本地调试
1.首先改变本地host映射下载:switchHostswin上切换失败是因为权限不够1.找到host文件C:\Windows\System32\drivers\etc2.右键host,点击属性,选择安全 (在 2.右键host,点击属性,选择安全 这里加点操作 要把"常规"中的"属性"的只读不勾选,否则还是不能切换成功)3.赋予User所有权限------------------------------------mac的话更方便,输入本机密码就可获取权限2.在switchHo原创 2021-08-13 13:12:02 · 412 阅读 · 0 评论 -
【vue】v-html图片显示过大,左右滑动
最近接受后台html,然后显示的时候图片大小超过了边界,出现了左右滑动的情况,以下写法可以解决问题<style scoped> .zhengwen >>> img { max-width: 100%; height: auto; }</style>原创 2021-07-13 15:32:57 · 771 阅读 · 0 评论 -
【vue】角标
template <div class="msg"> <img src="../../static/fx.png" /> <div class="alarm"> 500 </div> </div>css<style scoped> .msg { position: relative; } .msg img { width: 42px; height: 42px; } .alarm {原创 2021-07-01 09:34:04 · 1008 阅读 · 0 评论 -
【vue】路径别名配置和本地、网络图片显示
vue.config.jsconst path = require("path");const resolve = dir => path.join(__dirname, dir)module.exports = { chainWebpack: (config) => { config.resolve.alias // 添加别名 .set('@', resolve('src')) .set("@libs",resolve('src/l原创 2021-06-29 10:56:02 · 409 阅读 · 0 评论 -
【vue】弹性布局实现自适应高度cell
如果弹性布局可以换行;flex-wrap: wrap;行间距离就不是align-items控制而是align-content: flex-start来控制了.scroll{ height: 1140px; width: 100%; box-sizing: border-box; padding-left: 12px; padding-right: 12px; display: flex; justify-content: space-between; flex-wrap: wra原创 2021-06-24 11:18:32 · 882 阅读 · 0 评论 -
【vue】element对一行的单个数据进行v-if判断
主要是提供了slot-scope来获取当前row对应的值然后具体在一行中判断某个值的时候,用scope.$index, scope.row来拿eg:v-if=“scope.row.name != 'xxx” <el-table-column min-width="50%" align="center" label="操作"> <template slot-scope="scope"> <el-button原创 2021-06-17 10:34:59 · 2237 阅读 · 0 评论 -
【vue】鼠标悬停加阴影样式
目标:实现当鼠标悬浮,给所在block边上加上阴影的效果;分析:这种一般都是逻辑层和渲染层一起努力逻辑层给个mouse_index,当和当前block的index匹配的时候,就通过:class="mouse_index==index?'item-sel':'item'"来作样式切换效果:代码:(1) template:<div class="disp"> <div :class="mouse_index==index?'item-sel':'item'"原创 2021-05-17 09:50:04 · 2220 阅读 · 1 评论 -
【vue】background-image的require动态引入
用require动态引入真麻烦 data() { return { header:require("../assets/header.jpg"), }; }, <div class="header" :style="{backgroundImage:`url(${header})`}"> </div>原创 2021-05-12 18:14:53 · 2805 阅读 · 2 评论 -
【com】require和import,动态和静态
一、require和import的区别require用于读取并执行js文件, 并返回该模块的exports对象, 若无指定模块, 会报错。CommonJS规范加载模块是同步且动态的, 只有加载完成, 才能执行后续操作。可以在代码中引入import用于引入外部模块, 其他脚本等的函数, 对象或者基本类型。import属于ES6的命令, 它和require不一样, 它会生成外部模块的引用而不是加载模块,等到真正使用到该模块的时候才会去加载模块中的值。二、动态引入和静态引入webpack支持node的c原创 2021-05-12 17:51:21 · 2122 阅读 · 2 评论 -
【vue】vue组件和vue实例的关系
组件是扩展的 Vue 构造器,“扩展”的含义就是根据自己的需要去定制Vue构造器MyComp=Vue.extend({template:'<div>我就是组件</div>'})模板中的<MyComp>...</MyComp>是实例化组件的一种方法,相当于:new MyComp() so 实例化的组件就是vue实例PS:这里还可以补充一下vuexvuex的实质就是没有扩展template的Vue组件...原创 2021-05-06 16:32:23 · 595 阅读 · 0 评论 -
【vue】Vue.observable 超简单状态管理
讲起这个主要是在一些微服务框架中可以进行状态管理的再封装1.首先在man.js里边(当然也可以单独拿出来)//最小化的跨组件状态管理器,一处变化全局改变const obser = Vue.observable({ count: 0, name:"qc",})Vue.prototype.$obser =obser;2.在具体组件中1.template<button @click="setCount" style="margin-top:50upx;width:100%"原创 2021-04-22 11:07:32 · 268 阅读 · 0 评论 -
【vue】生命钩子免费视频课
生命钩子webpack中的tapable核心库是在学习vue、react和angular的生命钩子的时候发现的,所以做了这么一套课,自己学的时候也旨在分享给大家,如果对你有帮助,请在相关的视频下素质三连,爱你么么哒~相关视频资源webpack-tapable-1-目标和基础概念webpack-tapable-2-同步钩子的使用webpack-tapable-3-异步并行钩子的使用webpack-tapable-4-异步串行钩子的使用webpack-tapable-5-钩子的封装webpack原创 2020-12-23 16:02:43 · 79 阅读 · 0 评论 -
【vue】cell样式
Pre:看下效果一.templatecells是一个容器,cell是为了提供高度和下划线,content是一个栅栏<!--显示列表的部分--><divclass="cells"v-for="(item,num)inmapList":key="num"@click="details(item)"><divclass="cell">...原创 2020-09-29 14:58:19 · 1863 阅读 · 0 评论 -
【css】vue中的scoped
这里主要写一个注意事项:如果要对外部组件进行修改,需要把scoped去掉这样才能实现回溯源头否则,对外部组件修改的一些效果很有可能出不来去掉之后,只是当前页面的样式修改了,并不会污染全部...原创 2020-05-06 18:39:35 · 202 阅读 · 0 评论 -
【js】Ramda在vue和node两端的使用
Ramda是一个函数式编程的库,满足两个原则:ramda 所有函数都支持柯里化 function first,data last(写参数的时候函数在前,数据在后)在node中使用相对简单,在vue中如何使用呢?首先你需要把Vue CLI 版本升级到3.0以上,升级方法,可以自行百度。创建项目和之前的vue init webpack projname有所不同:vue creat...原创 2020-01-13 10:02:51 · 673 阅读 · 0 评论 -
【vue】uni-app快速上手
环境搭建 项目脚手架搭建或者初始化 | 项目结构 页面编写、逻辑层和生命周期 路由配置 网络库使用 组件和api使用 调试和打包 一、环境搭建安装npm install -g @vue/cli二、项目脚手架搭建或者初始化 | 项目结构初始化一个uni-app项目vue...原创 2020-03-20 11:46:06 · 518 阅读 · 0 评论 -
【vue】ramda.js在vue中的使用
1.package.json"ramda": "^0.26.1”,2.在vue中局部使用:import * as R from ‘ramda'console.log('=======Ramda',R.map(x=>x*2)([1,2,3]));3.在vue2.0中全局使用:index.js中import * as R from 'ramda'...原创 2020-03-16 18:10:45 · 1646 阅读 · 0 评论 -
【vue】组件重置刷新
主要是利用v-if的重建销毁特性来重置:<div class="flexdiv" v-if="isRouterAlive"> <my-component>...</my-component></div>然后在data里:isRouterAlive:true在需要重置的地方:this.isRo...原创 2019-11-12 10:18:53 · 231 阅读 · 1 评论 -
【vue】$emit / $on 为所欲为~
因为这个方法和node的监听机制特定相似,所以单独拿出来了解一下。而且它的能力特别强大:可以父子、兄弟、隔代之间传递数据核心在于一个在父子、兄弟、隔代之间传递的统一的Vue实例。先说一个终极方法://main.js//创建一个统一的对象Vue.prototype.$SS = new Object();然后在任何你想要使用的地方:this.$SS.mes...原创 2019-11-04 17:14:47 · 295 阅读 · 0 评论 -
【vue】路径中的#
http://localhost:8080/#/login输入路由路径的时候,会出现一个#这是因为路由默认mode:hash的原因改为history就可以了export default new Router({mode:"history",routes: []})...原创 2019-10-30 10:30:28 · 1079 阅读 · 0 评论 -
【vue】添加实例属性
你可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域。这种情况下,你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = 'My App'这样$appName就在所有的 Vue 实例中可用了,甚至在实例被创建之前就可以。如果我们运行:new Vue({ beforeCreate: function () {...原创 2019-10-30 10:22:56 · 189 阅读 · 0 评论 -
【vue】路径别名
在webpack.base.conf.js 里边resolve,设置alias:resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),}},例如:默认有'@': resolve('src'),相当于一...原创 2019-10-29 17:27:37 · 242 阅读 · 0 评论 -
【vue】 Do not use built-in or reserved HTML elements as component id:header
组件的name和element里边的id重复了改一下就可以了<script>export default { //name:'header' name: 'myheader', data () { return { msg: 'Welcome to Your Vue.js App' ...原创 2019-10-29 17:10:15 · 207 阅读 · 0 评论 -
【vue】meta的使用
在路由中设置:import Router from 'vue-router’import Vue from 'vue'import sideBar from '@/components/sideBar'import header from '@/components/header'Vue.use(Router)export default new Router({...原创 2019-10-29 11:11:17 · 336 阅读 · 0 评论 -
【vue】在methods中使用filters内的方法
一、首先filters我们写俩过滤器,内容省略filters:{ //日期转换 cdate(val){...}, //时间转换 ctime(val){...}, },二、然后我们在methods里边的一个方法中使用 //对请求到的数据写个trap加值 this.dataList.forEach...原创 2019-10-10 16:45:06 · 621 阅读 · 0 评论 -
【vue】解读vue3.0的变化
9月30日,尤雨溪在medium个人博客上发布了vue3.0的开发思路,国内有翻译的版本,见文章最后的参考链接。3.0带了了很大的变化,他讲了一些改进的思路以及整个开发流程的规划。vue3.0的改进思路vue最主要的特点就是响应式机制、模板、以及对象式的组件声明语法,而3.0对这三部分都做了更改。1. 响应式2.x的响应式是基于Object.definePro...转载 2019-10-09 22:16:34 · 1013 阅读 · 2 评论 -
【vue】跨域问题和代理机制
最近写node返回json,正常情况下,请求localhost:3500就会看到结果:因为请求的时候端口不一致,在前端请求的时候会出现跨域请求的问题:How?在config/index里边添加proxyTable: {"/api": {//使用api来替代http://localhost:3500 target: "http://localhost:350...原创 2019-10-08 16:49:38 · 216 阅读 · 0 评论 -
【vue】一个例子理解组件
一、接受一个单独的post对象prop:<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>组件内部的实现:Vue.component('blog-post', { props: ['post'], templat...原创 2019-10-08 16:25:47 · 162 阅读 · 0 评论 -
【vue】新的插槽机制
在组件中我们写上具名插槽,和不具名插槽<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <f...原创 2019-10-08 16:02:49 · 114 阅读 · 0 评论 -
【vue】样式的切换
<div class="button_div"> <ynet-button :class="isBtnFlag ? 'ynet_button_light' : 'ynet-btn_bom'" @click-native="doAPost">{{signTypeText}}</ynet-button></div>PS: :...原创 2019-10-08 15:36:07 · 149 阅读 · 0 评论 -
【vue】计算属性和方法的区别
计算属性<div id="example"> <p>{{ now }}"</p></div><script>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { now: function ()...转载 2019-10-08 15:25:50 · 119 阅读 · 0 评论