变量vue3 vue css
vue3.0和2.0的区别
Vue.js是一个渐进式JavaScript框架，Vue.js 3.0相比于2.0有以下区别: 更快：Vue.js 3.0的渲染速度比2.0快了近30%。 更小：Vue.js 3.0的体积比2.0小了41%。 更易维护：Vue.js 3.0的代码结构更加清晰，更易于维护。 更易于原生：Vue.js ......
CSS常用背景属性（背景颜色、背景图片、背景平铺、背景位置、背景附着、背景色半透明、背景属性复合写法）
本博文记录CSS中比较常用的背景属性，包括背景颜色：background-color、背景图片：background-image、背景平铺：background-repeat、背景位置：background-position和背景附着：background-attachment。同时记录了背景色半透... ......
使用vue2从零开始搭建自己的组件库（完整版）
前言 在前端开发中，除了常用的UI组件库以外，我们还会涉及到基于公司业务，需要定制化开发一些业务组件，还有随着项目的增多，开发人员的增多，为了提高工作效率，我们就需要统一管理好已开发好的业务组件。这时候我们就需要搭建自己的组件库，因为涉及到一些公司的业务，我们只能发布到私服的npm上。下面几点是我们 ......
VSCode自建vue示例模板
步骤 打开File->Preferences->Configure User Snippets 选择New Global Snippets file... 输入名字（自定义），填入以下内容，注意修改vue.js路径 { "Print to console": { "prefix": "vue", " ......
VUE3 目录结构
├── dist/ └── src/ ├── api/ // 接口请求目录 ├── assets/ // 静态资源目录 ├── common/ // 通用类库目录 ├── components/ // 公共组件目录 ├── router/ // 路由配置目录 ├── store/ // 状态管理目录 ......
一个 OpenTiny，Vue2 Vue3 都支持！
TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue。 ......
vue全家桶进阶之路28：项目仓库Gitee
Gitee（之前称为GitCafe）是一种基于web的Git仓库托管服务，在中国很受欢迎。它为开发人员提供了一个平台，可以托管他们的Git仓库，与其他开发人员协作，并管理他们的代码。 https://gitee.com/ Gitee支持多种版本控制工具，包括Git和SVN。它还提供了一些高级功能，例 ......
CSS——@layer规则
前言 之前我们是如何避免引入多方的CSS文件时冲突？注意引入顺序、注意选择器优先级、使用important进行强制覆盖，现在你有了更好的选择@layer，@layer中后声明的优先级高于先声明的；; 文档 w3 | css-cascade-5 | MDN | @layer 浏览器支持情况 目前来看主 ......
vue全家桶进阶之路27：Vue.js 3.0的下载和安装
使用脚手架vue-cli创建vue3项目，创建前需要准备以下： 1、node.js环境 见：https://www.cnblogs.com/beichengshiqiao/p/17251233.html 2、npm、cnpm工具 见：https://www.cnblogs.com/beichengs ......
vue全家桶进阶之路26：Vue.js 3.0与Vue.js 2.x 的比较和注意事项
Vue.js 3.0 是 Vue.js 框架的最新版本，于 2020 年 9 月正式发布。Vue.js 3.0 主要的改进和新特性包括： 更好的性能：Vue.js 3.0 使用了更快的虚拟 DOM 实现，比 Vue.js 2.0 更快。 更小的体积：Vue.js 3.0 的代码体积比 Vue.js ......
vue之双向数据绑定v-model
简介 在vue中，当修改了变量，页面内容会根据变量的变化而变化。但是如果页面变化了，变量不会变化，这个就是单向数据绑定。当页面变化，变量也会跟着变化，这个是双向数据绑定 语法 <input type="text" v-model="变量"> 示例 <body> <div id="app"> <!-- ......
vue全家桶进阶之路25：Vue2的停维通知
Vue 2 的技术支持会持续多久？从官方发文来看，Vue 2.7 是当前、同时也是最后一个 Vue 2.x 的次级版本更新。Vue 2.7 会以其发布日期，即 2022 年 7 月 1 日开始计算，提供 18 个月的长期技术支持 (LTS：long-term support)。在此期间，Vue 2 ......
vue之事件修饰符
修饰符 |事件修饰服|释义| | |.stop|只处理自己的事件，子控件不再冒泡给父控件| |.self|只处理自己的事件，子控件的冒泡不处理| |.prevent|阻止a标签链接的跳转，也可以修改跳转页面| |.once|事件只会触发一次(适用于抽奖页面)| .stop事件 <div id="ap ......
Angular 复习与进阶系列 – Component 组件 の Angular Component vs Shadow DOM (CSS Isolation)
CSS Global Effect CSS style 是全局影响的. 假设我们有 2 个组件, AppComponent 和 TestComponent app html <div class="container"> <h1>Outside Hello World</h1> <app-test> ......
vue之过滤、筛选功能的实现
需求 给定一个列表(模拟数据)，根据用户输入，自动筛选输入的内容并输出到屏幕 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/jQuery ......
Shell变量
简洁 Linux的shell有很多，常见的有：(1)Bourne Shell(/usr/bin/sh或/bin/sh)(2)Bourne Again Shell(/bin/sh)(3)C Shell(/usr/bin/csh)(4)K Shell(/usr/bin/ksh)(5)Shell for ......
vue3创建项目笔记
E:\vue3学习>npm init vite@latest vite-blog -- --template vueNeed to install the following packages: create-vite@4.2.0Ok to proceed? (y) y Scaffolding pr ......
报错：‘VUE-CLI-SERVICE‘ 不是内部或外部命令，也不是可运行的程序 或批处理文件。
启动前端的项目，命输入 npm run dev 时，报错：'vue-cli-service' 不是内部或外部命令，也不是可运行的程序 或批处理文件。如图： 1、管理员身份打开 2.输入set-ExecutionPolicy RemoteSigned 3、选择A 4、Pycharm-Terminal执 ......
vue之箭头函数
说明 当在一个方法(函数)里面再定义一个方法(函数)时，内部的方法的this指向会有问题，如下： <body> <div id="app"> <h1>{{l1}}</h1> <button @click="clickFunc">点我</button> </div> </body> <script> ......
如何将 css 从 Application bundle 资源中剥离出来
为了提高 Angular 加载性能，一种思路就是按需加载 CSS 样式表，而不是把它们打包到 application bundle 中去。 Web 应用的 Application Bundle 是一个包含所有应用程序代码和资源的文件集合，它们被打包在一起以便于部署和分发。Application Bu ......
vue动态添加表单validateField验证
1 <template> 2 <el-form ref="form" :model="form" :rules="rules" label-width="100px"> 3 <div v-for="(input, index) in inputs" :key="index"> 4 <el-form- ......
vue定义全局函数，定义全局变量，修改变量
需求：设置一个全局的变量（messageList）和全局的方法。各组件都可以调用这个全局的方法去修改全局的变量（messageList）。 具体情况： 底部有一个消息组件。各组件接口调用时成功或失败的回调中调用一个全局的消息提示方法。类似this.$message.success('我是提示内容') ......
用CSS一分钟写出打字动画
HTML <div>没有空白的人生，永远都不会有心灵的宁静和精神的愉悦。</div> CSS3* { margin: 0; padding: 0; box-sizing: border-box; } body { text-align: center; display: flex; justify- ......
vue之字符串的方法
简介 本文会把遇到的字符串的方法慢慢补充进来 indexOf方法 indexOf方法判断字符串是否包含另一个字符串 判断结果如果包含返回的是索引，如果不包含，则返回-1 <script> let s = 'abc' let s1 = 'jfkdabcjkfda' let res = s1.index ......
vue之数组的方法
简介 本文会把遇到的数组的方法慢慢补充进来 filter方法 filter()方法是一个过虑方法 以下面的为例：列表dataList会每次取一个值，把值给匿名函数，并执行。比如第一次过虑会把a给dataList.filter(function (items){xxxx}，第二次会把at传给函数，后面 ......
2023.04.06 - vue组件中动态指定监听的值
业务场景：高拍仪给出的视频信息API回调里会不断返回图像数据。因为有主副摄像图像信息，并且两个图像信息会二选一展示在DOM容器里。所以就是二对一的关系。 // 主摄像数据 let priPic:string = ''; // 副摄像数据 let subPic:string = ''; // 展示在容 ......
vue 上传大型文件插件(vue上传视频插件)
IE的自带下载功能中没有断点续传功能，要实现断点续传功能，需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag 客户端每次提交下载请求时，服务端都要添加这两个响应头，以保证客户端和服务端将此下载识别为可以断点续传的下载： Accept-R ......
vue3 watch 监听 flush post 作用？
副作用刷新时机Vue 的响应性系统会缓存副作用函数，并异步地刷新它们，这样可以避免同一个“tick”中多个状态改变导致的不必要的重复调用。 同一个“tick”的意思是，Vue的内部机制会以最科学的计算规则将视图刷新请求合并成一个一个的"tick"，每个“tick”刷新一次视图，比如a=1;b=2;只 ......
vue之input输入框的几个事件
事件简介 click 点击事件，一般不会用于input输入框，会用于按钮，用于输入框就有点像focus了，当点击输入框时会触发 blur 失去焦点事件，当失去焦点时会触发。 focus 获取焦点事件，当获得焦点时会触发。 input 在输入框中每输入一个字符都会触发一次 change 当输入框内容改 ......