关键词：
在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整理成以下样子：
1 <template> 2 <div id="app"> 3 这是一个空的app 4 </div> 5 </template> 6 7 <script> 8 export default { 9 name : 'app' 10 } 11 </script> 12 13 <style> 14 15 </style>
把router下面index.js文件修改如下：
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router) 5 6 export default new Router({ 7 routes: [ 8 { 9 path: '/', 10 } 11 ] 12 })
1、在components目录下创建一个子组件Child.vue
代码如下：
1 <template> 2 <div> 3 <h3>这是子组件</h3> 4 <p>{{content}}</p> 5 </div> 6 </template> 7 <script> 8 export default { 9 props : ['content'] 10 } 11 </script>
2、把App.vue的代码修改如下：
1 <template> 2 <div id="app"> 3 <child :content="msg"></child> 4 </div> 5 </template> 6 7 <script> 8 import child from './components/Child.vue'; 9 export default { 10 name : 'app', 11 data(){ 12 return { 13 'msg' : '这是来自父组件的问候' 14 } 15 }, 16 components : { 17 child 18 } 19 } 20 </script>
这样就完成了父组件通过props属性向子组件传递数据
也可以用v-bind绑定属性
<template>
<div id="app">
<child :content="msg"></child>
<child v-bind:content="msg"></child>
</div>
</template>
小结：
- 子组件在props中创建一个属性，用以接收父组件传过来的值
- 父组件中调用子组件
- 在子组件标签中绑定子组件props中创建的属性
- 把需要传给子组件的值赋给该属性，如我们上文中父组件的msg
二、子组件向父组件传递数据
1，把Child.vue修改如下：
1 <template> 2 <div> 3 <h3>这是子组件</h3> 4 <p>{{content}}</p> 5 <p> 6 <input type="button" value="告诉父王一个消息" v-on:click="send"> 7 </p> 8 </div> 9 </template> 10 <script> 11 export default { 12 props : ['content'], 13 methods : { 14 send(){ 15 this.$emit( 'ParentRecEv', "父王,孩儿正在跟ghostwu学习vue2.0" ) 16 } 17 } 18 } 19 </script>
子组件通过$emit发送一个自定义的事件ParentRecEv， 后面参数是内容
2，App.vue修改如下
1 <template> 2 <div id="app"> 3 <child :content="msg"></child> 4 <child v-bind:content="msg" v-on:ParentRecEv="showMsg"></child> 5 <p>{{data}}</p> 6 </div> 7 </template> 8 9 <script> 10 import child from './components/Child.vue'; 11 export default { 12 name : 'app', 13 data(){ 14 return { 15 'msg' : '这是来自父组件的问候', 16 data : '' 17 } 18 }, 19 methods : { 20 showMsg( msg ){ 21 this.data = msg; 22 } 23 }, 24 components : { 25 child 26 } 27 } 28 </script>
在第二个子组件监听事件ParentRecEv，当子组件点击按钮就会触发这个自定义事件，然后触发showMsg函数，就能收到子组件传递的数据，没有绑定自定义事件是不能收到子组件发送的信息的.
小结：
- 子组件中通过$emit触发一个自定义事件
- 将需要传的值作为$emit的第二个参数，该值会被父组件的方法接收到
- 在父组件中调用子组件并在子组件标签上绑定发送的自定义事件
他们的共同点就是有桥梁，子向父的桥梁是自定义事件$emit，父向子的桥梁是props中的属性. 这就是他们之间传递数据的关键
vue.js系列之项目搭建（vue2.0+vue-cli+webpack）
1、安装nodenode.js环境（npm包管理器） cnpmnpm的淘宝镜像从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具，输入node-v，如果出现相应的版本号，则说明安装... 查看详情
基于vue2.0的一个豆瓣电影app
1、搭建项目框架使用vue-cli没安装的需要先安装npmintall-gvue-cli使用vue-cli生成项目框架vueinitwebpack-simplevue-movie然后一路回车接着进入项目目录cdvue-movie然后安装项目依赖包cnpminstall没安装cnpm的先执行这个命令npminstall-gcnpm--registry=http... 查看详情
vue的爬坑之路之----基于vue-cli无限滚动插件无限加载(代码片段)
注：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本npminstallvue-infinite-loading--savees6模块导入方式importInfiniteLoadingfrom‘vue-infinite-loading‘;exportdefaultcompon 查看详情
vue2.0搭建vue脚手架（vue-cli）
一、安装node.js进入官网下载node.js二、安装cnpm1、说明：npm（nodepackagemanager）是nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；2、使用npm安装插件：命令提示符执行npminstall<name> 3、选装cnpm 因为... 查看详情
vue2.0新手入坑环境搭建
...不定期更新 专业团队接APP外包联系QQ1129580542 vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目，GitHub地址是：https://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境，可以直接到中文官... 查看详情
[js高手之路]node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引：[js高手之路]nodejs系列课程-创建简易web服务器与文件读写[js高手之路]nodejs系列课程-图解express+supervisor+ejs用法[js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息[js高手之路]Node.js模板引擎教程-jade速学... 查看详情
vue2.0+怎么写本地接口获取数据(代码片段)
在vue-cli脚手架项目中，找到build----webpack.dev.conf.js文件，具体位置如下图：找到文件后添加下面的内容，写在头部：//这是webpack.dev.conf.js文件里的‘usestrict‘/*新版的vue-cli代替原来的dev-server.js文件，现在在这里可以简单配置node... 查看详情
vue2.0搭建vue脚手架（vue-cli）
vue搭建https://www.cnblogs.com/zhaomeizi/p/8483597.html Vue2.0搭建Vue脚手架（vue-cli）https://segmentfault.com/a/1190000011275993 element-vuehttps://element.eleme.cn/#/zh-CN/component/container 查看详情
[js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录：[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)[js高手之路]深入浅出webpack教程系列3-配置文... 查看详情
[js高手之路]面向对象版本匀速运动框架
...教程]一步步开发一个可以定制配置的隔行变色小插件[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)[js高手之路]打造通用的匀速运动框架1<!DOCTYPEhtml>2<html>3<headlang="en">4<metacharset="UTF-8">5<title>通用的面向... 查看详情
vue2.0探索之路——vuex入门教程和思考
Vuex是什么首先对于 vuex 是什么，我先引用下官方的解释。Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。就我的... 查看详情
[js高手之路]寄生组合式继承的优势
在之前javascript面向对象系列的文章里面，我们已经探讨了组合继承和寄生继承，回顾下组合继承：1functionPerson(uName){2this.skills=[‘php‘,‘javascript‘];3this.userName=uName;4}5Person.prototype.showUserName=function(){6returnthis.userName;7}8func 查看详情
[js高手之路]javascript面向对象写法与应用
一、什么是对象？对象是n个属性和方法组成的集合，如js内置的document,Date,Regexp,Math等等document就是有很多的属性和方法,如：getElementById,getElementsByTagName等等这些就是document对象支持的方法，那么我们常见的onclick,onmouseover,onmouseout... 查看详情
[js高手之路]打造通用的匀速运动框架
本文，是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的，在这篇文章的最后，我们做了2个小实例：侧边栏与改变透明度的淡入淡出效果，本文我们把上文的animate函数，继续改造，让他变得更加的通用和强大... 查看详情
采用vue2.0开发的分页js组件
2017-11-1719:14:23基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js由于项目需求，要求使用Vue2.0开发一套有关分页的组件 这款pagination.js组件，可以按照各自需求定制，以下代码可以... 查看详情
[js高手之路]原型式继承与寄生式继承
一、原型式继承本质其实就是个浅拷贝，以一个对象为模板复制出新的对象1functionobject(o){2varG=function(){};3G.prototype=o;4returnnewG();5}6varobj={7name:‘ghostwu‘,8age:22,9show:function(){10returnthis.name+‘,‘+this.age;11}12};13varobj2= 查看详情
vue2.0配置https://github.com/wike933/vuebook
...般使用vue-cli全局安装vue-cli$npminstall--globalvue-cli创建一个基于webpack模板 查看详情
[js高手之路]html5canvas动画教程-实时获取鼠标的当前坐标
...，前面已经写了常用的canvas基础知识,参考链接如下：[js高手之路]html5canvas系列教程-认识canvas以及基本使用方法[js高手之路]html5canvas系列教程-掌握画直线图形的常用API[js高手之路]html5canvas系列教程-开始路径beginPath与关闭路径close... 查看详情