Vue 示例

创建于 2024-12-03 / 24
字体： [默认] [大] [更大]

Vue 简介

创建一个简单的"Hello World"程序 创建一个带有文本插值的程序 Vue 基础知识解释

v-bind 指令

将 <div> 元素绑定到类 将 <img> 元素绑定到图像文件 更改字体大小 以不同的方式更改字体大小 以另一种方式更改字体大小 更改背景颜色 使用 v-bind 和 JavaScript 条件更改背景颜色 将 <div> 元素绑定到类 有条件地将 <div> 元素绑定到类 使用 data 属性有条件地将 <div> 元素绑定到类 使用 v-bind 简写 使用输入范围元素更改不透明度以显示图像 单击使用 v-for 创建的图像时分配一个类 我们看到使用 class 和 v-bind:class 设置的 CSS 规则已合并 可以使用 v-bind:class 设置多个类，以逗号分隔 CSS 规则通过 v-bind:style 定义，同时使用驼峰式大小写和短横线大小写表示法 类使用数组语法分配 v-bind 解释

v-if 指令

根据数据属性有条件地显示文本 根据比较有条件地显示文本 有条件地显示文本，使用 v-if、v-else-if 和 v-else 如果某个文本包含单词"pizza"，则显示一条消息 如果某个文本包含单词"pizza"，则显示消息和图像 如果某个文本包含"pizza"或"burrito"一词，则显示不同的消息和图像 v-if 解释

v-show 指令

根据数据属性显示或隐藏 <div> 元素 探索 v-show 和 v-if 之间的区别 v-show 解释

v-for 指令

基于数组渲染列表 基于数组渲染图像 基于数组渲染图像和文本 基于数组渲染文本时获取索引 根据数组中的对象渲染文本时获取索引 v-for 解释

v-on 指令

单击按钮增加计数器 单击按钮即可打开和关闭灯 每次注册文本输入事件时，计数器都会递增 每次注册鼠标指针移动事件时都会生成随机背景色 对于使用 v-for 生成的元素，使用 v-on:click 设置点击事件 使用 v-on 简写 @ v-on 解释

方法

一个方法写"Hello World！" 从事件对象获取鼠标指针位置的方法 一种根据鼠标指针位置改变背景颜色的方法 一种方法将输入字段中的文本写入笔记本页面的图像 单击不同的按钮时会使用不同的参数值调用方法 使用文本和事件对象作为参数调用方法 许多按钮使用不同的参数调用相同的方法 方法解释

事件修饰符

.once 修饰符使警报仅在单击按钮时出现一次 keydown 键盘事件调用将按键写入屏幕的方法 .s 修饰符在按下"S"键时触发警报 当同时按下"S"和"ctrl"键时，.s 和 .ctrl 修饰符会触发警报 右键单击 <div> 元素时背景颜色发生变化 当按下"ctrl"键并右键单击 <div> 元素时，背景颜色会发生变化 使用 .prevent 修饰符阻止右键单击下拉菜单 按下"shift"键时左键单击会更改图像 事件修饰符说明

v-model 指令

可以使用 v-model 将新购物商品添加到购物清单中 探索 v-model 提供的双向绑定功能 复选框更改布尔数据属性 购物清单 购物清单，其中的物品可以标记为已找到 动态餐厅订单表 使用单选按钮选择收藏夹的动物，<input type="radio">--> 通过复选框选择您喜欢的食物，<input type="checkbox">--> 从下拉列表中选择一辆车， <select>--> 选择多辆车， <select multiple>--> 只读表单输入，<input type="file">--> 注册高度， <input type="range">--> 选择一种颜色，<input type="color">--> 写一篇产品评论，<textarea>--> v-model 解释

Computed 计算属性

复选框是动态的，以便文本反映当前状态 当前复选框状态文本为"yes"或"no" Computed 计算属性解释

观察者

使用观察程序，因此无法选择 20 到 60 之间的值 观察程序将新旧值作为输入参数 新值和旧值用于确认正确的电子邮件地址 观察者解释

模板

"Hello World!" 使用模板配置选项显示 模板说明

SFC 页面

一个很基本的 SFC 页面 SFC 页面说明

组件

一个组件使用三次 每个组件都有自己的计数器 带有 props 的组件是使用 v-for 创建的 带有 props 的组件是使用 v-for 和 key 属性创建的 这个错误的示例表明需要 key 属性 此示例演示了 key 属性可以解决问题 组件说明

Props 选项

Props 在组件中定义为数组 组件中定义了两个prop属性 布尔属性用于定义食物是否是收藏夹的 props 配置选项定义为一个对象 可以使用按钮切换"foodIsFavorite"数据属性 Props 选项解释

Emit

该组件发出布尔收藏夹的状态 发出的布尔收藏夹状态由 App.vue 接收 在 App.vue 中接收并更新发出的布尔收藏夹状态 Emit 说明

Fallthrough 属性

style 属性落入组件 style 属性落入组件，并与内联样式合并 $attrs 对象用于定义fallthrough属性所属的位置 Fallthrough 属性说明

