vue.js实现个人博客

使用vue.js完成个人博客

vue调用顺序 index.html → main.js → app.vue → index.js → components/组件

效果图

图1 博客

图2 写博客

环境搭建

安装命令行cli npm install –global vue-cli
创建一个基于webpack模板的新项目 vue init webpack my-blog
安装模块 npm install
运行启动项目 npm run dev
我们要写的一般放在src下的components
（具体安装不再细讲，请自行百度）

功能实现

添加博客AddBlog.vue

在components下新建AddBlog.vue，需要在App.vue中导入AddBlog.vue

import AddBlog from './components/AddBlog'
export default {
  name: 'App',
  components: {
    AddBlog
  }
}

在App.vue中如何使用

<template>
  <div id="add-blog">
</template>

export default {
  name: "add-blog"

v-model监听用户的输入事件以更新数据

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

data() {
    return {
      blog: { 
        categories: [],
      }

遍历博客分类<li v-for="category in blog.categories">{{category}}</li>
阻止默认事件<button v-on:click.prevent="post">添加博客</button>

安装请求资源模块 npm install vue-resource –save
需要在main.js中引入模块 import VueResource from 'vue-resource'
main.js中使用 Vue.use(VueResource)
AddBlog.vue 中post数据并返回数据，post方法写在methods中（用https://jsonplaceholder.typicode.com/posts查看是否请求成功，后续再换url）

methods: {
    post: function() {
      this.$http.post('https://jsonplaceholder.typicode.com/posts',{
        title:this.blog.title,
        body:this.blog.content,
        userId:1
      }).then(function(data){
        console.log(data);
      })
    }
  }

添加博客后只显示博客总览部分<form v-if='!submmited'>

<div v-if="submmited">
      <h3>添加博客成功</h3>
 </div>

post方法中得到数据后this.submmited = true;

展示博客ShowBlogs.vue

同理将ShowBlog.vue 添加到App.vue
要使用ShowBlog.vue，需要在App.vue中调用ShowBlog.vue的id名

div id="app">
    <show-blogs></show-blogs>
  </div>

请求数据created（实例创建完成后被立即调用，若要请求本地文件，文件只能放在static下）

 created() {
    this.$http.get('https://jsonplaceholder.typicode.com/posts')
   	 .then(function(data) {
      	 this.blogs = data.content.slice(0, 10);
      	 console.log(this.blogs);
    })

自定义指令

给标题赋上不一样的颜色
在ShowBlogs.vue中调用v-rainbow指令，会触发main.js中的bind方法
全局的自定义指令

Vue.directive('rainbow',{
  bind(el,binding,vnode){
    el.style.color='#'+Math.random().toString(16).slice(2,8)
  }
})

自定义指令带参数<div v-theme:column="'narrow'" id="show-blogs">

Vue.directive('theme',{
    bind(el,binding,vnode){
        if (binding.value == 'wide') {
            el.style.maxWidth = "1260px";
        } else if (binding.value == 'narrow') {
            el.style.maxWidth = "560px";
        }
        if (binding.arg == 'column') {
            el.style.background = "#6677cc";
            el.style.padding = '20px';
        }
    }
})

也可以使用局部自定义指令—写在ShowBlogs.vue

directives: {
    rainbow: {
      bind(el, binding, vnode) {
        el.style.color = "#" + Math.random().toString(16).slice(2,8);
      }
    }
  }

使用filter

自定义过滤器

<h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
<article>{{blog.body | snippet}}</article>

全局过滤器—写在main.js中

Vue.filter("to-uppercase",function(value){
    return value.toUpperCase();
})
Vue.filter("snippet",function(value){
    return value.slice(0,100) + "...";
})

也可以写局部过滤器—写在ShowBlogs.vue

filters: {
    "to-uppercase":function(value){
      return value.toUpperCase();
    }
    //es6写法
    // toUppercase(value) {
    //   return value.toUpperCase();
    // }
  }

实现展示博客页面的搜索功能

计算属性computed(基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值)
<div v-for="blog in filteredBlogs" class="single-blog">

computed: {
    filteredBlogs: function() {
      return this.blogs.filter(blog => {
        return blog.title.match(this.search);
      });
    }
  }

路由（跳转页面）

安装路由 npm install vue-router –save(需要重新启动npm run dev)
main.js中引用import VueRouter from 'vue-router'
使用路由Vue.use(VueRouter)
专门实现路由，在src下创建routes.js文件

import ShowBlogs from './components/ShowBlogs.vue'
import AddBlog from './components/AddBlog.vue'
export default[
    {path:'/',component:ShowBlogs},//根路径
    {path:'/add',component:AddBlog},
]

创建路由(main.js中)

const router=new VueRouter({
  routes: Routes,
  mode:'history'//取消#号
})

在Vue实例中添加路由

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router:router
})

App.vue中（网址后面添加add或者不添加就可跳转到相应页面）

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

Components下添加BlogHeader.vue

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

export default {
  name: "blog-header"
};

App.vue中引用记得导入和添加组件<blog-header></blog-header>
BlogHeader.vue使用router-link进行页面跳转

<router-link to="/" exact>博客</router-link>
<router-link to="/add" exact>写博客</router-link>

路由参数

新建SingleBlog.vue
首先在routes.js中添加路由import SingleBlog from './components/SingleBlog.vue'
routes.js中添加{path:"/blog/:id",component:SingleBlog}
获取id—获取data—将data.body赋给this.blog

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

ShowBlogs.vue 中添加路由跳转（v-bind进行绑定）

<router-link v-bind:to="'/blog/' + blog.id">
        <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
</router-link>

axios替换vue-resource

安装npm install axios
局部引用（AddBlog.vue ）import axios from 'axios'

axios.post("https://wd8386926570qskuke.wilddogio.com/posts.json",this.blog)

全局引用（main.js引入）import axios from 'axios'
其他需要用到url的会自动加上，删掉，如axios.get('/posts/' + this.id + ".json")

复杂配置

src下新建axios-auth.js

import axios from 'axios'
const instance = axios.create({
  baseURL:"https://wd8386926570qskuke.wilddogio.com/"
})
// instance.defaults.headers.common['SOMETHING'] = 'SOMETHING'
export default instance

ShowBlogs.vue中引入即可import axios from '../axios-auth'