Question

Vue组件未呈现且没有错误，但是它加载了vue CDN。没有什么可以代替组件的。

<!DOCTYPE html>
<head> 
  <title>Vue</title>
</head>
<body>  


      <blog-post :title="My journey with Vue"></blog-post>
      <blog-post v-bind:title="Blogging with Vue"></blog-post>
      <blog-post title="Why Vue is so fun"></blog-post>



  <script src="https://cdn.jsdelivr.net/npm/vue/dist/v`enter code here`ue.js"></script>
  <script>

    Vue.component('blog-post', {
      props: ['title'],
      template: '<div><h3>{{ title }}</h3></div>'
    })

  </script>
</body>
</html>

Answer 1

您应该创建一个Vue实例并将其绑定到元素
在将字符串按字面意义传递给title道具的情况下，请在绑定之前删除:。这样，Vue不会尝试将它们评估为表达式

<!DOCTYPE html>
<head> 
  <title>Vue</title>
</head>
<body>  

     <div id="app">
      <blog-post title="My journey with Vue"></blog-post>
      <blog-post title="Blogging with Vue"></blog-post>
      <blog-post title="Why Vue is so fun"></blog-post>
     </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <script>
    Vue.component('blog-post', {
      props: ['title'],
      template: '<div><h3>{{ title }}</h3></div>'
    });
    
    new Vue({
      el: '#app'
    });

  </script>
</body>
</html>

我的代码没有任何作用。原因可能是什么？

1 个答案: