Vue博客制作

动态双向绑定

           <select v-model="blog.author">
               <option v-for="author in authors">
                   {{author}}
               </option>
           </select>
  //====================================
      data () {
      return {
           authors:["hel","hh","lll"]
      }
    },

触发内容，传递给后台

• npm install vue-resource --save 下载
• npm run dev 重启
• main.js添加import VueResource from 'vue-resource'和Vue.use(VueResource)
• http://jsonplaceholder.typicode.com/
• 提交到远程如果成功，返回一个then里的data
• 提交后，控制台返回一个对象（博客中的值），可换成数据库。

<!-- 触发时,post到后台 -->
<button v-on:click.prevent="post">添加博客</button>
//=====================
    methods:{
        post:function(){
            this.$http.post("https://jsonplaceholder.typicode.com/posts",{
                   title:this.blog.title,
                   boby:this.blog.content,
                   userId:1
            })
            .then(function(data){
                console.log(data);                
            });
        }

当数据发送成功

• 隐藏form<form v-if="!submmited">

展示博客

• 钩子函数应用：created
• 请求数据get
• 本地json只能存储在static中

    created(){
        this.$http.get('https://jsonplaceholder.typicode.com/posts')
        .then(function(data){
            // console.log(data);
            // 只展示10条数据
            this.blogs = data.body.slice(0,10);
            console.log(this.blogs);            
        })

用钩子函数做自定义指令

• 定义一个指令，改变标题颜色

1. main.js加钩子函数
2. binding是传过来的值
3. el是传的值绑定的DOM，DOM会被改变

//ShowBlogs.vue
<h2 v-rainbow>{{blog.title}}</h2>
//App.vue
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';
    }
  }
})

搜索功能

使用filter，把标题变为大写

1. <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>加过滤器
2. main.js里定义Vue.filter("to-uppercase",function(value))
3. to-uppercase是名字，value是传过来的值

// 过滤器
Vue.filter("to-uppercase",function(value){
  return value.toUpperCase();
})

让文字变为小写

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

搜索功能

1. 双向绑定

<input type="text" v-model="search" placeholder="搜索">

2.data里加seach

    data(){
        return{
            blogs:[],
            search:""
        }
    },

3. 改变blogs成filteredBlogs

      <div v-for="blog in filteredBlogs" class="single-blog">

4. computed监听：挨个匹配，匹配上就显示，没匹配就返回false，就显示所有信息。

    computed: {
        filteredBlogs:function(){
            return this.blogs.filter((blog)=>{
                // 没保存返回false
                return blog.title.match(this.search);
            })
        }
    }

把全局api变为局部api

• 注释掉main.js里全局过滤器。

 export default {  
    filters: {
        "to-uppercase":function(value){
            return value.toUpperCase();
        }
    }
  }

• ES6写法

    filters: {
        toUppercase(value){
            return value.toUpperCase();
        }
    },

局部颜色变化

    directives:{
        'rainbow':{
            bind(el,binding,vnode){
                el.style.color = "red";
            }
        }
    }