first commit

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/App.vue

@@ -0,0 +1,36 @@
+<template>
+  <div id="app">
+    <NavBar :t-name="title"></NavBar>
+    <router-view @Title="SetTitle"/>
+    <TarBar></TarBar>
+  </div>
+</template>
+
+<script>
+// 1：引入组件
+import NavBar from './components/NavBar'
+import TarBar from './components/TabBar'
+export default {
+  name: 'App',
+  data () {
+    return {
+      title: '首页'
+    }
+  },
+  methods: {
+    SetTitle (val) {
+      console.log(val)
+      this.title = val
+    }
+  },
+  // 注册组件
+  components: {
+    NavBar,
+    TarBar
+  }
+}
+</script>
+
+<style>
+
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/components/HelloWorld.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <h2>Essential Links</h2>
+    <ul>
+      <li>
+        <a
+          href="https://vuejs.org"
+          target="_blank"
+        >
+          Core Docs
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://forum.vuejs.org"
+          target="_blank"
+        >
+          Forum
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://chat.vuejs.org"
+          target="_blank"
+        >
+          Community Chat
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://twitter.com/vuejs"
+          target="_blank"
+        >
+          Twitter
+        </a>
+      </li>
+      <br>
+      <li>
+        <a
+          href="http://vuejs-templates.github.io/webpack/"
+          target="_blank"
+        >
+          Docs for This Template
+        </a>
+      </li>
+    </ul>
+    <h2>Ecosystem</h2>
+    <ul>
+      <li>
+        <a
+          href="http://router.vuejs.org/"
+          target="_blank"
+        >
+          vue-router
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vuex.vuejs.org/"
+          target="_blank"
+        >
+          vuex
+        </a>
+      </li>
+      <li>
+        <a
+          href="http://vue-loader.vuejs.org/"
+          target="_blank"
+        >
+          vue-loader
+        </a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+        >
+          awesome-vue
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1, h2 {
+  font-weight: normal;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/components/NavBar.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="navbar">
+    <van-nav-bar :title="tName" left-text="返回" right-text="按钮" left-arrow />
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['tName']
+}
+</script>
+
+<style scoped>
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/components/TabBar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="tabbar">
+    <van-tabbar v-model="active">
+      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
+      <van-tabbar-item replace to="/class" icon="ellipsis">分类</van-tabbar-item>
+      <van-tabbar-item replace to="/car" icon="shopping-cart-o">购物车</van-tabbar-item>
+      <van-tabbar-item replace to="/about" icon="friends-o">我的</van-tabbar-item>
+    </van-tabbar>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/main.js

@@ -0,0 +1,22 @@
+// 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 'lib-flexible/flexible'
+import Vue from 'vue'
+import App from './App'
+import router from './router'
+import axios from 'axios'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+
+Vue.prototype.$http = axios
+Vue.config.productionTip = false
+
+Vue.use(Vant)
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,
+  components: { App },
+  template: '<App/>'
+})

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/page/About.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="Home">
+        <h2>我的</h2>
+    </div>
+</template>
+
+<script>
+export default {
+  created () {
+    // this.$parent.$data.title = '分类'
+    this.$emit('Title', '我的')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/page/Car.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="Class">
+    购物车
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: 0
+    }
+  },
+  created () {
+    // this.$parent.$data.title = '分类'
+    this.$emit('Title', '购物车')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/page/Class.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="Class">
+    分类
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: 0
+    }
+  },
+  created () {
+    // this.$parent.$data.title = '分类'
+    this.$emit('Title', '分类')
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/page/Home.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="Home">
+    <van-tabs v-model="active">
+      <van-tab title="标签 2">
+        
+        <van-list
+          v-model="loading"
+          :finished="finished"
+          finished-text="没有更多了"
+          @load="onLoad">
+          <van-cell v-for="(item,index) in list.items" :key="index" :title="item.title" />
+        </van-list>
+       
+      </van-tab>
+      <van-tab title="标签 2">内容 2</van-tab>
+      <van-tab title="标签 3">内容 3</van-tab>
+      <van-tab title="标签 4">内容 4</van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      active: 0,
+      list: {
+        items: [],
+        current_page: 1,
+        total_page: 2
+      },
+      loading: false,
+      finished: false
+    }
+  },
+  async created () {
+    await this.getData()
+    // this.$parent.$data.title = '分类'
+    this.$emit('Title', '首页')
+    
+  },
+  methods: {
+    async getData() {
+      let res = await this.$http.get('http://127.0.0.1:3000/api/index/class', {
+        params: {
+          type: 1,
+          page: this.list.current_page
+        }
+      })
+      this.list.items = [...this.list.items, ...res.data.result.items]
+      this.list.current_page = res.data.result.current_page
+      this.list.total_page = res.data.result.total_page
+    
+      console.log(this.list);
+    },
+    onLoad() {
+      ++this.list.current_page;
+      this.getData();
+      this.loading = false;
+      
+      if (this.list.current_page >= 4) {
+        this.finished = true;
+        return;
+      }
+     
+      
+      console.log("滚动到底部");
+    }
+  }
+}
+</script>
+
+<style scoped>
+.Home {
+  padding-bottom: 50px;
+}
+
+</style>

历届学生/韩想/每日课程/2020-09-05/vueStudy/src/router/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import(/* webpackChunkName: "home" */ '../page/Home')
+    },
+    {
+      path: '/about',
+      name: 'About',
+      component: () => import(/* webpackChunkName: "about" */ '../page/About')
+    },
+    {
+      path: '/class',
+      name: 'Class',
+      component: () => import(/* webpackChunkName: "class" */ '../page/Class')
+    },
+    {
+      path: '/car',
+      name: 'Car',
+      component: () => import(/* webpackChunkName: "car" */ '../page/Car')
+    }
+  ]
+})