时间戳

首页 > 解决方案 > 我的代码什么也没做。可能是什么原因？

javascript - 我的代码什么也没做。可能是什么原因？

问题描述

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>

标签： javascripthtmlvue.jsvue-component

解决方案

  1. 您应该创建一个 Vue 实例并将其绑定到一个元素
  2. 如果字符串按字面意思传递给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>

推荐阅读