LuCh1Monster的博客

文章目录1. 规则归类1.1 优先级 A：必要的1.2 优先级 B：强烈推荐1.3 优先级 C：推荐1.4 优先级 D：谨慎使用2. 优先级 A 的规则：必要的 (规避错误)2.1 组件名为多个单词:imp:2.2 组件数据:imp:2.3 Prop 定义:imp:这里是官方的 Vue 特有代码的风格指南。如果在工程中使用 Vue，为了回避错误、小纠结和反模式，该指南是份不错的参考。不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏

文章目录1. Vue Devtools2. 直接使用`兼容性Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。语义化版本控制Vue 在其所有项目中公布的功能和行为都遵循语义化版本控制。对于未公布的或内部暴露的行为，其变更会描述在发布说明中。更新日志最新稳定版本：2.6.11每个版本的更新日志见 GitHub。1. Vue Devtools在使用 Vue 时，我们推

文章目录1. 访问元素 & 组件1.1 访问根实例1.2 访问父级组件实例1.3 访问子组件实例或子元素1.4 依赖注入2. 程序化的事件侦听器3. 循环引用3.1 递归组件3.2 组件之间的循环引用4. 模板定义的替代品4.1 内联模板4.2 X-Template5. 控制更新5.1 强制更新5.2 通过 v-once 创建低开销的静态组件这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明

文章目录1. 在动态组件上使用 keep-alive2. 异步组件2.1 处理加载状态1. 在动态组件上使用 keep-alive我们之前在一个多标签的界面中使用 is 特性来切换不同的组件:<component v-bind:is="currentTabComponent"></component>当在这些组件之前切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来开展说一说这个多标签界面:你会注意到，如果你选择了一篇文章，切换到 Arc

文章目录1. 插槽内容2. 编译作用域3. 后备内容4. 具名插槽5. 作用域插槽5.1 独占默认插槽的缩写语法5.2 解构插槽 Prop6. 动态插槽名7. 具名插槽的缩写8. 其他示例9. 废弃了的语法9.1 带有 `slot` 特性的具名插槽9.2 带有 `slot-scope` 特性的作用域插槽在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新统一的语法(即 slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除，且仍在文档中的特性。新语法的由来可查

文章目录1. 事件名2. 自定义组件的 v-model3. 将原生事件绑定到组件3.1 native 修饰符3.2 sync 修饰符1. 事件名不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件:this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的:<!-- 没有效果 --><my-component v-on

文章目录1. 基本示例2. 组件的复用2.1 data 必须是一个函数3. 组件的组织4. 通过 prop 向子组件传递数据5. 单个根元素6. 监听子组件事件6.1 使用事件抛出一个值6.2 在组件上使用 v-model7. 通过插槽分发内容8. 动态组件9. 解析 DOM 模板时的注意事项1. 基本示例这里有一个 Vue 组件的示例:// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function

文章目录1. 基础用法1.1 文本1.2 多行文本1.3 复选框1.4 单选按钮1.5 选择框2. 值绑定2.1 复选框2.2 单选按钮2.3 选择框的选项3. 修饰符3.1 lazy3.2 number3.3 trim4. 在组件上使用 v-model1. 基础用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本

文章目录1. 监听事件2. 事件处理方法3. 内联处理器中的方法4. 事件修饰符5.按键修饰符5.1 按键码6. 系统修饰符6.1 .exact 修饰符6.2 鼠标按钮修饰符7. 为什么在 HTML 中监听事件1. 监听事件可以用 v-on 指令监听 DOM 时间，并在触发时运行一些 JavaScript 代码。示例:<div id="example-1"> <button v-on:click="counter += 1">Add 1</button>

文章目录1. 用 v-for 把一个数组对应为一组元素2. 在 v-for 里使用对象3. 维护状态4. 数组更新检测4.1 变异方法(mutation method)4.2 替换数组4.3 注意事项5. 对象变更检测注意事项6. 显示过滤/排序后的结果7. 在 v-for 里使用值范围8. 在 template 上使用 v-for9. v-for 与 v-if 一同使用10. 在组件上使用 v-for1. 用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。

文章目录1. v-if1.1 在 template 元素上使用 v-if 条件渲染分组1.2 v-else1.3 v-else-if1.4 用 key 管理可复用的元素2. v-show3. v-if VS. v-show4. v-if 与 v-for一起使用1. v-ifv-if 指令用于条件性渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用 v-else 添

文章目录1. 绑定HTML1.1 对象语法1.2 数组语法1.3 用在组件上2. 绑定内联样式2.1 对象语法2.2 数组语法2.3 多重值操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们: 只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符型之外，还可以对对象或数组。1. 绑定HTML1.1 对象

文章目录1. 计算属性1.1 基础例子1.2 计算属性缓存vs方法1.3 计算属性vs侦听属性1.4 计算属性的 setter2. 侦听器1. 计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ example.split('').reverse().join('') }}</div>在这个地方，木那你们不再是简单的声明式逻辑。你必须看一段时间才能意识到

文章目录1. 插值1.1 文本1.2 原始 HTML1.3 特性1.4 使用JavaScript表达式2. 指令2.1 参数2.2 动态参数2.3 修饰符3. 缩写3.1 v-bind 缩写3.2 v-on 缩写Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智

文章目录1. 创建一个Vue实例2. 数据与方法3. 实例生命周期钩子4. 生命周期图示1. 创建一个Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue({ // 选项})虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也收到了它的启发。因此在文档汇总经常会使用 vm(ViewModel 的缩写)这个变量名表示 Vue 实例。当创建一个 Vue 实例，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建

文章目录1. Vue.js 是什么2. 起步3. 声明式渲染4. 条件与循环5. 处理用户输入6. 组件化应用构建7. 与自定义元素的关系1. Vue.js 是什么Vue 是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用，Vue 也完全能够为复杂的单页应用提供驱动。如果你已经是有经验的前端开发者，想知道 Vue 与其他库/框架