Vue-极其简单的博客添加页面
布局概况:
<div id="add-blog">
<h2>添加博客</h2>
<form v-if="!submited">
<label for="">博客标题</label>
<input type="text" v-model="blog.title" required/>
<label>博客内容</label>
<textarea v-model="blog.content"></textarea>
<div id="checkboxes">
// 博客的类型
<label>Vue.js</label>
<input type="checkbox" value="Vue.js" v-model="blog.categories"/>
<label>Node.js</label>
<input type="checkbox" value="Node.js" v-model="blog.categories"/>
<label for="">React.js</label>
<input type="checkbox" value="React.js" v-model="blog.categories"/>
<label>Angular4</label>
<input type="checkbox" value="Angular4" v-model="blog.categories"/>
</div>
<label>作者</label>
<select v-model="blog.author">
<option v-for="author in authors" :key="author">{{author}}</option>
</select>
<button v-on:click.prevent="post">添加博客</button>
</form>
<div v-if="submited">
<h3>你的博客发送成功!</h3>
</div>
<hr>
<div id="preview">
<h3>博客总览</h3>
<p>博客标题:{{blog.title}}</p>
<P>博客内容</P>
<p>{{blog.content}}</p>
<p>博客分类</p>
<ul>
<li v-for="category in blog.categories" :key="category">{{category}}</li>
</ul>
<p>作者:{{blog.author}}</p>
</div>
</div>
功能实现:
<script>
export default {
name: 'AddBlog',
data () {
return {
blog: {
title: '',
content: '',
categories: [],
author: ''
},
authors: ['tom', 'bob', 'john'],
submited: false
}
},
methods: {
post: function () {
this.$http.post('https://**.com/post.json', this.blog).then(function (data) {
console.log(data)
this.submited = true
})
}
}
}
</script>
预览:
步骤:
- 通过v-model双向绑定数据,方便获取用户编写的博客相关信息
- {{blog.**}}显示相关数据
- 设置submited,判断是否已经点击“添加博客按钮”,根据其值选择显示的内容
- 将数据对象blog通过vue-resource提交到firebase(别再把url写错了,害)