变量vue3 vue css
CSS基础:块状元素、内联元素、内联块状元素(行内元素)
css基础:块元素、内联元素、内联块元素 CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 1.常用的块状元素有: <div>、<p>、<h1>-<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquot ......
vue之组件
简介 组件(component)是vue.js最强大的功能之一。组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件,而且是所有组件的根组件 在工程化工发后,一个组件就是一个 xxx.vu ......
CSS修改input中的placeholder默认颜色
使用 input-placeholder 属性来修改placeholder的默认颜色: 为了兼容不同的浏览器内核,要添加不同的前缀 input::input-placeholder { color: #999; } input::-webkit-input-placeholder { /* Chro ......
vue 文件拖拽上传功能
现在,很多web端操作都喜欢使用拖拽上传功能。此方法使用起来也很简单,主要是使用 ondrop 和 ondragover 两个事件。 在vue中是这样的 <div class="upload-file-box" v-loading="loading" @drop="dropFile($event)" ......
CSS杂谈——flex布局里面的auto到底多长
本篇博客将以 “ flex 布局里设置 auto 的区块怎么让文案超出省略的问题” 作为切入点,来分析一下 flex 布局里面各子项的具体长度到底怎么计算。 从需求出发谈 flex 布局 我们有一个 H5 项目,类似于微信的通讯录界面,前面是头像,后面是昵称。 所以我们一开始的代码是这么写的: <d ......
1.Vue的基本原理
当一个Vue实例创建时,Vue会遍历data中的属性,用Object.defineProperty(vue3.0使用proxy)将它们转为getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时通知变化。每个组件实例都有相应的watcher程序实例,它会在组件渲染的过程中把属性记录为 ......
Vue3快速上手
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/re ......
1.Vue的基本原理
当一个Vue实例创建时,Vue会遍历data中的属性,用 Object.defineProperty(vue3.0使用proxy)将它们转为 getter/setter,并且在内部追踪相关依赖,在属性被访问和修改时 通知变化。每个组件实例都有相应的watcher程序实例,它会在组 件渲染的过程中把属 ......
3. Vue系列学习笔记 - Vue组件
定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; 组件化: 是 ......
6. Vue系列学习笔记 - 配置.vue组件
注意: 有时候使用npm i node-sass -D装不上,这时候,就必须使用 cnpm i node-sass -D 在普通页面中使用render函数渲染组件 在webpack中配置.vue组件页面的解析 运行cnpm i vue -S将vue安装为运行依赖; 运行cnpm i vue-load ......
4. Vue系列学习笔记 - 路由
父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, componen ......
5. Vue系列学习笔记 - Webpack
在网页中会引用哪些常见的静态资源? JS .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS .css .less .sass .scss Images .jpg .png .gif .bmp .svg 字体文件(Fonts) .svg .ttf .eot .w ......
7. Vue系列学习笔记 - 使用mui的tab-top-webview-main完成分类滑动栏
使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容性问题,导致tab栏失效,可以把mui-tab-item改名为mui-tab-item1,并复制相关的类样式,来解决这个问题; ......
记录-css实现交融文字效果
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 CSS是有魔法的,我们今天来实现一个CSS的动画效果,只需要几行代码就可以搞定。 第一步、我们要将一行文字从中间展开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ......
(一)初始vue
data属性 data属性是传入一个函数,并且该函数需要返回一个对象: 在Vue2的时候,也可以传入一个对象 在Vue3的时候,必须传入一个函数,否则报错 data中返回的对象会被vue的响应式系统劫持,之后对该对象的修改或者访问都会在劫持中被处理: 所有我们在template或者app通过{{co ......
Vue动态创建组件实例并挂载到body
方式一 import Vue from 'vue' /** * @param Component 组件实例的选项对象 * @param props 组件实例中的prop */ export function create(Component, props) { const comp = new (V ......
变量的定义和使用
变量的定义与使用 1.变量的命名规则 1. 变量名由字母、数字、下划线、组成,但是不能以数字开头 2. 不能使用javascript关键字 3. 严格区分大小写 username和userName 是不同的 2.变量声明 var variable 1.可以使用一个 var声明多个变量 比如:var ......
一个 OpenTiny,Vue2 Vue3 都支持!
大家好,我是 Kagol,OpenTiny 开源社区运营,TinyVue 跨端、跨框架组件库核心贡献者,专注于前端组件库建设和开源社区运营。 今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue。 TinyVue 是一套跨端、跨框架的企业级 UI 组件库,支持 Vue 2 和 ......
css steps实现文本一个字一个字显示
大致思路: 使用相对定位的div覆盖文本内容,并用animation控制宽度,位置。 换行步骤在外层div上控制高度即可。 css的steps与animation一起使用可以控制文字单个显示,类似于文本输入,不过显示频率是线性。 添加一些css变量控制步骤宽度、高度和时间等,便于vue中也通过组件的 ......
vue3使用elmentui-plus中的图标
按照官网这样直接引入使用,不知道为啥行不通: import { Document, Menu as IconMenu, Location, Setting, } from '@element-plus/icons-vue' 使用时,需要 <script> import { UserFilled } ......
linux环境变量的设置几种方式
Linux配置环境变量的几种方式 小菠萝测试笔记 51Testing软件测试网 2023-04-06 17:32 发表于上海 环境变量配置文件 更新环境变量文件: source /etc/profile或. /etc/profile (左右滑动查看完整代码) 环境变量配置方式 01Linux读取环境 ......
vue3引用draggable实现拖拽组件形成form表单
需求: 想要实现这样的一个需求,左边是组件库。中间是展示。拖拉组件到中间就形成一个组件。 刚开始用的form-create,发现不行,又用的form-create-design,但vue3版本的只有element plus库,系统刚开始用的ant-design,而且左边我只需要单行输入框和多行输入框 ......
前端Vue项目修改
【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 用HBuilder X打开项目,修改 vue.config.js 文件 修改端口号、关闭语法检查、注释 mock ......
mybatis MetaObjectHandler重复字段自动填充与线程变量ThreadLocal的巧妙联合使用方法
1.重复字段自动填充 在对数据库crud时,相信很多人都写过这样的代码,在多个service中反复的对诸如createTime,updateTime,createUser,updateUser这样的字段进行反复的set操作。很显然这样的代码时相当烦杂的,那么有没有一种方法能够让程序全局对这样的字段进 ......
如何隐藏一个元素?&&css中出现了两个一样的类定义,如何避免冲突?
1.如何隐藏一个元素? 1.使用display属性:设置元素的display属性为none,这样元素在页面上不会占用任何空间,同时也不会对其他元素造成影响 2.使用visibility属性:设置元素的visbility属性为hidden,这样元素在页面上不可见,但仍然占用空间 3.使用opacity ......
angular/react/vue/un-app
web前端三大主流框架分别是什么?-群英 (qycn.com) web前端三大主流框架:1、Angular,是一种用于创建单一应用程序界面的前端框架,具有模块功能强大,拥有自定义命令等优点;2、react,是一个用来构建用户界面的JavaScript开发框架,主要用于构建UI;3、vue,是一套用于 ......
css变量声明使用
今天跟朋友聊天被推荐的一个css变量使用,感觉挺方便的,适用于各种页面,类似于scss less ~好处是减少样式代码的重复性,增加样式代码的扩展性和灵活性 简单使用: <style> :root { --color:#000; --width:200px; } body { color : var ......
vue表格实现拖拽排序
这老哥的,不用插件,原生js实现 借鉴:https://blog.csdn.net/chengqige/article/details/124871341 。 ......