Vue

发表于2024-08-21|更新于2026-07-16|Vue

|总字数:494|阅读时长:1分钟|浏览量:

标签: Vue | Super Bing`s Hexo

文章31 标签7 分类3 ** 首页 ** 时间轴** 文档**
** 标签
** 分类
** 爱好**
** 图片
** 书籍
 ** 项目 ** 友链 ** 关于[Super Bing`s Hexo](/blog/)** 搜索** 首页 ** 时间轴** 文档**
** 标签
** 分类
** 爱好**
** 图片
** 书籍
 ** 项目 ** 友链 ** 关于**# Vue
标签 - Vue2024**2024-08-26【Vue】基础系列（八）生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件 **2024-08-26【Vue】基础系列（七）v-model - 自动收集数据 - 表单数据自动更新 **2024-08-26【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符 **2024-08-26【Vue】基础系列（五）列表渲染v-for、key的原理、删除替换、过滤与排序 **2024-08-23【Vue】基础系列（四）样式绑定 - class - style **2024-08-22【Vue】基础系列（三）计算属性与监视属性 **2024-08-22【Vue】基础系列（二）模板语法 - 插值语法 - 指令语法 **2024-08-22【Vue】基础系列（一）初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - MVVM模式 **2024-08-2101-vue2介绍1Super Bing文章31 标签7 分类3 **Follow Me ****公告This is my Blog最新文章 02-Node.js 模块化开发2024-09-04 【Vue】基础系列（八）生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件2024-08-26 【Vue】基础系列（七）v-model - 自动收集数据 - 表单数据自动更新2024-08-26 【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符2024-08-26 【Vue】基础系列（五）列表渲染v-for、key的原理、删除替换、过滤与排序2024-08-26
**
分类
Node.js2
Vue9
bootstrap19

**标签test Vue bootstrap Node.js 项目案例教程 ES6**归档

九月 20241
八月 202430
网站资讯文章数目 :31本站总字数 :170.8k本站访客数 :本站总访问量 :最后更新时间 :©2019 - 2024 By Super Bing框架 Hexo|主题 Butterfly**** 搜索**** 数据库加载中

文章作者: Super Bing

文章链接: https://itdxb.cn/2024/08/21/vue/document/Vue/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Super Bing`s Hexo！

相关推荐

【Vue】基础系列（三）计算属性与监视属性

数据代理在Vue.js中，数据代理是Vue实现响应式数据的核心机制之一。它通过使用JavaScript的Object.defineProperty（在Vue 3中则是Proxy）来拦截对对象属性的访问和修改，从而实现数据和视图的双向绑定。这使得开发者可以更方便地使用简洁的语法来访问和操作数据，而Vue会自动更新相应的视图。数据代理的概念数据代理的核心是将组件的data对象中的属性代理到Vue实例上。这意味着你可以通过this.propertyName直接访问和修改data中的属性，而Vue会自动更新视图。数据代理的实现原理在Vue 2中，数据代理是通过Object.defineProperty实现的。Vue在实例化时，会遍历data对象中的所有属性，并为每个属性设置getter和setter。当你访问或修改这些属性时，Vue会自动触发相应的DOM更新。数据代理的使用示例代码 <!DOCTYPE html><html><head> <title>Vue Data Proxy Example</title>...

【Vue】基础系列（四）样式绑定 - class - style

样式绑定在应用界面中, 某个(些)元素的样式是变化的，class/style 绑定就是专门用来实现动态样式效果的技术 class 绑定:class='xxx' // xxx可以是字符串、对象、数组。字符串表达式是字符串: 'classA' 适用于：类名不确定，要动态获取 <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic { width: 400px; height: 100px; border: 1px solid black; } .happy { border: 4px solid red; ; background-color: rgba(255, 255, 0, 0.644); back...

《循序渐进Vue.js 3.x前端开发实战》《Vue.js 3企业级应用开发实战》《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》

【Vue】基础系列（五）列表渲染v-for、key的原理、删除替换、过滤与排序

列表渲染在 Vue.js 中，列表渲染是一个常用的功能，通常通过 v-for 指令来实现列表显示v-for 指令用于遍历数组或对象，并生成一组相应的 DOM 元素。例如： <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li></ul> 在这个例子中，v-for 遍历 items 数组，每个 item 的内容被插入到 li 元素中。每个列表项提供一个唯一的key属性，key应该是独一无二的，比如一个字符串或数字类型的ID v-for 指令用于展示列表数据语法：v-for="(item, index) in xxx" :key="yyy" 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）数组: (item, index) 对象: (v...

【Vue】基础系列（六）事件处理 - 绑定监听 - 事件修饰符 - 按键修饰符

事件处理在 Vue.js 中，事件处理是响应用户交互的核心功能之一。通过绑定事件监听器、使用事件修饰符和按键修饰符，可以轻松实现灵活的交互逻辑。绑定监听在 Vue 中，通过 v-on 指令或其缩写 @ 来绑定事件监听器。例如： <button @click="handleClick">点击我</button> 在这个例子中，当用户点击按钮时，会触发 handleClick 方法。 methods: { handleClick() { alert('按钮被点击了'); }} 事件的基本使用：使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；例如：v-on:click 或 @click 事件的回调需要配置在methods对象中，最终会在vm上 methods中配置的函数，不要用箭头函数！否则this就不是vm了 methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象； @click=&...

【Vue】基础系列（七）v-model - 自动收集数据 - 表单数据自动更新

v-model 收集数据v-model 是 Vue.js 提供的一个非常强大的双向数据绑定指令，主要用于表单控件中，实现数据的自动收集和同步更新。它在处理表单输入时极大地简化了开发过程。使用v-model(双向数据绑定)自动收集数据v-model 可以用于各种表单元素，如 <input>, <textarea>, <select>，并且会根据元素类型自动选用合适的绑定方式。 v-model的三个修饰符 lazy：失去焦点再收集数据 number：输入字符串转为有效的数字 trim：输入首尾空格过滤 text<input type="text" v-model="message"> new Vue({ el: '#app', data: { message: '' }}); 当用户在输入框中输入内容时，message 数据会自动更新...

数据加载中