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/>'

 })

巴特西

Vue简易博客总结

最新文章

热门文章