初学vue过程中笔记

写这篇文章是在网上看vue的视频，跟着视频老师实战项目后记的笔记。是想在写下一个项目的忘了的地方再拿出来看看，嘿嘿。应该有很多不足的地方…

一、项目准备工作

1.通过gitbash搭建项目

也可以通过在文件里打开终端 vue create demo 创建

winpty vue.cmd create demo

选择默认或自定义

cd demo
npm run serve

打开项目后，跟着老师一顿操作，虽然没看怎么懂，具体过程是这样的
1.将src目录下assets文件中的图片删除
2.将App.vue中的内容删了，然后是这样

<template>
  <div> 
      	<router-view></router-view>
  </div>
</template>

3.他是将所有组件放在components文件中，所以把views文件，HelloWorld.vue都删除，然后在components文件下创建几个文件（Home，City等），再在Home里面新建Home.vue父组件和其他子组件如Header.vue等
然后修改router文件下index.js代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/home/Home'

Vue.use(VueRouter)

  const routes = [
   {
    path: '/',
    name: 'Home',
    component: Home
  }/*,
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/About.vue')
  } */
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4.在home文件夹下的Home父组件和Header子组件
Header.vue

<template>
    <div>
        这是头部
    </div>
</template>

Home.vue

<template>
    <div class="home">
        <home_header></home_header>
    </div>
</template>
<script>
import home_header from './Header'
export default {
    components:{
        home_header,
    }
}
</script>

二、

一、请求接口渲染数据

1.安装axios

npm install axios --save

2.引入axios

在main.js中引入

import axios from 'axios'
Vue.prototype.axios=axios

3.配置

在components目录下的父组件（Home.vue）目录下

<template>
    <div class="home">
        <Banner></Banner>
        <!-- 传到Icons子组件 -->
        <Icons :iconLists='iconLists'></Icons>
    </div>
</template>
<script>
import Banner from './Banner'
import Icons from './Icons'
export default {
    components:{
        Banner,
        Icons
    },
    <!-- 返回homeIconLists.json中iconLists -->
    data(){
        return{
            iconLists:[]
        }
    },
    <!-- 请求端口 -->
    mounted(){
        this.http();
    },
    methods:{
        http(){
            let secs = this;
            this.axios.get("http://localhost:8081/api/homeIconLists.json").then((res)=>{
                let data = res.data.data[0];
                secs.iconLists = data.iconLists;
            })

        }
    }
}
</script>

在Home.vue的子组Icons.vue中添加一个props

<template>
    <div class="icons">
        <ul>
            <li v-for='(item,index) in iconLists' :key='index'>
                <img :src="item.imgUrl" alt="">
                <p>{{item.title}}</p>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['iconLists'],
    data(){
        return{

        }
    }
}
</script>