Vue 学习笔记：
一、搭建Vue的开发环境
1、必需要安装node.js
2、搭建Vue的开发环境，安装Vue的脚手架工具 官方命令行工具
全局安装Vue-cli
npm install --global vue-cli
或者安装taobao的Veu-cli镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -global vue-cli
3、创建项目
创建一个基于webpack 模板的新项目myproject
vue init webpack myproject
安装依赖：
先进入到项目的目录
cd myproject
再安装依赖
npm install /cnpm install 如果创建项目时没有报错，则此步骤可以省略
再运行项目
npm run dev
4、另一种创建项目的方式 (推荐)
创建一个基于webpack 模板的新项目myproject-simple
vue init webpack-simple myproject-simple
安装依赖：
先进入到项目的目录
cd myproject-simple
再安装依赖
npm install /cnpm install 如果创建项目时没有报错，则此步骤可以省略
再运行项目
npm run dev
npm install --save -d
安装node-sass模块即可解决
npm install node-sass --save-dev
安装sass-loader模块即可解决
npm install sass-loader --save-dev
安装vue-loader模块即可解决
npm install vue-loader --save-dev
css-loader 和 style-loader
使用 cnpm 安装全局的 webpack：
cnpm install webpack -g
webpack index.js myScript.js -p 表示将打包后的文件进行压缩
webpack index.js myScript.js -w 提供watch方法；实时进行打包更新，即保存后，再刷新页面即可可以看到代码生效了，无需重新运行webpack
webpack入门安装（Windows系统）：
1、安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、全局安装： cnpm install -g webpack （使用npm安装webpack，并安装到全局：npm install webpack -g）
3、基本设置 ：
首先，让我们创建一个目录，初始化npm，并在本地安装webpack:
mkdir webpack-demo && cd webpack-demo
cnpm init -y （生成package.json文件：）
cnpm install --save-dev webpack （为项目添加webpack依赖）
二、关键词
组件：template
所有组件必需被根文件包含
引入组件： import Header from './Header.vue';
注入组件： conponents:{ 'v-header':Header }
vue-resource 官方请求插件
axios
fetch-jsonp
三、vue数据请求数据的步骤
1） 需要安装 vue-resource 注意加上--save ，加--save会在package.json中，增加依赖的脚本
npm install vue-resource --save / cnpm install vue-resource --save
2) main.js 中引入 vue-resource
import VueResource from 'vue-resource';
3) main.js 中使用 Vue.use(VueResource)
4）在组件里面直接使用
this.$http.get.then
url=
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
四、父子组件传值
1）父组件调用子组件的时候，绑定动态属性
2) 在子组件里面通过 props 接收父组件传过来的数据(可以是数据，方法，整个父组件)
props:['title']
props:{
'title':String
}
3)直接在子组件里面使用 父组件的方法、变量
五、父组件主动获取子组件的数据与方法
1）调用子组件的时候定义一个ref
2）在父组件里面通过
this.$refs.header.属性
this.$refs.header.方法
六、子组件主动获取父组件的数据与方法
this.$parent.数据
this.$parent.方法
七、vue路由配置：
https://router.vuejs.org/
1.安装
npm install vue-router --save / cnpm install vue-router --save
2、引入并 Vue.use(VueRouter) (main.js)
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3、配置路由
1、创建组件 引入组件
2、定义路由 （建议复制s）
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]
3、实例化VueRouter
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
4、挂载
new Vue({
el: '#app',
router，
render: h => h(App)
})
5 、根组件的模板里面放上这句话
6、路由跳转
