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

【问题标题】：My code doesn't do anything. What could be the reason?我的代码什么也没做。可能是什么原因？
【发布时间】：2019-12-01 21:34:04
【问题描述】：

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>

【问题讨论】：

脚本加载的URL中间插入了`enter code here`子字符串。

标签： javascript html vue.js vue-component

【解决方案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>

【讨论】：