Vue简易博客总结

项目结构：

首先，编写博客的导航栏组件BlogHeader.vue:

 <template>
     <nav>
         <ul>
             <li>
                 <router-link to="/" exact>博客</router-link>
                 <router-link to="/add" exact>写博客</router-link>
             </li>
         </ul>
     </nav>

 </template>

 <script>
     export default{
         name:"blog-header"
     }

 </script>

 <style scoped>
     ul{
         list-style-type: none;
         text-align: center;
         margin: 0px;
     }

     li{
         display: inline-block;
         margin: 0 10px;
     }

     a{
         color: #fff;
         text-decoration: none;
         padding: 12px;
         border-radius: 5px;
     }

     nav{
         background: crimson;
         padding: 30px 0;
         margin:10px;
     }

     .router-link-active{
         background: rgba(255,255,255,0.8);
         color: #444;
     }

 </style>

如图所示：

---

然后，编写展示博客的组件showBlog.vue：

用到的知识点有axios访问api:更多axios知识点请访问：https://www.npmjs.com/package/axios

 new Vue({
   el: '#app',
   data () {
     return {
       info: null
     }
   },
   created () {
     axios
       .get('https://api.coindesk.com/v1/bpi/currentprice.json')
       .then(response => (this.info = response))
   }
 })
 <div id="app">
   {{ info }}
 </div>

错误处理：

 <!--
 很多时候我们可能并没有从 API 获取想要的数据。这可能是由于很多种因素引起的，比如 axios 调用可能由于多种原因而失败，包括但不限于：
 API 不工作了；
 请求发错了；
 API 没有按我们预期的格式返回信息。
 -->
 axios
   .get('https://api.coindesk.com/v1/bpi/currentprice.json')
   .then(response => (this.info = response.data.bpi))
   .catch(error => console.log(error))

自定义指令，详见：https://cn.vuejs.org/v2/guide/custom-directive.html

 // 注册一个全局自定义指令 `v-focus`
 Vue.directive('focus', {
   // 当被绑定的元素插入到 DOM 中时……
   inserted: function (el) {
     // 聚焦元素
     el.focus()
   }
 })

 //如果想注册局部指令，组件中也接受一个 directives 的选项：
 directives: {
   focus: {
     // 指令的定义
     inserted: function (el) {
       el.focus()
     }
   }
 }

 //然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
 <input v-focus>

过滤器：https://cn.vuejs.org/v2/guide/filters.html

showBlog.vue代码：

 <template>
   <div id="show-blog" v-theme:column="'narrow'">
     <h1 style="text-align: center;padding: 15px 0px 0px 0px">博客总览</h1>
     <input type="text" v-model="serach" placeholder="搜索" />
     <div v-for="blog in blogs" class="single-blog">
         <!-- | pipe管道过滤器的标识 -->
         <router-link v-bind:to="'/blog/' + blog.id"><h2 v-rainbow>{{blog.name}} </h2></router-link>
         <article>
             <!-- {{blog.price | snippet}} -->
              {{blog.detail | snippet}}
         </article>
     </div>
   </div>
 </template>

 <script>
 export default {
   name: 'show-blog',
   data(){
       return{
           blogs:[

           ],
           serach:''
       }
   },
   created(){
       /*this.$http.get('http://jsonplaceholder.typicode.com/posts').then(function(data){
               this.blogs = data.body.slice(0,30);
       })*/
       this.$axios.get('/api/items').then((data)=>{
   //        console.log(data.body);
          this.blogs = data.data;

       })
   },
 /*  computed:{
       filteredBlogs:function(){
           return this.blogs.filter((blog)=>{
               return blog.title.match(this.serach);
           })
       }*/
  // },
   //过滤器局部实现方法
   filters:{
       "to-uppercase":function(data){
           return data.toUpperCase();
       }
   },
   //自定义指令的局部实现方式
   directive:{

   }
 }
 </script>

 <style>

 #show-blog{
     max-width: 800px;
     margin:0 auto;
 }

 .single-blog{
     padding: 20px;
     margin: 20px auto;
     box-sizing: border-box;
     background: #ccc;
     border:1px dotted #aaa;
 }

 #show-blog a{
     color: #444;
     text-decoration: none;
 }

 input[type="text"]{
     padding: 8px;
     width:100%;
     box-shadow: border-box;
 }
 </style>

界面如图所示：

博客详情页代码：

 <template>
     <div id="single-blog">
         <h1>{{blog.title}}</h1>
         <article>{{blog.body}}</article>
     </div>
 </template>

 <script>
     export default{
         name:"singleblog",
         data(){
             return{
                 id:this.$route.params.id,
                 blog:{}
             }
         },
         created(){
             this.$http.get('http://jsonplaceholder.typicode.com/posts/'+this.id).then(function(data){
                   this.blog = data.body;
               })
         }
     }

 </script>

 <style>
     #single-blog{
         max-width: 800px;
         margin: 0 auto;
         padding: 20px;
         background: #eee;
         border:1px dotted #aaa;
     }
 </style>

---

