什么是vue
vue是一个前端框架，主要两个特点：数据绑定、组件化。
安装环境
根据教程安装环境：node.js、npm、webpack、vue-cli
主要的命令行：# 保证已安装node.js环境 全局安装 vue-cli（vue的脚手架）$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev
相关的几个命令行：
# node版本$ node -v# 清缓存$ npm cache clean -f# 全局安装镜像$ npm install -g nrm# 可用的镜像资源$ nrm ls# 选用taobao的镜像（安装镜像之后，npm可以输入cnpm代替）$ nrm use taobao# 安装vue路由模块和网络请求模块$ cnpm install vue-router vue-resource --save# 工程打包$ npm run build
编辑器插件
sublime text 中安装Vue Syntax Highlight插件
使用官网文档学习
一些小总结：
template 写 html，script写 js，style写样式
一个template下只能有一个并列的 div
数据要写在return 里面,如:
{ {msg}}
组件
组件是什么？
组件可以扩展html元素，封装可以重用的代码。Vue.js的编译器为它添加特殊功能。使用组件
注册全局组件，使用：Vue.component(tagName,options)：
//注册，对于自定义标签名称，不强制要求遵循W3C规则（小写，并且包含一个短杠），不过还是尽量遵循的比较好 Vue.component('my-component',{ template:' A example component! ' }) //使用 注册局部组件，通过组件实例选项注册，可以使组件尽在另一个实例/组件的作用域中可用：
var Child= { template:' A example component! '}new Vue({ //... components:{ // 将只在父模板可用 'my-component':Child }}) 这种封装也适用于其他可注册的Vue功能，如指令。
父子组件通信
父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。
props
组件实例的作用域是孤立的。子组件的模板内不应该直接引用父组件的数据，可以使用props把数据传给子组件。
props是父组件用来传递数据的一个自定义的属性。子组件需要显式的用props选项声明的“prop”
Vue.component("child",{ //声明props props:['myMessage'],//使用非字符串模板时，prop的名字形式会从camelCase转为kebab-case template:'hello,{ {message}}!'})//使用 动态的props
可以用v-bind动态绑定props的值到父组件的数据中，当父组件的数据有变化时，子组件会随之变化。
//:my-message 是 v-bind:my-message的缩写
prop验证
组件可以为props指定验证要求。prop是一个对象而不是字符串数组时，它包含验证要求。
自定义事件
子组件传递数据给父组件，需要用到自定义事件：
使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue.component('button-counter',{ template:'', data:function () { return { counter:0 } }, methods:{ increment: function(){ this.counter +=1 this.$emit('incrment') } }})new Vue({ el:'#counter-event-example', data:{ total:0 }, methods:{ incrementTotal:function(){ this.total +=1 } }}){
{ total }}
非父子组件通信
简单场景下，使用一个用的Vue实例作为中央事件的总线。
var bus = new Vue()//触发组件A中的事件bus.$emit('id-selected',1)//在组件B创建的钩子中监听事件bus.$on('id-selected',function(id){ //...}) 复杂情况下，应该考虑专门的状态管理模式。
编写可复用的组件
可复用的组件应当定义一个清晰的公开接口，Vue组件的接口，来自三部分——props、events、slots：
props允许外部环境传递数据给组件。events允许组件触发外部环境的副作用。slots允许外部环境将额外的内容组合在组件中。路由
大多数的单页面应用，都推荐使用vue-router库
简单的路由不需要引入整个路由库。如：const NotFound = { template: 'Page not found
' }const Home = { template: 'home page
' }const About = { template: 'about page
' }const routes = { '/': Home, '/about': About}new Vue({ el: '#app', data: { currentRoute: window.location.pathname }, computed: { ViewComponent () { return routes[this.currentRoute] || NotFound } }, render (h) { return h(this.ViewComponent) }}) 将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h
失去作用， 在应用中会触发报错。
状态管理
由于多个状态分散的跨越在许多组件和交互间，大型应用的复杂度也随之增长。采用简单的store模式：
var store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) {//变更记录 this.debug && console.log('setMessageAction triggered with', newValue) this.state.message = newValue }, clearMessageAction () { this.debug && console.log('clearMessageAction triggered') this.state.message = 'clearMessageAction triggered' }}//实例/组件仍然可以拥有和管理自己的私有状态var vmA = new Vue({ data: { privateState: {}, sharedState: store.state }})var vmB = new Vue({ data: { privateState: {}, sharedState: store.state } 组件不允许直接修改属于 store 实例的 state，而应执行 action 来分发 (dispatch) 事件通知 store 去改变，我们最终达成了 Flux 架构。这样约定的好处是，我们能够记录所有 store 中发生的 state 改变，同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。Vue提供了vuex，可以通过文档学习。
服务端渲染SSR
先看看我们什么时候需要它：
SEO 搜索引擎优化
客户端网络慢
客户端运行在老的或者没有javascript引擎上，Vue只能运行在IE9+
服务端渲染来改善一个少数的营销页面等的SEO,可以用预渲染替换。可以用prerender-spa-plugin插件来添加预渲染。