作用域样式

除非另有定义，否则定义的样式是全局的 样式被定义为本地样式，带有 scoped 属性 作用域样式说明

局部组件

main.js 中定义的组件全局可用 组件可以在另一个组件内部定义，以便仅在局部可用 局部组件说明

插槽

"Hello World!" 被接收到组件槽内 组件的插槽用于创建类似卡片的包装 组件的插槽用于创建另一个类似卡片的包装 插槽与后备内容一起使用 同一组件中使用了两个槽 插槽的命名是为了将内容引导到正确的位置 如果插槽没有名称，则该插槽将是默认插槽 插槽被显式定义为默认插槽 v-slot 指令用于将内容定向到特定槽 v-slot 简写为 # 从作用域槽接收数据 使用 v-for 创建的作用域插槽将数据发送到其父级 从对象数组创建的作用域槽将数据发送到其父级 文本从作用域槽发送，没有v-bind指令 作用域槽被命名 命名范围槽将不同的数据发送到 App.vue。 插槽说明

动态组件

App.vue 在显示哪个组件之间切换 如果没有 <KeepAlive> 组件，则不会缓存组件 <KeepAlive> 组件缓存组件 <KeepAlive include="CompOne"> 代码只缓存指定的组件 指定的组件未使用 <KeepAlive exclude="CompOne"> 代码进行缓存 指定两个组件与 <KeepAlive> 组件一起缓存 最后访问的两个组件指定与 <KeepAlive> 组件一起缓存 动态组件说明

传送

<div> 元素被移动到 DOM 中 <body> 元素的根 范围样式和脚本仍然适用于传送 <div> 元素 传送说明

HTTP 请求

发送一个文本文件的 GET 请求，并接收一个 Promise 对象 发送针对文本文件的 GET 请求，并接收响应对象 发送针对文本文件的 GET 请求，并接收实际文件 发送 GET 请求以获取 JSON 文件，并接收有关大型陆地哺乳动物的信息 发送 GET 请求以获取 JSON 文件，并显示随机的大型陆地哺乳动物 从 random-data-api.com API 获取随机用户 从 random-data-api.com API 中获取随机用户，并显示标题、名称和图像 使用 axios 库从 random-data-api.com API 获取随机用户 HTTP 请求解释

模板参考

$refs 对象用于替换 <p> 元素中的文本 $refs 对象用于将一个 <p> 元素中的文本替换为另一个元素 $refs 对象用于将 <input> 元素中的值放入 <p> 元素 使用 v-for 创建的具有 ref 属性的 <li> 元素作为数组收集在 $refs 对象中 模板参考说明

生命周期钩子

beforeCreate 生命周期钩子 created 生命周期钩子 beforeMount 生命周期钩子 mounted 生命周期钩子 mounted 生命周期钩子用于将光标置于 <input> 元素内 beforeUpdate 生命周期钩子 updated 生命周期钩子 updated 生命周期钩子会生成无限循环 beforeUnmount 生命周期钩子 unmounted 生命周期钩子 errorCaptured 生命周期钩子 errorCaptured 生命周期钩子检索有关错误的信息 renderTracked 生命周期钩子 activated 生命周期钩子 activated、deactivated以及其他生命周期钩子 生命周期钩子解释

Provide/Inject

App.vue 中提供的信息被注入并显示在组件中t Provide/Inject 解释

路由

使用动态组件在组件之间切换 使用路由在组件之间切换 路由解释

动画

<div> 元素使用 CSS transition 属性进行旋转 圆形 <div> 元素使用 CSS @keyframes 属性从左到右弹跳 <p> 元素通过按钮切换 <Transition> 组件内的 <p> 元素在被删除时淡出 <p> 元素在切换时滑入和滑出 <p> 元素在"进入"和"离开"期间具有不同的背景颜色 <p> 元素的动画效果不同，使用 name 属性来区分 <Transition> 组件 after-enter 事件触发显示 <div> 元素 切换按钮会触发 enter-cancelled 事件 appear 属性在页面加载后立即启动 <p> 元素动画 通过"进入"和"离开"时的动画翻阅图像。 在旧图像被删除之前添加新图像 通过"进入"和"离开"时的动画翻阅图像。 mode="out-in" 阻止添加新图像，直到旧图像被删除 组件之间的切换是动画的 动画解释

带有 v-for 的动画

新列表项将添加到使用 v-for 渲染的列表中，使用 <TransitionGroup> 可以添加或删除骰子，添加的骰子使用 <TransitionGroup> 进行动画处理 可以添加或删除骰子，添加和删除的骰子都使用 <TransitionGroup> 进行动画 骰子可以添加、删除、洗牌或排序，所有动画都使用 <TransitionGroup> v-for 动画说明

组合 API

使用组合 API编写:通过单击按钮可以减少打字机的存储数量 使用选项 API编写:通过单击按钮可以减少打字机的存储数量 组合 API 说明


0 人点赞过