Vuecli如何创建公用div块(公共底部按钮)

最新推荐文章于 2022-06-28 09:49:17 发布
最新推荐文章于 2022-06-28 09:49:17 发布
阅读量872 收藏
点赞数
分类专栏： Vue脚手架和element的使用 文章标签： vue.js 微信 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63498341/article/details/121440511
版权

1、第一步在components中创建一个新的组件，编写自己想公用的代码

 

 2、第二步在App.vue中script标签中引入组件

 3、第三步在App.vue中template标签中注明(此处的v-if判断在公用代码在showNav为真的情况下展示)

 

 

 当然也可以不加限制，在所有页面中展现！

到这里就结束了，祝您工作顺利，加油！

李博的前端篇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+css公共属性
08-17
div+css公共属性 本人总结的一些 DIV+CSS共用的属性，
vue项目中公用footer组件底部位置的适配问题
08-27
在Vue项目开发中，公共组件的使用能够提高代码复用率和项目的维护性。Footer组件作为常见的页面底部元素，往往需要在多个页面中统一引入。然而，在处理Footer组件的布局时，尤其是面对不同页面内容高度不一致的情况...
vue 公用页面引用_vue 如何实现 html 公共部分？？
weixin_34043280的博客
12-23 2996
开发背景：假设有一个 h5 app 项目，前后端完全分离，前后端通过 json 进行数据交流，前端使用 vue 进行数据渲染开发。问题/需求目前 ui 已经把整个项目的界面都制作完毕，有 30+ 张页面。前端开发中每个 html 页面不可避免的存在公共部分，一般会是如下公共部分：标题怎么把如上公共部分：.... 等这些每个页面都会加载的公共部分通过 vue 的方式独立出来，然后在每个页面加载这些公...
js vue 创建一个div_Vue 创建组件的两种方法小结(必看)
weixin_39637457的博客
12-19 649
创建组件的两种方法小结1.全局注册2.局部注册var child=vue.extend({})var parent=vue.extend({})vue.extend() 全局方法 生成构造器，创建子类使用基础 vue 构造器，创建一个“子类”。这样写非常繁琐。于是vue进行了简化使用vue.component()直接创建和注册组件：vue.component(id,options) 全局方法 用来...
vue的动态创建div
weixin_43704734的博客
06-28 4868
2.下面是赋值
js vue 创建一个div_vue.js的创建
weixin_39640543的博客
12-19 473
1.新建web项目2.新建一个jsp文件3.把vue.js文件放到js文件目录下4.引用vue.js5.创建一个view对象(dom组件)定义一个JavaScript的modelvar mymodel = {userName:'张三',age:19};7.创建一个vue对象，参数为一个json对象例子JSP Page{{userName}}var mymodel = {userName:'张三',...
vue-cli3 DllPlugin 提取公用库的方法
10-17
针对重复编译、公共库频繁变动的问题，vue-cli3中通过Webpack提供的DllPlugin插件，可以实现对公共库文件的提取，从而达到优化编译时间的目的。在本文中，我们将详细介绍如何利用vue-cli3结合DllPlugin来提取公用库...
Vue之封装公用变量以及实现方式
10-15
在Vue框架中，封装公用变量和方法是一个非常重要的实践，它可以帮助我们在多个组件之间共享数据和行为，提高代码的复用性和项目的维护性。本文将详细讨论如何在Vue项目中封装公用变量和方法，以及相关的实现方式。...
基于vue-cli创建的项目的目录结构及说明介绍
08-28
* components文件夹：Vue公共组件，包含了项目所需的公共组件 * router文件夹：前端路由，包含了项目的路由配置文件 * App.vue：页面入口文件（根组件） * main.js：程序入口文件（入口JS文件） 这些文件都是项目的...
vue循环生成div
热门推荐
weixin_39040527的博客
07-20 1万+
遇到了一个需求，需要展示一年12个月的日历，然后一行为一个div，需要循环生成4个div，刚开始我查了一下，不知道怎么入手，然后问了我一个做前端的同学，一分钟就解决了。 代码如下： <div v-for="item of 4" :key="item"> <div style="float:left"> <div style=" width: 500px; border: 1px ;solid #d9d9d9; borderRa.
js vue 创建一个div_vuejs组件
weixin_42553588的博客
12-29 427
一、什么是组件?组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is特性进行了扩展的原生HTML元素。总结:组件是用来完成特定功能的一个自定义的HTML标签例如:注意:mytag就是一个组件,该组件必须通过Vue为mytag赋予一定的功能二、组...
js vue 创建一个div_Vue.js 入门教程
weixin_39641334的博客
12-19 305
什么是 Vue.js？Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。Vue.js 特点简洁：HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动：自动追踪依赖的模板表达式和计算属性。组件化：用解耦、可复用的组件来构造界面。轻量：~24kb min+gzip，无依赖。快速：...
Java成神之路：第一帖---- Vue的组件属性components用法
小秋的博客
09-12 557
Vue的组件属性：components 使用场景 一般在项目的使用过程中，某个需要多次使用的模块，会将整个模块抽取出来，写一个组件，供给其他页面进行调用或者是在一个页面中，多次使用到一个重复的代码样式，将其抽取出来，用组件来代替，以实现代码的复用性。 组件又分为局部注册组件和全局注册组件 全局注册组件：指的是在任何一个页面都可以进行使用的组件，例如：头部、底部 局部注册组件：本页面进行复用的代码样式 ，例如：页面中的活动模块 全局注册组件使用方法： <script type="text/javasc
【数据结构与算法python】树的实现
思南的博客
09-09 974
方法一：树的嵌套列表实现 1、定义 借助Python List来实现二叉树树数据结构，采用递归的嵌套列表实现二叉树， 由具有3个元素的列表实现： [root，left，right] 第1个元素为根节点的值； 第2个元素是左子树（所以也是一个列表）； 第3个元素是右子树（所以也是一个列表）。 以下图为例，一个6节点的二叉树 根是myTree[0]，左子树myTree[1]，右子树myTree[2] 该树的嵌套列表表示方式如下： tree = ['a', ['b', ['d',[],[]],
vue @click 赋值_《浅析Vue两个的版本》
weixin_39603537的博客
12-04 274
vue的两个版本在我们使用Vue时，我们可以引用两个不同版本的Vue ，分别是Vue完整版（vue.js）和Vue（vue.runtime.js）非完整版。如果要部署给用户，则使用生产环境后缀为.mini.js。cdn引入完整版（vue.js）<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js">&l...
react路由那点事
qq_45378970的博客
12-07 123
React路由 根据不同的路径，显示不同的组件（内容）；React使用的库react-router-dom; 安装: Cnpm install react-router-dom --save react三大组件 ReactRouter三大组件： Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。 属性：basename->设置跟此路由根路径，router可以在1个组件中写多个。 Route:路由规则匹配组件，显示当前规则对应的组件 Link:路由跳转的组件 注意：如果要精
重新启程之Vue——点击按钮，弹出弹窗组件
qq_44139411的博客
11-10 1万+
目录 一、点击按钮，弹出弹窗组件 二、用v-for渲染一堆按钮，给每个按钮绑定不同的事件，其中一个按钮，点击则显示弹窗组件 一、点击按钮，弹出弹窗组件 按钮：<el-button> 弹窗：<log-dialog> <el-button type="primary" size="small" @click="LogDialogVisible = true" plain .
vue项目增删改按钮控制公共组件封装
baidu_41899377的博客
11-18 480
组件封装公共按钮控制 <view> <slot name="right"> <view class="x-end" style="margin-right: 100rpx;"> <button class="btn" v-if="showBtns.indexOf('add')!=-1" @click="tohandleAdd"> <uni-icons type="plus" size="24" color="#2D8CF0"><.
vue-公共方法两种方式
qq_39958629的博客
06-14 1780
第一种全局方式 1.要调用的方法 //方法1 export default { times:()=>{ console.log("方法1"); } } //方法2 const configFun = function(){ console.log("方法2"); }; export {configFun} 2.在min.js中引入,地址自定 im...
vue scss引入公用变量
最新发布
09-04
在Vue项目中，我们可以使用SCSS来管理样式。要引入公用变量，首先需要在项目中创建一个公用变量的文件，比如_variables.scss。 在_variables.scss文件中，我们可以定义整个项目的公用变量，比如颜色、字体大小、边距等。例如： ```scss $primary-color: #409eff; $font-size: 14px; $margin: 10px; ``` 在需要使用这些公用变量的组件中，我们可以通过import语句引入_variables.scss文件，并使用这些变量。例如，在某个组件的样式中： ```scss <style lang="scss" scoped> @import "@/styles/_variables.scss"; .container { background-color: $primary-color; font-size: $font-size; margin: $margin; } </style> ``` 这样，就可以在.container类中使用公用变量了。当项目中多个组件都需要使用这些公用变量时，只需要在对应的样式文件中引入_variables.scss即可。 需要注意的是，为了正确使用SCSS，我们需要安装sass-loader和node-sass依赖。在项目中通过以下命令安装这些依赖： ``` npm install sass-loader node-sass --save-dev ``` 这样就可以在Vue项目中引入公用变量并使用它们了。同时，通过SCSS的功能，我们还可以使用混合（mixins）和继承（extends）等特性，更好地组织和管理项目的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值