如何轻松学会Vue基础语法

主要内容Vue组件自定义事件、插槽、动态组件和异步组件、边界处理情况、组件生命周期、过渡&动画、组件复用性、自定义指令、过滤器、渲染函数&JSX、Vue渐进式和Element UI组件库。

第一节 Vue组件基础 Vue组件自定义事件 不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件 this.$emit('myEvent') 不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。 因此，我们推荐你始终使用 kebab-case 的事件名 .sync 修饰符 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。 这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图： this.$emit('update:title', newTitle) 然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：插槽 插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。 它允许你像这样合成组件： Your Profile然后你在的模板中可能会写为：  当组件渲染的时候，将会被替换为“Your Profile”。插槽内可以包含任何模板代码，包括 HTML：     Your Profile甚至其它的组件：     Your Profile如果没有包含一个元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。 编译作用域 当你想在一个插槽中使用数据时，例如： Logged in as {{ user.name }}该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而不能访问的作用域。例如 url 是访问不到的：