Vue 示例
Vue 简介
Vue 基础知识详解v-bind 指令
将
v-bind 解释
<div> 元素绑定到一个类 将 <img> 元素绑定到一个图像文件 更改字体大小 以不同的方式更改字体大小 以另一种不同的方式更改字体大小 更改背景颜色 使用 v-bind 和 JavaScript 条件来更改背景颜色 将 <div> 元素绑定到一个类 条件地将 <div> 元素绑定到一个类 条件地将 <div> 元素绑定到一个类，使用数据属性 使用 v-bind 简写 使用输入范围元素更改不透明度以显示图像 当使用 v-for 创建的图像被点击时分配一个类 我们看到使用 class 和 v-bind:class 设置的 CSS 规则被合并 可以使用逗号分隔符使用 v-bind:class 设置多个类 CSS 规则使用 v-bind:style 定义，使用驼峰式和短横线式符号 类使用数组语法分配v-if 指令
基于数据属性条件地显示文本 基于比较条件地显示文本 使用
v-if 解释
v-if、v-else-if 和 v-else 条件地显示文本 如果某个文本包含单词 'pizza'，则显示一条消息 如果某个文本包含单词 'pizza'，则显示一条消息和一张图片 如果某个文本包含单词 'pizza' 或 'burrito'，则显示不同的消息和图片v-show 指令
v-show 解释
v-for 指令
v-for 解释
v-on 指令
点击按钮增加计数器 点击按钮打开或关闭灯光 每当注册文本输入事件时，计数器都会增加 每当注册鼠标指针移动事件时，都会生成随机背景颜色 使用
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 可以将新的购物商品添加到购物清单中 探索 v-model 提供的双向绑定功能 复选框更改布尔数据属性 购物清单 购物清单，可以将商品标记为已找到 动态餐厅点餐表格 使用单选按钮选择最喜欢的动物，<input type="radio"> 使用复选框选择喜欢的食物，<input type="checkbox"> 从下拉列表中选择一辆汽车，<select> 选择多辆汽车，<select multiple> 只读表单输入，<input type="file"> 注册身高，<input type="range"> 选择颜色，<input type="color"> 撰写产品评论，<textarea>计算属性
计算属性解释观察者
观察者解释模板
模板解释SFC 页面
SFC 页面解释组件
组件被使用了三次 每个组件都有自己的计数器 使用
组件解释
v-for 创建带有 props 的组件 使用 v-for 和 key 属性创建带有 props 的组件 此有错误的示例表明需要 key 属性 此示例表明 key 属性可以解决问题props
props 在组件中定义为数组 组件中定义了两个 prop 属性 布尔 prop 用于定义食物是否为最爱 props 配置选项被定义为对象 可以使用按钮切换 "foodIsFavorite" 数据属性
props 解释
emit
emit 解释透传属性
透传属性解释作用域样式
作用域样式解释局部组件
局部组件解释插槽
"Hello World!" 在组件的插槽内被接收 组件的插槽用于创建卡片式包裹 组件的插槽用于创建另一个卡片式包裹 插槽与备用内容一起使用 两个插槽在同一个组件中使用 插槽被命名以将内容定向到正确的位置 如果插槽没有名称，那将是默认插槽 插槽被明确定义为默认插槽
插槽解释
v-slot 指令用于将内容定向到特定插槽 v-slot 的简写是 # 从作用域插槽接收数据 使用 v-for 创建的作用域插槽向其父级发送数据 从对象数组创建的作用域插槽向其父级发送数据 文本从作用域插槽发送，没有 v-bind 指令 作用域插槽被命名 命名作用域插槽向 App.vue 发送不同的数据。动态组件
App.vue 切换要显示的组件 没有
动态组件解释
<KeepAlive> 组件，组件不会被缓存 <KeepAlive> 组件缓存组件 只有指定的组件被 <KeepAlive include="CompOne"> 代码缓存 指定的组件不会被 <KeepAlive exclude="CompOne"> 代码缓存 两个组件被指定使用 <KeepAlive> 组件缓存 最近访问的两个组件被指定使用 <KeepAlive> 组件缓存传送
传送解释HTTP 请求
对文本文件发送 GET 请求，并收到一个 Promise 对象 对文本文件发送 GET 请求，并收到一个响应对象 对文本文件发送 GET 请求，并收到实际文件 对 JSON 文件发送 GET 请求，并收到有关大型陆地哺乳动物的信息 对 JSON 文件发送 GET 请求，并显示一个随机的大型陆地哺乳动物 从 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 和其他生命周期钩子提供/注入
提供/注入解释路由
路由解释动画
使用 CSS
动画解释
transition 属性旋转一个 <div> 元素 使用 CSS @keyframes 属性让一个圆形的 <div> 元素左右弹跳 使用按钮切换一个 <p> 元素 在 <Transition> 组件中，当 <p> 元素被移除时，它会淡出 当 <p> 元素被切换时，它会滑入和滑出 一个 <p> 元素在 “进入” 和 “离开” 期间具有不同的背景颜色 使用 name 属性区分 <Transition> 组件，对 <p> 元素进行不同的动画效果 after-enter 事件触发 <div> 元素显示 切换按钮触发 enter-cancelled 事件 appear 属性在页面加载后立即开始 <p> 元素动画 使用 “进入” 和 “离开” 动画翻转图片。 在移除旧图片之前添加新图片 使用 “进入” 和 “离开” 动画翻转图片。 mode="out-in" 阻止在移除旧图片之前添加新图片 切换组件时进行动画使用 v-for 的动画
使用
使用 v-for 的动画解释
<TransitionGroup> 将新列表项添加到使用 v-for 渲染的列表中 可以添加或移除骰子，使用 <TransitionGroup> 对添加的骰子进行动画 可以添加或移除骰子，使用 <TransitionGroup> 对添加和移除的骰子进行动画 可以添加、移除、洗牌或排序骰子，所有操作都使用 <TransitionGroup> 进行动画
