Vue2

代码在线跑，知识轻松学

Python精品学习库

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

博客搬家 | 分享价值百万资源包

往期视频·干货材料·成员作品 最新动态

技术创作特训营·精选知识专栏

新邀入驻腾讯云开发者社区，福利多多！

如何运用「云、端融合的数智化安全体系」高效护航数据安全

左手AI，右手安全 —— 一汽丰田数字化转型之路

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值==

vue表单案例练习：vue表单创建一行数据及删除数据的实现与理解

简单说：通过Object.defineProperty()方法把data对象所有属性添加到vm(Vue原型)对象上，且为每个属性指定一个getter/setter。

vue2知识点：数据代理

思考：如何改成使用本地缓存，是写一堆按钮每次触发就是往本地缓存种get和set？答案是错误的，因为太复杂了会写一堆的get和set方法

vue2基础组件通信案例练习：把案例Todo-list改写成本地缓存

当模板的 html 结构比较复杂时，直接在 template 属性中定义就不现实了，效率也会很低，此时我们可以使用模板，定义模板的四种形式:

vue2知识点：组件模板定义

组件可以嵌套使用，叫做父子组件。那么父组件经常要给子组件传递数据这叫做父子组件通信。父子组件的关系可以总结为 props 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的：

vue2知识点：组件的props属性、非props属性、props属性校验

1.《基础篇第1章：vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结

vue2知识点：组件is属性

父组件给子组件传值使用props属性, 那么需要子组件更新父组件时,要使用自定义事件\$on和\$emit：

vue2知识点：组件自定义事件

父子组件使用时,有时需要将父元素的模板跟子元素模板进行混合,这时就要用到slot插槽进行内容分发, 简单理解就是在子模板定义中先占个位置<slot>等待父组件调用时进行模板插入。

vue2知识点：组件插槽分发

使用\<component>标签的is属性,动态绑定多个组件到一个挂载点,通过改变is绑定值,切换组件。

vue2知识点：动态组件

注意点1：所谓“混入”，就是把vue组件中共同的配置提取出来，单独用一个文件保存，比如叫mixin.js保存配置，使用时引入并配置即可使用。

vue2知识点：混入mixins

浏览器本地缓存实际是js的知识点，这里只是提一下加深下印象

vue2知识点：浏览器本地缓存

主动挂载绑定自定义函数名   一般vm.\$on和vm.\$emit搭配使用，并且必须指定同一个vue实例，否则无效

vue2知识点：vm调用待$命令介绍

1）被所有组件(vc、vm)能够看得见

vue2知识点：全局事件总线（GlobalEventBus）

答案：推荐使用“全局事件总线”，因为它是vue提供的，完全使用的vue技术，而“消息订阅与发布”则是第三方。

vue2知识点：消息订阅与发布

答案：举例我想有个input输入框，我还有个“编辑”按钮，如图1，如图2，点击“编辑”按钮input输入框就聚焦，失焦就修改成功输入框的值。如图3你想实现45行到50行代码执行完，页面模板就重新解析渲染更新数据，然后你执行52行代码输入框就聚焦了，但实际页面显示压根不聚焦为啥？因为vue会把整个方法都执行完才会去渲染更新DOM节点（为啥要这么设计？因为如果一个方法里面修改8个属性值，我每修改一个DOM就渲染一次也太消耗资源了，所以设计成方法执行完毕了，用户属性都修改好了，我再去渲染DOM节点），所以52行会先执行，但是DOM还没渲染且输入框还没出来了，上哪里聚焦去，所以就出现了点击“编辑”按钮输入框聚焦失败的场景。

vue2知识点：nextTick语法

注意点1：最好有css动画基础，再练习这块，但我只是了解所以原封不动拷贝看效果就是，当了解即可。

vue2知识点：Vue封装的过度与动画

第一步（仅第一次执行）：全局安装@vue/cli。

《基础篇第4章：vue2基础》：使用vue脚手架创建项目

vue2基础组件通信案例练习：把案例Todo-list改成使用消息订阅与发布

注意点1：改动App和MyItem页面

vue2基础组件通信案例练习：把案例Todo-list新增编辑按钮

注意点：让每一个添加和删除的操作有一个柔和的动画效果，有两种方式。方式1：在MyItem添加动画效果使用\<transition>标签；方式2：在MyList中添加效果使用\<transition-group>标签。下面案例代码使用方式2。

vue2基础组件通信案例练习：把案例Todo-list改成使用动画与过度

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

腾讯云开发者社区推出了Vue2专栏，为你提供了Vue2的相关文章，致力于帮助开发者快速成长与发展。

Vue2

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