master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
47-定义组件5.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的定义使用</title>
  </head>
  <body>
    <template id="temp">
      <div>
        <ul>
          <li>列表一</li>
          <li>列表二</li>
          <li>列表三</li>
          <li>列表四</li>
          <li>列表五</li>
        </ul>
      </div>
    </template>
    <template id="myForm">
      <form action="">
        <input type="text" />
        <input type="button" value="按钮" />
      </form>
    </template>
    <div id="app">
      <div>
        <my-div></my-div>
        <xxx></xxx>
      </div>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    // 注册组件
    Vue.component("myDiv", {
      template: "#temp"
    })

    Vue.component("xxx", {
      template: "#myForm"
    })
    var app = new Vue({
      el: "#app",
      data: {}
    })
  </script>
  <!-- <h5>自定义的标签就是组件,每个标签代表一个组件</h5> -->
  <!-- 注意
    1、任何使用Vue的地方都可以使用组件
    2、组件需要注册后才能使用。注册有全局注册和局部 注册两种方式。
--></html>