demo1-vuejs+jsonp-鬼故事select option淡入淡出 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue jsonp</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
  <style>
    .fade-enter-active,.fade-leave-active{
      transition:opacity .5s
    }
    .fade-enter,.fade-leave-active{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="app"></div>
<!--<script type="text/ecmascript-6">-->
<script>
  /*mode="out-in"原始内容先执行后执行新内容*/
  var App = Vue.component('app', {
    /*router-view显示路由*/
    template: `
    <div id="app">
      <transition name="fade" mode="out-in">
        <router-view :list="list"></router-view>
      </transition>
    </div>
    `,
    data(){
      return {
        list:null
      }
    },
    /*父组件给子组件传值*/
    mounted(){
      //axios~~ajax
      axios.get('https://route.showapi.com/955-1', {
        params: {
          page: '1',
          showapi_appid: '30603',
          type: 'dp',
          showapi_timestamp: Date.now(),
          showapi_sign: '98960666afeb4992ae91971d13494090'
        }
      }).then( res=> {
        //console.log(res.data);
        //this默认window，但是箭头函数指向当前
        this.list = res.data.showapi_res_body.pagebean.contentlist;
    })
    },

  });
  var Index=Vue.component('index',{
    //父组件传过来的  list
    props:['list'],
    template:`
      <div>
        {{type}}
        <select v-model="type" @click="getlist">
          <option value="dp">短片鬼故事</option>
          <option value="cp">长片鬼故事</option>
          <option value="xy">校园鬼故事</option>
          <option value="yy">医院鬼故事</option>
          <option value="jl">家里鬼故事</option>
          <option value="mj">民间鬼故事</option>
        </select>
        <ul>
          <li v-for="item in newlist || list">
            <router-link :to="{path:item.id}">{{item.title}}</router-link>
            {{item.id}}
          </li>
        </ul>
      </div>
    `,
    data(){
      return {
        type:'dp',
        //新赋值
        newlist:null
      }
    },

    methods:{
      getlist(){
        axios.get('https://route.showapi.com/955-1', {
          params: {
            page: '1',
            type:this.type,
            showapi_appid: '30603',
            showapi_timestamp: Date.now(),
            showapi_sign: '98960666afeb4992ae91971d13494090'
          }
        }).then(res=>{
          this.newlist = res.data.showapi_res_body.pagebean.contentlist;
        })
      }
    }
  });
  var Article = Vue.component('article',{
    template:'<div v-html="dp"></div>',
    data(){
      return {
        dp:null
      }
    },
    mounted(){
      axios.get('https://route.showapi.com/955-2', {
        params: {
          page: '1',
          id: `/dp/${this.$route.params.num}`,
          showapi_appid: '30603',
          showapi_timestamp: Date.now(),
          showapi_sign: '98960666afeb4992ae91971d13494090'
        }
      }).then(res => {
        console.log(res)
        this.dp=res.data.showapi_res_body.text;
    })
    }
  });

  var router=new VueRouter({
    routes:[
      {path:'/',component:Index},
      {path:'/dp/:num',component:Article}//  /dp/48830.html,使用$route.params.num查看
    ]
  });
  new Vue({
      el: '#app',
      router,
      //箭头函数一行自带return
      //模板
      render: h => h(App)
  });
</script>
</body>
</html>

 

posted @ 2018-01-20 11:48  blackatall  阅读(57)  评论(0)    收藏  举报