vue-is

vue模板解析说明

by li gang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
    <table>
      <!-- 可以正常渲染到table中 -->
      <tr is="my-row"></tr>

      <!-- 不能正常的渲染到table中 -->
      <my-row message="no is"></my-row>

      <!-- XTemplate -->
      <hello-world></hello-world>

      <my-row inline-template>
        <a>内联模板</a>
      </my-row>
    </table>
  </div>

  <!-- x-template -->
  <script type="text/x-template" id="hello-world-template">
    <tr>Hello hello hello</tr>
  </script>
</body>

CSS

table {
  border: 1px solid red;
}

JavaScript

// 全局组件
Vue.component('hello-world', {
  template: '#hello-world-template'
})

const app = new Vue({
  el: '#app',
  components: {
    'my-row': {
      props: {
        message: {
          type: String,
          default: 'DOM模板解析'
        }
      },
      template: '<tr>{{message}}</tr>'
    }
  }
});