01-vue2介绍

2024-08-22

【Vue】基础系列（一）初识 - 简单使用 - 创建Vue对象 - 双向数据绑定 - MVVM模式

Vue-基础系列(一)基本认识Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。渐进式 JavaScript 框架，用来动态构建用户界面官网：https://cn.vuejs.org/ 特点遵循 MVVM 模式编码简洁，体积小，运行效率高，适合移动/PC 端开发它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目采用组件化模式，提高代码复用率、且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM和Diff算法，尽量复用DOM节点与其他前端 JS 框架的关联借鉴 angular 的模板和数据绑定技术借鉴 react 的组件化和虚拟DOM 技术 Vue 常用工具和插件 vue-cli：vue 脚手架 ...

2024-08-26

【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 数据会自动更新...

2024-08-23

【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>...

2024-08-26

【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...

2024-08-22

【Vue】基础系列（二）模板语法 - 插值语法 - 指令语法

Vue-基础系列(二)Vue有很多模板语法特别好用，就是在HTML中写一些Vue定义的一些模板语法，可以快速的展现数据，绑定方法等。这也就是Vue上手很快的原因之一。模板的理解模板就是动态html页面，这里面包含了一些js语法代码 Vue的模板语法分为两种，分别是：【插值语法】双大括号表达式（“Mustache”语法）【一个】【指令语法】指令（以v-开头的自定义标签属性）【很多】插值语法：功能：用于解析标签体内容，向页面输出数据写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，可以调用对象的方法备注：里面写js表达式：有返回值的js代码，而不是js语句指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）举例：v-bind:href="xxx" 或简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性备注...

2024-08-26

【Vue】基础系列（八）生命周期 - 初始化显示 - 更新状态 - 死亡状态 - 父子组件