vue.js 待学习

• watcher
• key 与 v-for
• v-on:click.native="" 绑定原生事件？
• 过滤器
• 数据更新检测
• $event
• 事件修饰符： .stop/.prevent/.capture/.self
• 按键修饰符（别名）
• v-model 具体原理
  与v-bind动态绑定结合
  修饰符.lazy/.number/.trim

组件

• 全局注册

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

• 局部注册

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
   // <my-component> 将只在父模板可用
   'my-component': Child
 }
})

• is属性的使用
  <ul> ，<ol>，<table> ，<select>限制了能被它包裹的元素

<table>
  <tr is="my-row"></tr>
</table>

• 组件中，data必须为函数

data: function () {
  return {
    counter: 0
  }
}

• 组件间传值

1. props父传子
   子组件需要显式地用 props 选项 声明 “prop”：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

传入值为：

• 普通字符串<child message="hello!"></child>
  （使用非字符串模版时的命名格式转换）
• 动态表达式

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

• props验证
  当 prop 验证失败了， Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

2. 自定义事件子传父
3. 非父子组建通信