摘要: 一、概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。 而传统的多页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是 阅读全文
posted @ 2018-04-15 10:17 柴小智 阅读(2160) 评论(2) 推荐(1) 编辑
摘要: 一、递归组件 组件在它的模板内可以递归地调用自己, 只要给组件设置name 的选项就可以了。 示例如下: 渲染结果为: 设置name 后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误: max stack size exceeded 。 组件递归使用可 阅读全文
posted @ 2018-04-10 22:28 柴小智 阅读(4130) 评论(0) 推荐(1) 编辑
摘要: 一、什么是slot 在使用组件时,我们常常要像这样组合它们: 当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot , 这个过程叫作内容分发( transclusion )。 注意两点: 1.< app>组件不知道它的挂载点会有什么内容。挂载点的内容是由<app >的父组件决定的 阅读全文
posted @ 2018-04-09 08:17 柴小智 阅读(3476) 评论(1) 推荐(1) 编辑
摘要: 组件之间通信可以用下图表示: 组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 一、自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件。 子组件用$emit ()来触发事件,父组件用$on()来监昕子组件的事件。 父组件可以直接在子组件的自定义标签上使用v-on 来监昕子组件触发 阅读全文
posted @ 2018-04-08 22:30 柴小智 阅读(2689) 评论(0) 推荐(0) 编辑
摘要: 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息。看看它们是怎么工作的。 一、基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。 在组件中,使用选项props 来声明需要从父级 阅读全文
posted @ 2018-04-08 16:05 柴小智 阅读(3949) 评论(0) 推荐(0) 编辑
摘要: 一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 二、组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式。 2.1 全局注册后,任何V ue 实例都可以使用。如: 要在父实例中使用这个组件,必须要在实 阅读全文
posted @ 2018-04-08 12:04 柴小智 阅读(7586) 评论(0) 推荐(0) 编辑
摘要: 一、基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。 但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、s 阅读全文
posted @ 2018-04-08 11:06 柴小智 阅读(1004) 评论(0) 推荐(0) 编辑
摘要: 一、绑定class的几种方式 1.对象语法 直接看例子: 2.数组语法 直接看例子: 使用计算属性给元素动态设置类名,在业务中经常用到,尤其是在写复用的组件时,所以在开发过程中,如果表达式较长或逻辑复杂,应该尽可能地优先使用计算属性。 3.在组件上使用 直接看例子: 这种用法仅适用于自定义组件的最外 阅读全文
posted @ 2018-04-03 20:49 柴小智 阅读(2257) 评论(0) 推荐(0) 编辑
摘要: 指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 内置指令 1、v-bind:响应并更新DOM特性;例如:v-bind:href v-bind:class v-bind:title 等等 主要用法是绑定属性,动态更 阅读全文
posted @ 2018-04-02 22:14 柴小智 阅读(1775) 评论(0) 推荐(0) 编辑
摘要: 一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。 二、计算属性的用法 在一个计算属性里可以完成各种复 阅读全文
posted @ 2018-04-02 07:37 柴小智 阅读(82830) 评论(1) 推荐(12) 编辑