npm install --save-dev babel-cli

npm install --save-dev babel-preset-es2015 babel-preset-stage-0

var NewClass = React.createClass({

  getDefaultProps: function(){
    return: {
      prop1: "a",
      prop2: "b"
    }
  },
  getInitialState: function(){
    return {
      data: {}
    }
  },
  render: function(){

  },
  componentDidMount: function(){
    return (
      <div className="newClass">
        hello {this.props.name}!
      </div>
    )
  }
})

ReactDOM.render(
  <NewClass name="galen" />,
  document.getElementById("example")
)

React.PropType.Array.isRequired

propTypes: {
    name: React.PropTypes.Array.isRequired
}

React.findDOMNode(this.refs.xxx)
this.refs.xxx.getDOMNode()

mixin: [Reat.addons.LinkStateMixin]

valueLink={this.linkState("xxxx")}
checkedLink={this.linkState("xxxx")}

getDefaultProps: function(){
    return {

    }
},
getInitialState: function(){
    return {

    }
},
componentWillMount: function(){

},
componentDidMount: function(){

},
shouldComponentUpdate: function(nextProp, nextState){

},
componentWillUpdate: function(){

},
componentDidUpdate: function(){

},
componentWillReceiceProps: function(){

}


unmountComponentAtNode(this)

export var firstName = "Galen";
export var lastName = "Jiang";
export var year = "1985";

var firstName = "Galen";
var lastName = "Jiang";
var year = "1985";
export {firstName, lastName, year};

export {
  firstName as fN,
  lastName as lN,
  year as y
}

import { firstName, lastName, year } from './app'

console.log(firstName)

import { firstName as fN } from './app'

import * as person from './app';
console.log(person.firstName);
console.log(person.lastName);

export default function(){
console.log("foo")
}
或者
export default function foo(){
console.log("foo")
}
或者
function foo() {
  console.log("foo");
}
export default foo;

import foo from './app';
foo()

npm install -g gulp  //全局安装

npm install —-save-dev gulp  //本地安装

gulp  --save-dev //--save保存至package.json -dev 部署到开发环境，不加入生产环境

npm install gulp-uglify   //本地安装uglify

cmd
gulp //回车执行。

npm install gulp-ruby-sass

 v-bind:href 缩写
：href
v-on:click 缩写
@click

class指令
v-bind:class=""
对象语法
v-bind:class="json"
json = {'classA': true, 'classB':false }
v-bind:class="{ 'classA': isA, 'classB':isB  }"
data: {
isA: true,
isB: false
}
数组语法
v-bind:class="[ classA, classB ]"
data: {
classA: 'class-a',
classB: 'class-b'
}
v-bind:class="[classA, isB ? classB : '']"
isB: true

v-bind:style=""
对象语法
<divv-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
数组语法
<divv-bind:style="[styleObjectA, styleObjectB]">

组件
var mytemplate = Vue.extend({
  template: "<div class='div'></div>"
})
Vue.component("my-component", mytemplate);


父子组件

标准写法

var child = Vue.extend({
  template: "<div class='child'></div>"
})
var parent = Vue.extend({
  template: "<div class='parent'><child></child></div>",
  components: {
    "child": child
  }
})
Vue.component("parent", parent);

简单写法
Vue.component("parent", {
  template: "<div class='parent'><child></child></div>",
  components: {
    "child": {
      template: "<div class='child'></div>"
    }
  }
});

子组件用父组件的数据

var child = Vue.extend({
  props: ['a'],
  template: "<div class='child'>{{ a }}</div>",
  data: function(){
    return
    // {
    //   a: "child's data"
    // }
  }
})
var parent = Vue.extend({
  template: "<div class='parent'><child v-bind:a='a' ></child></div>",
  components: {
    "child": child
  },
  data: function(){
    return {
      a: "parent's data"
    }
  }
})

模板

      <!--  父组件-->
  <script type="x-template" id="parent">
    <div class='parent'>
      <child></child>
      <child></child>
    </div>
  </script>
  <!--  子组件-->
  <script type="x-template" id="child">
    <div class='child'>{{ a }}</div>
  </script>
