vue基础（续）

学无止境，望君把握时间！

1.动态组件：

动态组件就是 component组件   ， 组件身上可以绑定一个is属性， 用来表示某一个组件
1.is属性：
---我们html中有一些标签是规定它的直接子元素的 ， 比如 ul li ol li selector option 
table这类型标签
---不能直接用常规的组件使用方式， 必须在对应直接子元素上绑定 is属性
2.keep-alive组件
将组件的内容存在浏览器缓存中， 当我们需要重复渲染的时候， 就从浏览器缓存中去调用，
这样可以减少性能消耗
```javascript
上面的问题可以用这种方法来解决。
<div id="app">
      <table>
        <tr>
          <td>aa</td>
          <td>bb</td>
          <td>cc</td>
        </tr>
        <!-- is = 组件名称 -->
        <tr is = 'my-table'></tr>
      </table>
</div>

```javascript
举例：
<div id="app">
   <keep-alive>
      <component is = "B"></component>
   </keep-alive>
</div>
<script>
  new Vue({
     el : '#app',
     components : {
       'A' : {
          template : '<div>A</div>'
       },
       'B' : {
          template : '<div>B</div>'
       }
     }
  })
</script>

深入一点：
<div id = "app">
   <button @click = "type === type ? B: A"></button>
   <component is = "type"></component>
</div>
<script>
  new Vue ({
    el : '#app',
    data : {
      type : 'A'
    },
    components : {
      'A' : {
         template : '<div> A </div>'
      },
      'B' : {
         template : '<div> B </div>'
      }
    }
  })
</script>

2.不常用指令：

 - 1.v-text vs v-html
 - -都是用来将数据插入到DOM中，但是v-html可以解析标签类型数据
 - 2.v-cloak  解决 {{}} 语法短暂原样输出
 - 3.v-pre  原样输出
 - 4.v-once 只渲染一次

异步组件：

核心：异步组件也是一个函数， 只不过这个函数使用Promise,函数有一个返回值

<div id = "app">
    <async-com></async-com>
</div>
<script>
  var result = new Promise((resolve, reject) =>{
      resolve ({
         template : '<div>异步组件</div>'
      })
  })
  Vue.component('AsyncCom', async ()=>{
     var tep = await result.then(res => res);
     return tep
  })
  new Vue({
     el : '#app'
  })
</script>