- 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ... 一、前言在项目开发过程中，若将页面元素全部绑定于一个表单中，且页面中的某些元素并未直接获得，在获取页面操作值时就会出现意外效果，例如不能重置页面元素。 二、场景复现需求：在使用el-select设计表单下拉框时，若后台返回的下拉框数组长度为1，则默认选中第一个元素。思路：后台返回值后直接将第一个元素的value赋值给el-select的v-model。created() {.... ...
- 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ... 一、前言在前期博文《Vue进阶（幺贰柒）：Vue插槽》中主要讲解了Vue插槽的基础用法，此篇博文接下来讲解高版本下通过v-slot指令如何应用Vue插槽及与slot、slot-scope的用法区别。 二、不具名插槽<body> <div id="app"> <Test> <div>slot插槽占位内容</div> </Test> </div> ...
- 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用... 一、概述插槽就是子组件中用slot标签定义的预留位置，可以设置name属性，也可以不设置name属性，设置name属性的叫具名插槽，不设置name属性的叫不具名插槽，在父组件中使用子组件时候，可以在使用子组件标签内通过声明插槽名或不声明插槽名的方式往子组件中的具名插槽或者不具名插槽写入html代码。插槽使用的关键在于：在父组件中使用子组件标签的时候可以往子组件内写入html代码。 二、使用...
- 记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。 记事本（不是操作系统的那个记事本，是一个简单的网页版本记事本）是一个较全面的Vue指令集合案例，在你学习完大部分基本的v-指令后（如v-model），你可以写这个记事本案例，来熟悉和巩固v-指令的使用方法，记事本这个案例是一个功能比较齐全的小demo，是一个不错的练手案例。
- 在目前 Vue.js 盛行的前端开发时代，一个较为稳定、可持续更新、具有强大团队背景的 UI 前端 PC 框架——ElementUI（饿了么UI）框架应运而生。它带给我们的不仅仅是柔美、华丽、实用的控件，更多的是那种轻松上手、简单快捷的引用组件方式，以及它开放式的、目录明确的帮助文档。 在目前 Vue.js 盛行的前端开发时代，一个较为稳定、可持续更新、具有强大团队背景的 UI 前端 PC 框架——ElementUI（饿了么UI）框架应运而生。它带给我们的不仅仅是柔美、华丽、实用的控件，更多的是那种轻松上手、简单快捷的引用组件方式，以及它开放式的、目录明确的帮助文档。
- 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports... 一、前言elementUI 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。git地址中文网Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports...
- 1、v-show v-show指令根据表达式的真假，显示或隐藏HTML元素。 使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!... 1、v-show v-show指令根据表达式的真假，显示或隐藏HTML元素。 使用v-show指令，元素本身是要被渲染的，至于是否显示是通过设置CSS样式属性display来控制的，如果表达式的值为false,则设置样式:"display:none"<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!...
- 1、计算属性的定义 表达式的逻辑过于复杂的时候，应当考虑使用计算属性。计算属性是以函数形式，在选项对象的computed选项中定义。我们将字符串翻转的功能用计算属性实现，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con... 1、计算属性的定义 表达式的逻辑过于复杂的时候，应当考虑使用计算属性。计算属性是以函数形式，在选项对象的computed选项中定义。我们将字符串翻转的功能用计算属性实现，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con...
- 1、简介 表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <... 1、简介 表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。 2、单行文本输入框<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <...
- 1、简介 组件是当作自定义元素使用的，元素可以有属性和内容，通过组件定义的prop接收属性值，可以解决属性问题，那么内容呢？这可以通过<slot>元素解决。此外，插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。Vue.component('greeting',{ template:'<div><slot></slot></div>'}) 在组... 1、简介 组件是当作自定义元素使用的，元素可以有属性和内容，通过组件定义的prop接收属性值，可以解决属性问题，那么内容呢？这可以通过<slot>元素解决。此外，插槽(slot)也可以作为父子组件之间通信的另一种实现方式。 下面是一个简单的自定义组件。Vue.component('greeting',{ template:'<div><slot></slot></div>'}) 在组...
- 1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面。在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就需要用到前端路由。在Vue.js中，可以使用官方的路由管理器Vue Router。Vue Router需要单独下载，可以使用CDN方式应用Vue Router<script src="h... 1、简介传统的Web应用程序不同页面间的跳转都是向服务器发起请求，服务器处理请求后向浏览器推送页面。在单页应用程序中，不同视图(组件的模板)的内容都是在同一个页面中渲染，页面间的跳转都是在浏览器端完成，这就需要用到前端路由。在Vue.js中，可以使用官方的路由管理器Vue Router。Vue Router需要单独下载，可以使用CDN方式应用Vue Router<script src="h...
- 一、应用场景有时候我们会看到如下代码：在我们使用vue进行开发的过程中，可能会遇到这样一种情况：当创建vue实例后，再次给对象赋值时，发现数据并不会自动更新到视图上去； 当我们去阅读vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。data () { return { studen... 一、应用场景有时候我们会看到如下代码：在我们使用vue进行开发的过程中，可能会遇到这样一种情况：当创建vue实例后，再次给对象赋值时，发现数据并不会自动更新到视图上去； 当我们去阅读vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 如下代码，给 student对象新增 age 属性。data () { return { studen...
- 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据... 一、背景Vue规定不允许直接修改props或者data属性，必须使用Vue.set方法。Vue.set方法用来修改对象属性。如果要增加属性所属对象是响应式的，该方法可以确保属性被创建后也是响应式的，同时触发视图更新。 二、基础知识注：修改的对象必须为响应式对象，且操作响应式对象的属性也必须是响应式的，能够触发视图更新。否则浏览器JS将无法解析，从而报错。 三、示例代码目的：定义一个列表数据...
- 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick... 一、语法element.addEventListener(event, function, useCapture);第一个参数：事件的类型 (如 “click” 或 “mousedown”)，详参【事件类型】；第二个参数：事件触发后调用的函数；第三个参数：（布尔值，可选）用于描述事件是冒泡还是捕获；注意：不要使用 “on” 前缀。 例如，使用 “click” ,而不是使用 “onclick...
- 为Vue3组件库引入unocss 为Vue3组件库引入unocss
上滑加载中
推荐直播
-
华为云码道Skill实战与极速交付，智能开发全链路实战2026/07/22 周三 19:00-21:00
王一男-华为云码道产品规划专家；李炎-华为云码道产品专家；姜浩-华为云HCDG核心组成员
直播深度解读华为云码道6月产品新特性，从Skill市场安装专家技能，带你零距离体验从需求，开发，审查，重构全链路闭环的开发过程。从零构建并交付一个完整项目，让您体验从代码提交到服务上线的“极速”之旅。
回顾中 -
聚开发者之力，创具身新未来2026/07/23 周四 15:00-17:00
张豪杰/程文/王军/刘新春/黄钦开 /张晓天
本次华为云具身智能开发平台CloudRobo培训面向具身智能开发者，带您全流程体验机器人本体R2C小时级接入、环境重建与轨迹生成仿真数据生产、PB级数据管理、数据评测、模型训推、强化学习和Benchmark一键评测等功能，并体验业界主流具身模型应用。
回顾中 -
用码道，让你的AI作品三步上朋友圈2026/08/04 周二 19:00-20:00
林华鼎-华为云AI开发者运营负责人
从入门 · 到做AI应用 · 到企业级开发。不教编程，只教用AI · 零代码、有产出、能带走、可炫耀 · 每课人人动手实操
回顾中
热门标签