Vue.js 基础理论实操

Vue.js 基础理论实操

Vue.js 基础理论实操

手写每行代码，带你轻松入门 Vue.js。

等 33 人订阅共28篇文章创建于2023-03-17

（28）Vue 中的动画特效——⑦ Vue 中的动画封装 | Vue 基础理论实操

打开编辑器，准备好一份代码，点击“切换”显示/隐藏时有渐隐渐现的动画效果： ```html <!DO......

1年前
7.1k
3
评论

（28）Vue 中的动画特效——⑦ Vue 中的动画封装 | Vue 基础理论实操

（27）Vue 中的动画特效——⑥ Vue 中的列表过渡 | Vue 基础理论实操

打开编辑器，准备一份基础 Vue 代码： ```html <!DOCTYPE html> <htm......

1年前
8.4k
3
评论

（27）Vue 中的动画特效——⑥ Vue 中的列表过渡 | Vue 基础理论实操

（26）Vue 中的动画特效——⑤ Vue 中多个元素或组件的过渡 | Vue 基础理论实操

打开编辑器，准备好最简单的页面效果，点击“切换”可以显示和隐藏： ```html <!DOCTYPE......

1年前
7.7k
3
1

（26）Vue 中的动画特效——⑤ Vue 中多个元素或组件的过渡 | Vue 基础理论实操

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

打开编辑器，准备一份有一个简单功能的代码： ```html <!DOCTYPE html> <ht......

1年前
8.0k
3
1

（25）Vue 中的动画特效——④ Vue 中的 JS 动画与 Velocity.js 的结合 | Vue 基础理论实操

（24）Vue 中的动画特效——③ 在 Vue 中同时使用过渡和动画 | Vue 基础理论实操

打开上一篇的最终代码： ```html <!DOCTYPE html> <html lang="en......

1年前
5.7k
10
评论

（24）Vue 中的动画特效——③ 在 Vue 中同时使用过渡和动画 | Vue 基础理论实操

（23）Vue 中的动画特效——② 在 Vue 中使用 Animate.css 库 | Vue 基础理论实操

本节将学习更复杂的 Vue 中的 CSS 动画的使用。接上一篇文章的代码，继续了解 Animate.css 动画库的使用......

1年前
5.7k
4
1

（23）Vue 中的动画特效——② 在 Vue 中使用 Animate.css 库 | Vue 基础理论实操

（22）Vue 中的动画特效——① Vue 中的 CSS 动画原理 | Vue 基础理论实操

在讲解动画原理之前，我们先来实现一个非常简单的功能。通过点击“切换”按钮来控制页面内容展示与否。代码及功能效果如下......

1年前
5.0k
8
评论

（22）Vue 中的动画特效——① Vue 中的 CSS 动画原理 | Vue 基础理论实操

（21）深入理解 Vue 组件——⑧ 动态组件与 v-once 指令 | Vue 基础理论实操

💡先用之前学习的知识实现这个需求： ```html <body> <div id="ro......

1年前
4.7k
3
评论

（21）深入理解 Vue 组件——⑧ 动态组件与 v-once 指令 | Vue 基础理论实操

（20）深入理解 Vue 组件——⑦ 作用域插槽 | Vue 基础理论实操

先看以下代码： ```html <body> <div id="root"> <chil......

1年前
3.9k
1
评论

（20）深入理解 Vue 组件——⑦ 作用域插槽 | Vue 基础理论实操

（19）深入理解 Vue 组件——⑥ 在 Vue 中使用插槽 | Vue 基础理论实操

当父组件要传递内容给子组件时，按照我们之前学习的方法，我们的做法是：属性形式，向子组件传值......

1年前
3.9k
2
评论

（19）深入理解 Vue 组件——⑥ 在 Vue 中使用插槽 | Vue 基础理论实操

（18）深入理解 Vue 组件——⑤ 非父子组件间的传值 | Vue 基础理论实操

Vue 官方对 Vue 框架的定义是一个轻量级的视图层框架，当项目中出现很复杂的数据传递时（主要在于......

1年前
3.3k
5
评论

（18）深入理解 Vue 组件——⑤ 非父子组件间的传值 | Vue 基础理论实操

（17）深入理解 Vue 组件——④ 给组件绑定原生事件 | Vue 基础理论实操

父组件中给组件所绑定事件 `@click="事件方法名"` ，这个“绑定”事件叫做“自定义事件”......

1年前
2.7k
2
评论

（17）深入理解 Vue 组件——④ 给组件绑定原生事件 | Vue 基础理论实操

（16）深入理解 Vue 组件——③ 组件参数校验与非 props 特性 | Vue 基础理论实操

组件的参数校验：父组件向子组件传递的内容，子组件对所接收的数据做一些约束（规则的改变），这些约束叫做参数的校验。

1年前
3.4k
12
1

（16）深入理解 Vue 组件——③ 组件参数校验与非 props 特性 | Vue 基础理论实操

（15）深入理解 Vue 组件——② 父子组件间的数据传递 | Vue 基础理论实操

1 父组件向子组件传值 💡父组件向子组件传值：通过“属性”传值！ ❓需求：实现“点击”后计数器累加功能...

1年前
1.9k
1
评论

（15）深入理解 Vue 组件——② 父子组件间的数据传递 | Vue 基础理论实操

（14）深入理解 Vue 组件——① 使用组件的细节点 | Vue 基础理论实操

❓本篇需要解决的问题： - `is`标签解决 H5 标签上的 bug ； - 子组件里定义 `data` ...

1年前
2.0k
5
评论

（14）深入理解 Vue 组件——① 使用组件的细节点 | Vue 基础理论实操

（13）Vue 入门——⑧ 列表渲染 | Vue 基础理论实操

列表渲染，在“Vue 初识”阶段编写“简易 TodoList”时，我们就使用 `v-for` 指令...

1年前
1.5k
2
评论

（13）Vue 入门——⑧ 列表渲染 | Vue 基础理论实操

（12）Vue 入门——⑦ 条件渲染 | Vue 基础理论实操

🚀需求：在页面上显示 `hello, qdywxs.` 这个内容，可控制内容在页面上隐藏/显示。

1年前
2.3k
6
评论

（12）Vue 入门——⑦ 条件渲染 | Vue 基础理论实操

（11）Vue 入门——⑥ Class 与 Style 绑定 | Vue 基础理论实操

🚀需求：让下面的代码实现点击页面上的 “hello qdywxs” 可以切换颜色。前我们使用 Vue 都是对数据进行操作，很难想象...

1年前
2.0k
6
评论

（11）Vue 入门——⑥ Class 与 Style 绑定 | Vue 基础理论实操

（10）Vue 入门——⑤ 计算属性的 getter 和 setter | Vue 基础理论实操

打开编辑器并敲出使用计算属性的一段代码： ```html <!DOCTYPE html> <html...

1年前
2.0k
6
评论

（10）Vue 入门——⑤ 计算属性的 getter 和 setter | Vue 基础理论实操

（09）Vue 入门——④ 计算属性、方法与侦听器 | Vue 基础理论实操

🚀需求：在 data 中，有 firstName 和 lastName 两个内容，页面显示“全名 fullName ”。

1年前
1.8k
2
评论

（09）Vue 入门——④ 计算属性、方法与侦听器 | Vue 基础理论实操