- 博客(31)
- 收藏
- 关注
RSS订阅原创 【Vue CLI脚手架开发】——6.scoped样式
我们知道vue为了防止css样式污染，在每个组件中提供了 scoped属性进行限定css作用域；我们可以看到，各自组件加上scoped属性之后，对应的样式标签元素会随机生成一个。标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。这样的属性，来保证每个组件样式互不干扰。父组件的样式会应用到子组件上。
2025-03-06 21:02:07
697
原创 【Vue CLI脚手架开发】——5.vue插件
在 Vue 中，插件（Plugin） 是一种用于扩展 Vue 全局功能的机制，可以封装过滤器、全局指令、组件、方法、混入（Mixins）等逻辑，实现代码复用和功能模块化。代码如下（示例）：plugins.js//全局过滤器})//定义全局指令//指令与元素成功绑定时（一上来）},//指令所在元素被插入页面时},//指令所在的模板被重新解析时})//定义混入data() {return {x:100,y:200},})
2025-03-06 20:13:39
969
原创 【Vue CLI脚手架开发】——4.mixin混入
注意3：当我在Schhol组件中加入mounted输出语句console.log(“我是School组件的输出”)时，和mixin的生命周期函数mounted冲突时，先执行混入的mounted再执行各自组件的mounted。事实上：使用混入的过程中出现冲突，除生命周期钩子外，其余的都以本组件中的为主，混入的不生效；全局混入表示混入到Vue对象中，Vue下的所有组件都会使用混入的方法，一定要注意，是所有的组件，所以，在使用全局混入的时候要确保所有的组件都会使用到。在src目录中定义一个mixin.js文件。
2025-03-06 10:23:45
992
原创 【Vue CLI脚手架开发】——3.组件交互props配置
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
2025-03-03 15:21:54
803
原创 【Vue CLI脚手架开发】——2.ref属性
Vue 的 ref 属性是框架中用于直接访问 DOM 元素或子组件实例的核心特性，在模板中标记元素或子组件，通过 this.$refs 获取其引用，支持直接操作 DOM 或调用子组件方法。
2025-03-03 00:23:07
443
原创 【vue-echarts】——06.饼状图
饼状图是用整个圆表示总体的数量或整体值“1”，用圆内各个扇形的大小表示各部分数量或该部分占总体 的百分比。//饼图主要用于表现不同类目的数据在总和中的占比。//饼图主要用于表现不同类目的数据在总和中的占比。// { value: 67, name: "美食" },// { value: 85, name: "日化" },// { value: 45, name: "数码" },// { value: 98, name: "家电" },//图例列表的布局朝向vertical纵向。
2025-03-02 21:56:25
175
原创 【vue-echarts】——05.柱状图
/ 'category' 类目轴，适用于离散的类目数据。// 'category' 类目轴，适用于离散的类目数据。// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计。// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计。// ///////////平均值//////////////////// ///////////平均值//////////////////// color:'red',//所有轴颜色设置。
2025-03-02 21:48:02
205
原创 【vue-echarts】——04.配置项---legend
/图例样式 支持 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'
2025-03-02 21:39:34
347
原创 【vue-echarts】——03.配置项---tooltip
/ 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。// 'axis' 坐标轴触发 主要在柱状图，折线图等会使用类目轴的图表。// 'item'数据项图形触发：散点图，饼图等无类目轴的图表中使用；// formatter: '{a}--{b} 的成绩是 {c}'// 'mousemove|click' 同时鼠标移动和点击时触发。// 触发时机 'mousemove' 鼠标移动时触发。// 'click' 鼠标点击时触发。
2025-03-02 21:35:25
282
原创 【vue-echarts】——02.title配置
/ 可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）// 主标题文字字体的粗细 可选 'normal' | 'bold' | 'bolder' | 'lighter' | {number}'normal' 'italic' 'oblique'
2025-03-02 21:29:14
165
原创 【vue-echarts】——01.认识echarts
定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。2021年1月26日晚，Apache基金会官方宣布ECharts项目正式毕业。1.导入第三方echarts模块2.需要在 HTML 中先定义一个<div>节点，并且通过 CSS 使得该节点具有宽度和高度3.基于准备好的dom节点，通过init()初始化echarts实例4.设置图表的配置选项，显示图表。
2025-03-02 21:20:04
282
原创 【Vue CLI脚手架开发】——1.Vue脚手架的安装与使用
tips:基于node.js和npm环境默认已安装Vue脚手架是Vue官方提供的标准化开发工具（开发平台）。Vue脚手架通过命令行界面(CLI)提供服务，使得创建、配置和编译Vue项目变得简单快捷，使用Vue脚手架，你可以通过全局安装vue-cli，然后使用命令行工具来初始化一个新的Vue项目，选择适合的项目模板，并自动生成项目结构和必要的配置文件。这样，开发者可以专注于业务逻辑的实现，而不必花费大量时间在项目搭建和配置上。
2025-03-02 20:43:13
519
原创 Vue学习教程-18Vue单文件组件
Vue 单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板逻辑与样式封装在单个文件中。组件最大的优势就是可复用性。
2025-03-01 22:41:40
945
1
原创 Vue学习教程-17生命周期流程
在Vue.js中，生命周期钩子是Vue实例在创建过程中各个阶段的钩子函数，它们允许开发者在特定的时刻执行代码。了解Vue的生命周期是非常重要的，因为它可以帮助你更好地理解何时以及如何操作数据、DOM或执行其他逻辑。提示：以下是本篇文章正文内容，下面案例可供参考beforeCreate()：无法通过vm访问data中数据和methods中的方法created()：可以通过vm访问data中数据、methods中配置方法beforeMoute()：①页面呈现的是未经Vue编译的DOM结构；
2025-02-28 16:21:12
974
原创 Vue学习教程-16html标签元素绑定事件
在Vue中，你可以通过v-on指令（或在Vue 2.x中简写为@）来绑定事件。这种方式允许你监听DOM事件，并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。常见的表单数据元素1.文本输入框元素3. 多选框元素4. 下拉框元素5. 按钮元素6. form表单元素
2025-02-27 16:53:01
754
原创 Vue学习教程-15自定义指令
在Vue中，自定义指令是一种强大的功能，允许你直接在DOM上注册一些自定义行为。这可以用来创建可复用的功能，比如焦点处理、文本输入限制、自定义事件监听等。自定义指令可以通过全局注册或组件内注册。需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。需求2：定义一个v-focus指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。自定义指令总结：一、定义语法：(1).局部指令：new Vue({
2025-02-23 23:25:54
834
原创 Vue学习教程-14内置指令
Vue.js 提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以 v- 前缀开始。v-text : 更新元素的 textContent更新元素的。v-html : 更新元素的 innerHTML更新元素的innerHTML。v-if : 如果为 true, 当前标签才会输出到页面根据表达式的真假值条件性地渲染元素。v-if是“惰性”的：如果条件为假，则元素不会出现在 DOM 中。v-else: 如果为 false, 当前标签才会输出到页面。
2025-02-23 17:06:45
1950
原创 Vue学习教程-13过滤器
在Vue.js中，过滤器（filters）是一种用于文本格式化的函数，可以在模板中通过管道符（|）使用。过滤器可以用来格式化字符串、数字、日期等数据。定义过滤器你可以在组件的 methods 或者 filters 对象中定义过滤器。但是，为了更好的组织和可维护性，通常推荐在组件的 filters 对象中定义过滤器。
2025-02-21 14:57:23
777
原创 Vue学习教程-12表单数据绑定
你可以用v-model指令在表单<input><textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。手动连接值绑定和更改事件监听器可能会很麻烦，v-model指令简化了这一步骤。提示：以下是本篇文章正文内容，下面案例可供参考1.trim修饰符如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符。
2025-02-21 01:28:03
1064
原创 Vue学习教程-11数组变化监测
在Vue中，数组变化监测是其响应式系统的一个重要特性。Vue 2.x版本中，当使用Vue.set或者this.$set，或者在初始化时就声明好数组的每个元素或者调用数组方法，可以确保数组的变更能够被Vue检测到并触发视图的更新。然而，在某些情况下，直接通过索引修改数组元素，例如array[index] = newValue，Vue无法检测到这些变化，从而导致视图不更新。使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2025-02-19 20:07:07
1074
原创 Vue学习教程-10列表渲染
在Vue中，列表渲染是一个常见的需求，它允许你基于一个数组来渲染一个列表。Vue提供了v-for指令来帮助你实现这一功能。我们可以用 指令基于一个数组来渲染一个列表。 指令需要使用 形式的特殊语法，其中 items 是源数据数组，而 则是被迭代的数组元素的别名。指令语法：v-for1.用于展示列表数据2.语法：v-for=“(item, index) in/of items” :key=“index”3.可遍历：数组（最多）、对象（一般）、字符串（用的很少）、指定次数（用的很少）使用:key属性
2025-02-18 14:47:03
812
原创 Vue学习教程-09条件渲染
v-if是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSSdisplay进行切换。一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if。
2025-02-17 16:48:26
668
原创 Vue学习教程-08样式绑定
数据绑定的一个常见需求是操作元素的CSS class列表，因为是属性，我们可以和其他属性一样使用将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且容易出错的。因此，Vue专门为的用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组格式形式：1.:class=‘xxx’2.表达式是字符串: ‘classA’ ，适用于：样式的类名不确定，需要动态指定。3.表达式是对象: {classA:isA, classB: isB}，适用于：要绑定的样式个数确定、名字也
2025-02-17 15:12:51
1770
原创 Vue学习教程-07监视属性
/ console.log('isHot被修改了',newValue,oldValue)// immediate:true, //初始化时让handler调用一下。// immediate:true, //初始化时让handler调用一下。// immediate:true, //初始化时让handler调用一下。// //handler什么时候调用？当isHot发生改变时。// deep:true,//深度监视。//阻止 vue 在启动时生成生产提示。//阻止 vue 在启动时生成生产提示。
2025-02-17 01:36:17
1081
原创 Vue学习教程-06计算属性
模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护，因此推荐使用计算属性来描述依赖响应式状态的复杂逻辑计算属性：计算属性值会基于响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算方法：方法调用总是会在渲染发生时再次执行函数。
2025-02-16 17:16:46
744
原创 Vue学习教程-05事件处理
我们可以使用指令 (通常缩写为符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。用法为或使用快捷方式。
2025-02-16 14:21:24
903
原创 Vue学习教程-04数据代理
数据代理是一种技术，通过代理、拦截对象属性及方法的访问请求，实现与该对象的交互。在Vue中，数据代理是指在Vue实例化一个组件时，Vue会将组件中的data属性中的数据转化为getter/setter，并将这些getter/setter注册到Vue的响应式系统中，在Vue实例中访问组件中的数据时，实际上是访问了这个getter/setter，它能统计出数据的依赖关系，并在数据变化时更新视图。通过使用 Vue 框架的数据代理技术，我们可以实现简单、灵活、高效的数据绑定。实现自动响应更新。
2025-02-16 00:18:42
932
原创 Vue学习教程-03数据绑定
Vue数据绑定是指Vue.js框架中的一个重要概念，它实现了将数据和DOM元素进行动态绑定的功能。通过数据绑定，当数据发生变化时，相关的DOM元素也会相应地更新。单向数据绑定，使用v-bind:href =“xxx” 或简写为 :href；数据只能从 data 流向页面双向数据绑定，v-mode:value=“xxx” 或简写为 v-model=“xxx”；数据不仅能从 data 流向页面，还能从页面流向 datav-model只能应用在表单类元素（输入类元素）上。
2025-02-15 15:33:51
376
原创 Vue学习教程-02模版语法
Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。提示：以下是本篇文章正文内容，下面案例可供参考插值语法（双大括号表达式）指令（以 v-开头）v-bind:可以简写为；v-on:可以简写为。
2025-02-15 14:52:33
832
原创 Vue学习教程-01认识vue
为什么要学习vuevue是目前前端最火的框架之一无需构建步骤，渐进式增强静态的 HTML在任何页面中作为 web components嵌入单页面应用（SPA）vue是目前企业技术技术栈中要求的知识点vue可以提升开发体验vue学习难度较低。
2025-02-14 17:10:36
198
pycharm-anaconda-pytorch安装文档说明文档.pdf
2025-03-01
chrome 最新133.0.6943.99稳定版.zip
2025-02-19
专业绘图软件-EdrawMax免安装版.zip
2025-02-19
Linux远程终端连接 - xshell7安装包.zip
2025-02-18
Linux远程文件上传-xftp.zip
2025-02-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人