Vue
关注
分享
扫一扫
文章平均质量分 59
vue
欢莱
平平淡淡
展开
-
Vue 项目通过 electron 转为桌面应用
将已有 Vue 项目打包。将打包生成的 index.html、js、css、然后再和新建的 main.js、package.json 文件 放至一个目录下。并命令行切换至这个目录。运行成功且效果正常就行）原创 2022-10-30 00:37:36 · 624 阅读 · 0 评论 -
Vue3 获取 dom
Vue3 获取 dom，使用 ref原创 2022-08-15 15:24:06 · 252 阅读 · 0 评论 -
Vue 之 slot 插槽
作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。分类：默认插槽、具名插槽、作用域插槽父组件中使用了多个相同的子组件，若想只在foods所在子组件中放入其他结构，以下就麻烦了。Category.vue可以用插槽解决：Category.vue二、具名插槽Category.vue三、作用域插槽当数据在子组件中，但是父组件中，所用数据一样，但插入结构不一样，要拿到子组件的数据，就用到了作用域插槽。Category.vue......原创 2022-06-12 22:58:32 · 164 阅读 · 0 评论 -
动态组件及tab切换高亮和多个组件间过渡
实现下图效果：动态组件在不同组件之间进行动态切换。通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="currentTabComponent"></component>例：<div class="login-tab"> <a href="" @click=原创 2022-05-11 18:23:52 · 916 阅读 · 0 评论 -
Vue 中 element ui 修改组件默认样式
例：<style lang="less" scoped> /deep/ .el-backtop { background-color: red; color: red; }</style>element ui 的默认类名前 加/deep 即可。即样式穿透。注意：若修改后，组件样式并没有改变，可以重新运行下项目后，样式穿透起作用。（我遇到的坑！）...原创 2022-05-02 14:00:57 · 585 阅读 · 0 评论 -
Vue CLI4 自动化引入 less 全局变量或 Sass、Stylus
在 Vue CLI4中：（注意看下版本，3版本不是此配置）若想在组件中使用 less文件中的变量、mixin等，若不全局引入，我们在每个组件中一个个引入，会非常麻烦。如：<style lang="less" scoped>@import '~@/assets/less/imports.less';若想在App.vue 导入，但会出错。设置全局引入(即自动化导入)：使用 webpack 的 style-resources-loader插件可自动化导入less.原创 2022-04-24 18:38:35 · 1424 阅读 · 1 评论 -
Vue的Prop配置
文章目录1、Prop 的大小写2、Prop 类型3、Prop验证4、传递静态|动态 Prop5、修改Prop数据适用于：父子组件通信。如果父组件给子组件传递(函数)数据：本质是子组件给父组件传递数据；如果父组件给子组件传递的(非函数)数据：本质就是父组件给子组件传递数据。路由组件也可以传递 props数据。1、Prop 的大小写HTML 中的 属性名大小写不敏感，浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需原创 2022-04-18 21:36:25 · 1941 阅读 · 0 评论 -
Vue的mixin混入
mixin 实现 Vue 组件中配置项的可复用功能。把多个组件共用的配置提取成一个混入对象。一个混入对象可以包含任意组件选项。1、用法定义混入：创建 src/mixin.js// 一个混入对象export const mixin1 = { methods: { showName() { alert(this.name); }, }, mounted() { console.log('哈哈') },}// 一个混入对象export const mixin2 .原创 2022-04-18 20:47:13 · 322 阅读 · 0 评论 -
Vue之全局事件总线$bus
全局事件总线：可以实现任意组件间通信关于VueComponent：school组件 本质是一个名为 VueComponent 的构造函数， 且不是程序员定义的，是 Vue.extend 生成的，即 Vue.extend({ })的返回值。我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options )。特别注意：每次调用 Vue.extend 返回的都是一个全新的 VueComponent。关于this指向：(1)原创 2022-04-17 19:32:29 · 1536 阅读 · 0 评论 -
Vuex统一管理状态
1、vuex 是什么实现数据共享是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。概念：在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。不使用Vuex和使用Vuex：使用Vuex统一管理状态的好处：①能够在 vuex中集中管理共享的数据，易于开发和后期维护②能够高效地实现组件之间的数据共享, 提高开发效率③存储在vuex中的数据都是响原创 2022-04-17 19:10:12 · 870 阅读 · 0 评论 -
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
目录文章目录目录最好使用视频上的账号密码，13700000000 密：111111一、脚手架使用创建项目脚手架默认目录：脚手架下载的项目稍微配置一下浏览器自动打开关闭 eslint 校验工具，以防写代码时没错也报错。src文件夹的别名的设置二、项目分析（1）项目路由分析（2）Header、Footer非路由组件完成使用非路由组件步骤：使用路由组件步骤：路由的跳转有两种形式:路由元信息：路由传递参数重写push与repalce方法（3）TypeNav三级联动组件完成（4）Home首页拆分静态组件完成（原创 2022-04-15 21:05:08 · 10826 阅读 · 18 评论 -
export default 和 export 的使用
在 node 中导入模块 var 名称 = require('模块标识符')node 中向外暴露成员 module.exports = {} 和 exports在 ES6 中，规定：ES6 中导入模块 import 模块名称 from '模块标识符'ES6 中向外暴露成员使用 export default 和 export// test.js// 在一个模块中，可以同时使用 export default 和 export 向外暴露成员export default {name:..原创 2021-07-24 19:43:16 · 886 阅读 · 0 评论 -
动画-自定义 v-前缀
例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-06-07 16:34:13 · 173 阅读 · 0 评论 -
动画-使用第三方animate.css类库实现动画
Animate.css ——CSS3动画库animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。 https://www.dowebok.com/demo/2014/98/在该网址可查看每个class的效果 &n原创 2021-06-07 16:10:06 · 455 阅读 · 0 评论