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

字符串模板 VS html模板

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

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

<!-- 字符串模板、html模板作对比！！！！ -->

<!-- 使用字符串模板的情况 -->
<div id="app-a">
    <MyComponenta></MyComponenta>
</div>
<script>
    Vue.component('MyComponenta', {
        template: '<div>hello, world</div>'
    }),
    new Vue({
        el: '#app-a',
        template: '<MyComponenta></MyComponenta>'
    })
</script>

<!-- 使用html模板的情况不能大写 -->
<div id='app-b'>
    <my-componentb></my-componentb>
</div>
<script type="text/javascript">
    Vue.component('MyComponentb',{
        template:'<p>hello,world!</p>'
    }),
    new Vue({
        el:'#app-b',
    })
</script>

组件：

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

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

3.注意：

<input v-model="something">
这不过是以下示例的语法糖：

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value"

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

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

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  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 修饰符

<comp :foo.sync="bar"></comp>
#相当于：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
#当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit('update:foo', newValue)

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

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

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

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

<template>
 <div>
   <slot name="CPU">这儿插你的CPU</slot>
   <slot name="GPU">这儿插你的显卡</slot>
   <slot name="Memory">这儿插你的内存</slot>
   <slot name="Hard-drive">这儿插你的硬盘</slot>
 </div>
</template>

<template>
  <computer>
    <div slot="CPU">Intel Core i7</div>
    <div slot="GPU">GTX980Ti</div>
    <div slot="Memory">Kingston 32G</div>
    <div slot="Hard-drive">Samsung SSD 1T</divt>
  </computer>
</template>