LuckFairyLuckBaby的博客

报错原因： 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。修改前<template> <div> <home-header></home-header> <home-content :heros="heros"></home-content> <...

<template> <div class="page"> <ul> <li v-for="(item,index) in lesson"> {{index}} - {{item.name}} - {{item.type}} </li> </ul> </...

<template> <div class="page"> <ul> <li v-for="(value,key,index) in person"> {{index}} - {{key}} - {{value}} </li> </ul> </div&gt...

自定义事件这篇学的迷迷糊糊的，看来还是要靠实践才能真正掌握了事件名不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的：<!-- 没有效果 -...

Prop清风 暖阳 小路 单车Prop 的大小写 (camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog...

摘要全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。Vue.component('my-component-name', { /* ... */ }) 使用 kebab-caseVue.component('MyComponentName', { /* ... */ }) 使用 Pasca...

组件基础基本示例这里有一个 Vue 组件的示例：// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++"...

表单输入绑定基础用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 v...

事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked ...

列表渲染用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。<ul id="example-1"> <li v-for="item in items"> {{ i...

条件渲染v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。<h1 v-if="awesome">Vue is awesome!</h1>也可以用 v-else 添加一个“else 块”：<h1 v-if="awesome">Vue is awesome!</h1>&...

Class 与 Style 绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。绑定 HTML Class...

计算属性和侦听器计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示...

模板语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。插值文本...

创建一个 Vue 实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项})虽然没有完全遵循 MVVM 模型数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。// 我们...

1.什么是vueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。1.1:声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：<div id="app"&g...