在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue注冊組件沒效果

vue注冊組件沒效果

<head>
  <meta charset="utf-8">
  <title>Vue-component</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
  <script>
    // 定義名為 todo-item 的新組件
    Vue.component('todo-item', {
      template: '<li>這是個待辦項</li>'
    })
  </script>
</head>

<body>
  <ol>
    <!-- 創(chuàng)建一個 todo-item 組件的實例 -->
    <todo-item></todo-item>
    <todo-item></todo-item>
    <todo-item></todo-item>
  </ol>
</body>

我打開頁面為什么仍然是這樣顯示的

<ol>
    <todo-item></todo-item>
    <todo-item></todo-item>
    <todo-item></todo-item>
<ol>

而不是

<ol>
    <li>這是個待辦項</li>
    <li>這是個待辦項</li>
    <li>這是個待辦項</li>
<ol>
回答
編輯回答
疚幼

沒有實例化Vue，直接復(fù)制粘貼執(zhí)行便可看到效果，希望能幫助到你：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>tab</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <ol>
            <!-- 創(chuàng)建一個 todo-item 組件的實例 -->
            <todo-item></todo-item>
            <todo-item></todo-item>
            <todo-item></todo-item>
        </ol>
    </div>
    <script>
        Vue.component('todo-item', {
            template: '<li>這是個待辦項</li>'
        })
        new Vue({
            el: "#app"
        });       
    </script>
</body>
</html>
2017年10月19日 02:36