【[js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程】的更多相关文章

[js高手之路]Vue2.0基于vue-cli+webpack Vuex用法详解

在这之前,我已经分享过组件与组件的通信机制以及父子组件之间的通信机制,而我们的vuex就是为了解决组件通信问题的 vuex是什么东东呢? 组件通信的本质其实就是在组件之间传递数据或组件的状态(这里将数据和状态统称为状态),但可以看到如果我们通过最基本的方式来进行通信,一旦需要管理的状态多了,代码就会变得十分臃肿和庞大.对所有状态的管理便会显得力不从心,因此,vuex出现了,他就是帮助我们把公用的状态全抽出来放在vuex的容器中,然后根据一定的规则来进行管理,我们赶紧来用一下吧,想要掌握vuex的…

[js高手之路]Vue2.0基于vue-cli+webpack同级组件之间的通信教程

我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandler.js代码: import Vue from 'Vue'; export default new Vue(); 2,在Components目录下新建一个组件Brother1.vue <template> <div> <h3>Z国: ghostwu</h3>…

[js高手之路]Vue2.0基于vue-cli+webpack父子组件通信教程

在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli  安装vue命令行工具 2,vue init webpack vue-demo   使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下…

[js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息

抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 第三方库:cheerio,这个库就是用来处理dom节点的,他的用法几乎跟jquery用法一模一样,所以有了这个利器,写一个爬虫就非常简单 准备工作: 1,npm init --yes 初始化package.json 2,安装cheerio:npm install cheerio --save-dev…

[js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息

抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取博客所有的文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 第三方库:cheerio,这个库就是用来处理dom节点的,他的用法几乎跟jquery用法一模一样,所以有了这个利器,写一个爬虫就非常简单 准备工作: 1,npm init --yes 初始化package.json 2,安装cheerio:npm install cheerio --sav…

Vue项目中同级组件传值的例子

大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大,如下图所示 因为vue项目是组件化的,那么就有组件之间传值的需求了,下面是具体的编码操作: 1. 首先在项目的src路径下创建一个js文件,这里命名为byval.js,在该文件中写入如下代码: /*jslint esversion:6 */ import Vue from 'vue'; export…

[js高手之路] vue系列教程 - 事件专题(4)

本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用的是v-on绑定 window.onload = function(){ var c = new Vue({ el : 'body', methods : { say : function(){ alert( '你好' ); } } }); } <input type="button"…

[js高手之路]Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件

接着这篇文章[js高手之路]Node.js+jade抓取博客所有文章生成静态html文件继续,在这篇文章中实现了采集与静态文件的生成,在实际的采集项目中, 应该是先入库再选择性的生成静态文件.那么我选择的数 据库是mongodb,为什么用这个数据库,因为这个数据库是基于集合,数据的操作基本是json,与dom模块cheerio具有非常大的亲和力,cheerio处理过滤出来的数据,可以直接插入mongodb,不需要经过任何的处理,非常的便捷,当然跟node.js的亲和力那就不用说了,更重要的是,性…

[js高手之路]html5 canvas动画教程 - 边界判断与反弹

备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的时候,保持位置不变,把速度变成相反的方向 <head> <meta charset='utf-8' /> <style> #canvas { border: 1px dashed #aaa; } </style> <script src="./b…

[js高手之路]设计模式系列课程-发布者,订阅者重构购物车

发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房源信息,根据手头上掌握的客户联系信息(买房的人的手机号),通知买房的人,他充当了发布者的角色 卖主想卖掉自己的房子,就需要告诉中介,把信息交给中介发布 二,网站订阅信息的用户 订阅者角色:需要订阅某类信息的网民,如某个网站的javascript类型文章 发布者角色:邮箱服务器,根据网站收集到的用户订…