最后编写添加博客页代码：

 <template>
   <div id="add-blog" >
   <h2>添加博客</h2>
   <form action="" v-if="!submmited">
       <label>博客标题</label>
       <input type="text" v-model="blog.title" required="" />
       <label for="">博客内容</label>
       <textarea name="" id="" cols="30" rows="10" v-model="blog.content"></textarea>
     <div id="checkboxes">
       <label for="">Vue.js</label>
       <input type="checkbox" value="Vue.js" v-model="blog.categories" />
       <label for="">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 for="">Angular</label>
       <input type="checkbox" value="Angular"  v-model="blog.categories"/>
       <label for="">作者：</label>
       <select v-model="blog.author">
         <option v-for="author in authors">
           {{author}}
         </option>
       </select>
       <button v-on:click.prevent="post">添加博客</button>
     </div>
   </form>

   <div>
     <h3 v-if="submmited">您的博客发布成功！</h3>
   </div>
   <hr>
   <div id="preview">
       <h3>博客总览</h3>
       <p>博客标题：{{blog.title}}</p>
       <p>博客内容：{{blog.content}}</p>
     <p>博客分类：</p>
     <ul>
       <li v-for="category in blog.categories">
         {{category}}
       </li>
     </ul>
     <p>作者：{{blog.author}}</p>
   </div>
   </div>
 </template>

 <script>
   import axios from 'axios'
 export default {
   name: 'addBlog',
   data () {
     return {
         blog:{
             title:"",
             content:"",
         categories:[],
         author:""
         },
       authors:["lianmin","wnagdalu","zhoujielun"],
       submmited:false
     }
   },
   methods:{
     post:function(){
       /*this.$http.post("http://jsonplaceholder.typicode.com/posts",{
         title:this.blog.title,
         body:this.blog.content,
         userId:1
       }).then(function(data){
         console.log(data.body);
         this.submmited=true;
       });*/
       var _this = this;
      axios.post("http://jsonplaceholder.typicode.com/posts",{
         title:this.blog.title,
         body:this.blog.content,
         userId:1
       }).then((data)=>{
         console.log(data.body);
         _this.submmited=true;
       });
     }
   }
 }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 #add-blog *{
   box-sizing:border-box ;
 }
 #add-blog{
   margin: 20px auto;
   max-width: 600px;
   padding: 20px;
 }

 label{
   display: block;
   margin:20px 0 10px;
 }

 input[type="text"],textarea,select{
   display: block;
   width: 100%;
   padding: 8px;
 }

 textarea{
   height: 200px;
 }

 #checkboxes label{
   display: inline-block;
   margin-top: 0;
 }

 #checkboxes input{
   display: inline-block;
   margin-right: 10px;
 }

 button{
   display: block;
   margin:20px 0;
   background: crimson;
   color: #fff;
   border: 0;
   padding: 14px;
   border-radius: 4px;
   font-size: 18px;
   cursor: pointer;
 }

 #preview{
   padding: 10px 20px;
   border:1px dotted #ccc;
   margin:30px 0;
 }

 h3{
   margin-top: 10px;
 }
 </style>

---

最后进行路由表的相关配置：

 import Vue from 'vue'
 import Router from 'vue-router'
 import HelloWorld from '@/components/HelloWorld'
 import showblog from '@/components/showblog'
 import addblog from '@/components/AddBlog'
 import singleBlog from '@/components/SingleBlog'

 Vue.use(Router)

 export default new Router({
   routes: [
     {
       path: '/',
       name: 'showblog',
       component: showblog
     },
     {
       path: '/add',
       name: 'addblog',
       component: addblog
     },
     {
       path: '/blog/:id', /*路由参数*/
       component: singleBlog
     },
   ],
    mode:"history"  //不用显示#号
 })

还要在App.vue中进行一些编写，主要是使用写好的路由：

 <template>
   <div id="app">
       <blog-header></blog-header>
    <!--  <add-blog></add-blog> -->
     <!-- <show-blog></show-blog> -->
     <router-view/>
   </div>
 </template>

 <script>
 import AddBlog from './components/AddBlog'
 import showblog from './components/showblog'
 import blogHeader from './components/BlogHeader'
 export default {
   name: 'App',
   components: {
     'add-blog': AddBlog,
     'show-blog':showblog,
     "blog-header":blogHeader
   }
 }
 </script>

 <style>

 </style>

另外，还可以在main.js中进行一些全局属性的配置：

 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
 import router from './router'
 import VueResource from 'vue-resource'
 import axios from 'axios'

 Vue.prototype.$axios = axios
 //全局配置axios
 //axios.defaults.baseURL='http://localhost:8080'
 //请求头配置
 /*
 axios.defaults.headers.common['Authorization'] = 'Token'
 axios.defaults.headers.post['Content-type'] = ''
 axios.defaults.headers.get['Accepts']='application/json'
 */
 Vue.config.productionTip = false
 Vue.use(VueResource)

 //自定义指令
 Vue.directive('rainbow',{
     bind(el,binding,vnode){
         el.style.color = "#" + Math.random().toString(16).slice(2,8)
     }
 })

 Vue.directive('theme',{
     bind(el,binding,vnode){
         if(binding.value=='wide'){
             el.style.maxWidth = "1260px"
         }else if(binding.value='narrow'){
             el.style.maxWidth="600px"
         }

         if(binding.arg=='column'){
             el.style.background = "#F4A460";
             el.style.margin = "10px auto"
         }
     }
 })

 //自定义过滤器  全局的实现方式
 /*Vue.filter("to-uppercase",function(value){
     return value.toUpperCase();
 })*/

 Vue.filter("snippet",function(value){
     return value.slice(0,10) + "...";
 })
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
 })

---