vue博客页面

vue是一个非常普及的JavaScript框架，它非常适合用于创建现代化的的单页面应用程序。在这篇文章中，我们将介绍如何利用vue来创建一个简易的博客页面。

我们的博客页面将包括两个主要的模块：文章列表和文章详情。文章列表模块将在页面的左侧显示所有文章的预览图和标题。按下任何一篇文章将会在右侧显示文章详情，包括文章的标题、作者、内容和评论。

首先，我们需要创建一个vue实例对象，并将其绑定到一个html元素上。我们可以在实例对象中设定两个属性：一个用于保存文章列表，另一个用于保存当前选定的文章。

var app = new Vue({
el: '#app',
data: {
articles: [],
selectedArticle: null,
},
});

接下来，我们需要创建两个子模块：ArticleList和ArticleDetail。ArticleList将生成文章列表，而ArticleDetail将生成文章详情。我们可以在vue实例对象中定义这两个模块：

Vue.component('ArticleList', {
props: ['articles'],
template: `
文章列表
{ { article.title } }
`,
methods: {
select: function(article) {
this.$emit('article-selected', article);
},
},
});
Vue.component('ArticleDetail', {
props: ['article'],
template: `
{ { article.title } }
作者：{ { article.author } }
{ { article.content } }
评论
{ { comment } }
`,
});

现在我们就可以将这些模块添加到html中了：

最后，我们需要在vue实例对象的创建函数中读取所有文章，并将其赋予给articles属性：

var app = new Vue({
el: '#app',
data: {
articles: [],
selectedArticle: null,
},
created: function() {
// 读取所有文章并将其赋予给articles属性
fetch('/api/articles')
.then(response =>response.json())
.then(data =>{
this.articles = data;
});
},
});

完成了以上步骤，我们就成功地利用vue创建了一个简易的博客页面。