定义
var child = Vue.extend({
  template: "#child",
  data: function(){
    return {
      a: "child's data"
    }
  }
})
var parent = Vue.extend({
  template: "#parent",
  components: {
    "child": child
  },
  data: function(){
    return {
      a: "parent's data"
    }
  }
})
// Vue.component("child", child)
Vue.component("parent", parent);

props 数据往子组件传递

props 为对象时，作为组件验证

$.on()  监听自定义事件
$.emit()触发，$.dispath() 向上冒泡  $.broadcast() 向下传递

过滤器  2.0废弃

{{ msg | filter }}
第一个字大写
capitalize
全部大写
uppercase
全部小写
lowercase
货币化
currency “￥”默认 $
复数
pluralize "item"
pluralize "st" "nd" "rd" "th"  再往后以最后面一个为准
源代码
json 4  缩进为4 default：2
延迟执行
debounce 500   default:300
@keyup="onKeyup | debounce 500"
限制循环
limitBy n m
n:限制几位 m:限制从m位开始，0为第一位
过滤
<input v-model="index" type="text" name="name" >
        <ul>
          <li v-for="item in msg | filterBy index in 'name' ">{{ item.name }} {{ item.age }} {{ item.sex }}</li>
        </ul>

多字段搜索
<liv-for="user in users | filterBy searchText in 'name' 'phone'"></li>

插值表达式
{{}}
{{*value}}只更新一次

增加v-cloak属性，防止闪烁
[v-cloak]{ display: none }
数据遍历之前 用v-show  防止显示不正常数据

v-for 在tr里面不正常



组件：

1. 一般定义
<div id="example">
<my-component></my-component>
</div>

// 定义
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
  el: '#example'
})
2.局部注册
var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
  template: '...',
  components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
  }
})
3. 简化注册 注册语法糖
// 在一个步骤中扩展与注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
  components: {
'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

利用模板穿的属性来构造模板
Vue.component('child', {
// 声明 props
  props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
  template: '<span>{{ msg }}</span>'
})
props 驼峰写法如：myMsg  在模板外属性应该写成 my-msg

v-bind:my-msg="abc"  可以简写为：my-msg="abc
:my-msg="1" 数字1作为一个属性来传递的，用：my-msg

冒泡事件“child-msg” 父组件接受事件function(msg){}对参数进行处理

this.$dispatch('child-msg', this.msg)
获取子组件的方式:     在自组件上定义 v-ref属性    用$refs属性获取自组建
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

第一个程序
<divid="app">
  {{ message }}
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
双向绑定 v-model
<divid="app">
<p>{{ message }}</p>
<inputv-model="message">
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

todo

<divid="app">
<ul>
<liv-for="todo in todos">
      {{ todo.text }}
</li>
</ul>
</div>
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
综合案例
<div id="app">
      <input v-model="newtodo" v-on:keyup.enter="addtodo" type="text" name=""  >
      <ol>
        <li v-for="todo in todos">
          {{todo.text}}
          <button v-on:click="removetodo($index)" type="button" name="button">X</button>
        </li>
      </ol>
    </div>
    <script type="text/javascript">
      new Vue({
        el: "#app",
        data: {
          newtodo: "",
          todos: [
          ]
        },
        methods: {
          addtodo: function(){
            var text = this.newtodo.trim();
            if(text){
            this.todos.push({text: text});
            this.newtodo = "";
            }
          },
          removetodo: function(index){
            this.todos.splice(index,1);
          }
        }
      })
    </script>


插值表达式 {{}}  {{* msg }}单次不更新

指令 v-*

循环
v-for="item in items"
<div>{{ $index($key) }}: {{ item }}</div>

<div>
<spanv-for="n in 10">{{ n }} </span>
</div>

methods

计算属性
computed

v-model
双向绑定

Object.getOwnPropertyDescriptor(obj, propName)

Object.getPrototypeOf(obj)

obj.hasOwnProperty("string")

for (var x in obj)
Object.keys(obj)

Object.getOwnPropertyNames()

Object.defineProperty(obj, propName, desc)

```javascript
stream-combiner2

var combined = combiner.obj([
            gulp.src(paths.srcPath),
            uglify(),
            gulp.dest(paths.distDir)
        ])
combined.on('error', handleError)
// 代替
gulp.src(paths.srcPath)
.pipe(uglify())
.pipe(gulp.dest(paths.distDir))