插槽（Slot） 定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染。 在子组件中通过加入<slot>元素占位，便能够渲染父组件中子组件标签中的内容了。 插槽内容 任何模版代码HTML代码其他组件插槽可以有默认内容，当在父组件中没有提供内容的时候，来进行显示。 <!-- submit-button --> <button type="submit"><slot>Submit</slot> </button>1. <submit-butt...
平时在使用Vue框架的业务开发中，组件不仅仅要把模板的内容进行复用，更重要的是组件之间要进行通信。组件之间通信分为三种：父-子；子-父；跨级组件通信。下面，就组件间如何通信做一些总结。 1.父组件到子组件通过props通信 在组件中，使用选项props来声明需要从父级组件接受的数据，props的值可以是两种：一种是字符串数组，一种是对象。props中声明的数据与组件data函数return的主要区别在于props来自父级，而data中的组件是自...
什么是组件： 众所周知组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。下面话不多说了，来一起看看本文的正文内容。 引言 写了大大小小不少基于vue的项目，但是基本没用到过组件循环引用的知识。为了查缺补漏，照着官方文档撸一个DEMO：组件之间的循环引用 本人的运行版...
每个 Vue 实例都实现了事件接口(Events interface)，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on 和 $emit 不是addEventListener 和 dispatchEvent 的别名。 另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 下面是一个文档上面的例子： 2017年4月11日更新 <div id="counter-event-example"><p>{{ tota...
摘要: 指令是Vue.js中一个重要的特性， 主要提供了一种机制将数据的变化映射为DOM行为。 那什么交数据的变化映射为DOM行为， Vue.js是通过数据驱动的， 所以我们不会直接去修改DOM结构， 不会出现类似$(ul).append(<li>one</li>)这样的操作， 当数据变化时，指令会一句设定好的操作对DOM进行修改， 这样就可以只关注数据的变化， 而不用去管理DOM的变化和状态， Vue的内置指令 1. v-bind v-bind主要用于绑定DOM元素属性（attribut...
写在前面 因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。 文章的原地址： https://github.com/answershuto/learnVue 。 在学习过程中，为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ，希望可以对其他想学习Vue源码的小伙伴有所帮助。 可能会有理解存在偏差的地方，欢迎提issue指出，共同学习，共同进步。 什么是...
混合是什么混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。以组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。例如:var tpl1={template:#stpl1,data:function(){return {msg:false}},methods:{msgf:function(){this.msg=!this.msg}} } var tpl2={template:#stpl2,data:function(){return {msg:false}},methods:{show:function(){this.msg=true},hide:function(...
想必大家应该很多都已经习惯了jquery的DOM操作，jquery的瀑布流实现起来也很容易。 但是，随着时代的发展，随着时代的进步..... 算了算了，扯远了，既然能找到这儿来，肯定是在vue.js上已经有一定的基础了，咱们废话不多说，直接进入主题。 vue-waterfall-easy easy! easy! easy! 重要的事情说三遍！！！ 所以说，咱们今天用到的不是大家熟知的vue-waterfall，而是vue-waterfall-easy； 一、获取vue-waterfall-easy组件 这里有两种...
一、组件 组件，可以说是现代前端框架中必不可少的组成部分。使用组件，不仅能极大地提高代码的复用率和开发者的开发效率，对于代码后期的维护也有着非常重要的意义。前端开发，由于历史遗留原因，WebComponent 虽然好用，但其发展情况却受到极大地限制，和很多新兴的前端技术一样，可望而不可即。基于这样的情况，聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化，各种现代前端框架基本上都有各自的实现。这里我们来分...
前言 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。 组件 组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。 // 注册一个子组件 Vue.component(child, {data: function(){text...
本文实例为大家分享了vue插件tab选项卡的具体代码，供大家参考，具体内容如下 效果图：代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{padding: 0;margin: 0}#app{width: 500px;height: 300px;margin: 0 auto;background-color: #ddd;}.top{height: 50px;line-height: 50px;width: 100%;background-color: #999;}.top ul li{display: inline-block;ma...
.btn-demo {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;background-color: #19b586;text-decoration: none;border: none;border-radius: 4px;color: #fff !important;text-decoration: none !important;cursor: pointer;display: inline-block;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 18px;font-weight: 700;line-height: 1.5;text-align: center;text...
前言 公司目前制作一个H5活动，特别是有一定统一结构的活动，都要码一个重复的轮子。后来接到一个基于模板的活动设计系统的需求，便有了下面的内容。借油开车。 组件化 需求一到，接就是怎么实现，技术选型自然成为了第一个问题。鉴于目前web前端mvvm框架以及组件化开发方式的流行，决定技术栈采用：vue + es6 + 组件化。 这里首先简单说下web前端组件化开发方式的历程： 最早的组件化结构，代码结构可能如下： - lib/components/c...
小颖在上一篇随笔中写了两级的tree，下面给大家再分享一下用<ul><li>标签实现省市多级联动。 调用示例: <template> <div> <treeview :model=treedata></treeview> </div> </template><script> import treeview from ./TreeView.vue export default {components: {treeview},props: {},method:{},ready:function(){},data(){return {treedata:{text:地域,children: [{text: 中国,children: [{text: 陕西省,children: [{text: 西安市...
组件简介 组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树： 那么什么是组件呢？ 组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。 组件的创建和注册 基本步骤 Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件。 下面的代码演示了这3个步骤： <!DOCTYPE html> <html><...