Vue2.0的字符串模板、html模板、组件、slot

字符串模板 VS html模板

首先，Vue 会将 template 中的内容插到 DOM 中，以方便解析标签。由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 时，插入 DOM 后会被转换为 。

然后，通过标签名寻找对应的自定义组件。匹配的优先顺序从高到低为：原标签名、camelCase化的标签名、PascalCase化的标签名。例如 会依次匹配 my-component、myComponent、MyComponent。

组件：

注意的地方：
1.全局注册 VS 局部注册

2.注意v-model:在给 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件。

3.注意：

这不过是以下示例的语法糖：

4.组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

5.Vue的组件里面也可以有data、template、methods、watch等属性，需要注意的是component中的data必须为一个函数参考Vue官网例子：

  
{{ total }}
  
  

Vue.component('button-counter', {
  template: '{{ counter }}',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

6.组件之双向绑定：.sync 修饰符

#相当于：

#当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)

Vue 组件的 API 来自三部分——prop、事件和插槽：

Prop 允许外部环境传递数据给组件；

事件允许从组件内触发外部环境的副作用；

插槽允许外部环境将额外的内容组合在组件中。
7.关于slot（插槽）：