Javascript 模板后的Vuejs CLI白色页面错误

我把这个代码，但我的网页是白色的那一刻，我想看看我的网站

我不明白，因为如果我删除所有这些代码并保留导航组件，我可以看到导航栏

为什么我的Javascript代码不能工作

Ps：我尝试了其他Javascript代码，结果是一样的，就在我的代码之前，我出现了模板错误（这是因为我在模板代码的顶部和底部添加了div）

搜索标题：
//@是/src的别名
从“@/components/navigation”导入导航；
从“Vue”导入Vue；
导出默认值{
组成部分：{
航行
}
};
班岗{
构造函数（标题、链接、作者、img）{
this.title=标题；
this.link=link；
this.author=作者；
this.img=img；
}
}
新Vue({
el:“#应用程序”，
数据：{
搜索：“”，
帖子列表：[
新职位(
“Vue.js”，
'https://vuejs.org/', 
“克里斯”，
'https://vuejs.org//images/logo.png'
),
新职位(
'React.js'，
'https://facebook.github.io/react/', 
"提姆",，
'https://daynin.github.io/clojurescript-presentation/img/react-logo.png'
),
新职位(
'Angular.js'，
'https://angularjs.org/', 
“山姆”，
'https://angularjs.org/img/ng-logo.png'
),
新职位(
“Ember.js”，
'http://emberjs.com/', 
“瑞秋”，
'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
),
新职位(
'Meteor.js'，
'https://www.meteor.com/', 
“克里斯”，
'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
),
新职位(
“奥雷莉亚”，
'http://aurelia.io/', 
"提姆",，
'https://cdn.auth0.com/blog/aurelia-logo.png'
),
新职位(
'Node.js'，
'https://nodejs.org/en/', 
“A.A.罗恩”，
'https://code-maven.com/img/node.png'
),
新职位(
“推手”，
'https://pusher.com/', 
“亚历克斯”，
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
),
新职位(
'Feathers.js'，
'http://feathersjs.com/', 
“查克”，
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
),
]
},
计算：{
过滤器列表（）{
返回此.postList.filter（post=>{
return post.title.toLowerCase（）.includes（this.search.toLowerCase（））
})
}
}
})

{{size}}

我想这类代码就是我问题的答案！我试过了，我的网站不仅仅是白色的；）

谢谢你的帮助

{{size}}

我想这类代码就是我问题的答案！我试过了，我的网站不仅仅是白色的；）

---

谢谢你的帮助

Vue中没有

v:bind

（它是

v-bind

）。你是说？另外，如果您的页面是白色的，那么浏览器的开发者控制台（Chrome中的F12）中应该会有有用的错误消息！我换成v-bind谢谢！如果我使用v-for，我有1个错误代码。我的网站页面保持白色，我的控制台上没有错误消息。对我来说，使用

v-for

似乎可以正常工作：Vue中没有

v:bind

（它是

v-bind

）。你是说？另外，如果您的页面是白色的，那么浏览器的开发者控制台（Chrome中的F12）中应该会有有用的错误消息！我换成v-bind谢谢！如果我使用v-for，我有1个错误代码。我的网站页面保持白色，并且我的控制台上没有错误消息。对于我来说，

v-for似乎可以正常工作：
<template>
<div>
  <navigation />

<div id="app">
  <div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search title.."/>
        <label>Search title:</label>
  </div>
  <div class="wrapper">
    <div class="card" v:bind="post in filteredList">
      <a v-bind:href="post.link" target="_blank">
        <img v-bind:src="post.img"/>
       <small>posted by: {{ post.author }}</small>
        {{ post.title }}
      </a>
    </div>
  </div>
</div>
</div>

</template>

<script>
// @ is an alias to /src
import navigation from "@/components/navigation";
import Vue from "vue";

export default {
  components: {
    navigation
  }
};

class Post {
  constructor(title, link, author, img) {
    this.title = title;
    this.link = link;
    this.author = author;
    this.img = img;
  }
}

new Vue ({
  el: '#app',
  data: {
    search: '',
    postList : [
      new Post(
        'Vue.js', 
        'https://vuejs.org/', 
        'Chris', 
        'https://vuejs.org//images/logo.png'
      ),
      new Post(
        'React.js', 
        'https://facebook.github.io/react/', 
        'Tim',
        'https://daynin.github.io/clojurescript-presentation/img/react-logo.png'
      ),
      new Post(
        'Angular.js', 
        'https://angularjs.org/', 
        'Sam', 
        'https://angularjs.org/img/ng-logo.png'
      ),
      new Post(
        'Ember.js', 
        'http://emberjs.com/', 
        'Rachel',
        'http://www.gravatar.com/avatar/0cf15665a9146ba852bf042b0652780a?s=200'
      ),
      new Post(
        'Meteor.js', 
        'https://www.meteor.com/', 
        'Chris', 
        'http://hacktivist.in/introduction-to-nodejs-mongodb-meteor/img/meteor.png'
      ),
      new Post(
        'Aurelia', 
        'http://aurelia.io/', 
        'Tim',
        'https://cdn.auth0.com/blog/aurelia-logo.png'
      ),
      new Post(
        'Node.js', 
        'https://nodejs.org/en/', 
        'A. A. Ron',
        'https://code-maven.com/img/node.png'
      ),
      new Post(
        'Pusher', 
        'https://pusher.com/', 
        'Alex', 
        'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
      ),
      new Post(
        'Feathers.js', 
        'http://feathersjs.com/', 
        'Chuck',
        'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
      ),
]
  },
  computed: {
    filteredList() {
      return this.postList.filter(post => {
        return post.title.toLowerCase().includes(this.search.toLowerCase())
      })
    }
  }
})


</script>