目录

Vue 示例

❮ 上一节下一节 ❯

Vue简介

创建一个简单的"Hello World"程序创建带有文本插值的程序

Vue 基础知识解释

这个`v-bind`指令

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

这个`v-if`指令

根据数据属性有条件地显示文本根据比较有条件地显示文本有条件地显示文本v-if,v-else-if和v-else 如果某个文本包含单词“pizza”，则显示一条消息如果某个文本包含单词“pizza”，则显示消息和图片如果某个文本包含“pizza”或“burrito”一词，则显示不同的消息和图片

这个`v-show`指令

显示或隐藏<div>基于数据属性的元素探索之间的差异v-show和v-if

这个`v-for`指令

基于数组渲染列表基于数组渲染图片基于数组渲染图片和文本基于数组渲染文本时获取索引根据数组中的对象渲染文本时获取索引

这个`v-on`指令

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

方法

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

事件修饰符

这个.once修饰符使警报仅在单击按钮时出现一次这个keydown键盘事件调用将按键写入屏幕的方法这个.s按下“S”键时修饰符会触发警报这个.s和.ctrl同时按下“S”和“ctrl”键时修饰符会触发警报背景颜色改变时<div>元素被右键单击背景颜色改变时<div>按下“ctrl”键时右键单击元素右键单击下拉菜单被阻止.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>

计算属性

复选框是动态的，以便文本反映当前状态当前复选框状态文本为“是”或“否”

计算属性解释

观察者

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

观察者解释

模板

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

证监会页面

一个非常基本的 SFC 页面

SFC 页面解释

成分

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

道具

Props 在组件中定义为数组组件中定义了两个 prop 属性布尔属性用于定义食物是否是最喜欢的 props配置选项被定义为一个对象可以使用按钮切换“foodIsFavorite”数据属性

发射

该组件发出布尔最喜欢的状态 App.vue 接收发出的布尔收藏夹状态在 App.vue 中接收并更新发出的布尔收藏夹状态

坠落属性

这个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>成分

动态组件解释

传送

A<div>元素被移动到根<body>DOM 中的元素范围样式和脚本仍然适用于传送<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对象用于替换 a 中的文本<p>元素这个$refs对象用于替换其中的文本<p>元素变成另一个元素这个$refs对象用于放置来自<input>元素变成<p>元素 <li>具有 ref 属性的元素，使用以下命令创建v-for，收集在$refs作为数组的对象

模板参考解释

生命周期挂钩

这个beforeCreate生命周期钩子这个created生命周期钩子这个beforeMount生命周期钩子这个mounted生命周期钩子这个mounted生命周期钩子用于将光标放入<input>元素这个beforeUpdate生命周期钩子这个updated生命周期钩子这个updated生命周期钩子生成无限循环这个beforeUnmount生命周期钩子这个unmounted生命周期钩子这个errorCaptured生命周期钩子这个errorCaptured生命周期钩子检索有关错误的信息这个renderTracked生命周期钩子这个activated生命周期钩子这个activated,deactivated，以及其他生命周期挂钩

生命周期钩子解释

提供/注入

App.vue中提供的信息被注入并显示在组件中

提供/注入解释

路由

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

动画

A<div>元素随 CSS 旋转transition属性一个圆形<div>元素通过 CSS 从左向右弹跳@keyframes属性 A<p>元素通过按钮切换 A<p>里面的元素<Transition>组件被移除后会淡出 A<p>元素在切换时滑入和滑出 A<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

使用Composition API编写：通过单击按钮可以减少打字机的存储数量使用Options API编写：通过单击按钮可以减少打字机的存储数量

组合 API 解释

❮ 上一节下一节 ❯