学习笔记之vue

最新推荐文章于 2021-01-12 21:51:54 发布

原创最新推荐文章于 2021-01-12 21:51:54 发布 · 276 阅读

0 ·

CC 4.0 BY-SA版权

学习笔记同时被 2 个专栏收录

2 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

小实战之利用vue-cli简单实现cnode社区列表渲染

1、准备工作
安装vue-cli : npm install -g vue-cli
初始化: vue init webpack router
完成后安装所需模块: npm install
这里需要使用Muse-UI的组件(不使用同样可以，这里仅仅只是为了使用样式)
npm install muse-ui -S
ajax请求使用了axios，同样需要安装
npm i axios -S
由于axios并不是专门提供给vue的插件，所以想要使用axios上的方法需要在main.js中使用 Vue.prototype.axios = axios未来使用时只需要this.axios…调用即可。不喜欢这样用？还有一种办法：安装插件npm i vue-axios -S
未来在main.js中use即可

2、代码块
index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>router</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

src文件夹下：
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 MuseUI from 'muse-ui'  
import 'muse-ui/dist/muse-ui.css'
import axios from 'axios'
import VueAxios from 'vue-axios'
import Loading from 'muse-ui-loading'
import 'muse-ui-loading/dist/muse-ui-loading.css'

Vue.config.productionTip = false
Vue.use(MuseUI)
Vue.use(VueAxios,axios)
Vue.use(Loading)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue:

<template>
  <div id="app">
    <mu-appbar color="lightBlue">
      <mu-button icon slot="left">
        <mu-icon value="arrow_back" :event="['click','mouseover']" :to="'all'"></mu-icon>
      </mu-button>
      cnode
      <mu-button icon slot="right">
        <mu-icon value="view_quilt"></mu-icon>
      </mu-button>
    </mu-appbar>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import TopicList from '@/components/TopicList'
import TopDetail from '@/components/TopDetail'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      redirect:'/all',
      component: Index,
      children:[
        {
          path:':tab',
          component:TopicList,
          props:true
        }
      ]
    },{
      path:'/topic/:id',
      name:'topic',
      component:TopDetail,
      props:true
    }
  ]
})

components文件夹下自定义.vue文件
Index.vue:

<template>
  <div>
    <mu-tabs color="green" indicator-color="yellow" full-width>
      <mu-tab to="/all">全部</mu-tab>
      <mu-tab to="/good">精华</mu-tab>
      <mu-tab to="/share">分享</mu-tab>
      <mu-tab to="/ask">问答</mu-tab>
      <mu-tab to="/job">招聘</mu-tab>
    </mu-tabs>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
}
</script>

TopComment.vue:

<template>
  <mu-list textline="three-line">
    <mu-list-item avatar :ripple="false" button>
      <mu-list-item-action>
        <mu-avatar>
          <img :src="comment.author.avatar_url">
        </mu-avatar>
      </mu-list-item-action>
      <mu-list-item-content>
        <mu-list-item-sub-title>
          <span style="color: rgba(0, 0, 0, .87)">{{comment.author.loginname}}</span>
          <div v-html="comment.content"></div>
        </mu-list-item-sub-title>
      </mu-list-item-content>
    </mu-list-item>
  </mu-list>
</template>
<script>
export default {
  props: {
    comment: Object
  }
}
</script>

TopDetail.vue:

<template>
  <div v-loading="loading">
    <mu-card style="width: 100%; margin: 0 auto;" v-if="topic.id">
      <mu-card-header :title="topic.author.loginname" :sub-title="formatDate">
        <mu-avatar slot="avatar">
          <img :src="topic.author.avatar_url">
        </mu-avatar>
      </mu-card-header>
      <mu-card-title :title="topic.title" :sub-title="formatTab"></mu-card-title>
      <mu-card-text v-html="topic.content">
      </mu-card-text>
    </mu-card>
    <p style='color:red;font-size:16px;'>网友评论:</p>
    <TopicComment v-for="comment in topic.replies" :key="comment.id" :comment="comment"></TopicComment>
  </div>
</template>
<script>
import comment from './TopComment'
import axios from 'axios'
export default {
  data(){
    return{
      topic:{},
      loading:false
    }
  },
  components:{
    TopicComment:comment
  },
  computed: {
    formatDate () {
      const d = new Date(this.topic.create_at)
      let
        year = d.getFullYear(),
        month = d.getMonth() + 1,
        day = d.getDate()

      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day

      return `${year}-${month}-${day}`
    },
    formatTab () {
      const tab = this.topic.tab
      return tab === "good" ? '精华' : tab === "share" ? '分享' : tab === 'ask' ? '问答' : '招聘'
    }
  },
  props:['id'],
  methods:{

    fn(){
      this.loading=true
      axios.get(`https://cnodejs.org/api/v1/topic/${this.id}`,{params:{id:this.id}}).then(res => res.data.data).then(result =>{
        this.topic = result
        this.loading=false
      }).catch(err =>{
        this.loading=false
      });
      setTimeout(() => {
        this.loading = false;
      }, 2000)
    }
  },
  watch:{
    '$route':{
      handler:'fn',
      immediate:true
    }
  }
}
</script>
<style>
  #img{
    width:375px;
  }
  img{
    width: 100%;
  }
</style>

TopicList.vue:

<template>
<div v-loading="loading">
  <mu-load-more @load="load" :loading="loading">
    <mu-list textline="two-line">
      <mu-list-item avatar button :ripple="true" v-for="lists in list" :key="lists.id" :to="'/topic/'+lists.id">
        <mu-list-item-action>
          <mu-avatar>
            <img :src="lists.author.avatar_url">
          </mu-avatar>
        </mu-list-item-action>
        <mu-list-item-content>
          <mu-list-item-title>{{lists.title}}</mu-list-item-title>
          <mu-list-item-sub-title>{{lists.reply_count}}/{{lists.visit_count}}</mu-list-item-sub-title>
        </mu-list-item-content>
        <mu-list-item-action>
         <mu-button icon>
          <mu-icon value="info"></mu-icon>
        </mu-button>
        </mu-list-item-action>
      </mu-list-item>
    </mu-list>
  </mu-load-more>
</div>
</template>
<script>
import axios from 'axios'
export default {
  data(){
    return{
      list:[],
      loading:false,
      currentPage: 1
    }
  },
  props:['tab'],
  methods:{
    fn(){
      this.loading=true
      axios.get('https://cnodejs.org/api/v1/topics',{params:{tab:this.tab}}).then(res => res.data.data).then(result =>{
        this.list = result
        this.loading=false
      }).catch(err =>{
        this.loading=false
      });
      setTimeout(() => {
        this.loading = false;
      }, 2000)
    },
    load () {
      this.currentPage++
      this.loading=true
      axios.get('https://cnodejs.org/api/v1/topics', {
        params: {
          tab: this.tab,
          page: this.currentPage
        }
      }).then(res => res.data.data).then(data => {
        this.loading=false
        this.list.push(...data)
      })
    },
  },
  watch:{
    '$route':{
      handler:'fn',
      immediate:true
    }
  }
}
</script>