Vue学习总结（一）

一、使用vue-cli脚手架去搭建一个项目

1、安装一个脚手架生成工具（安装全局命令行工具，在任何位置都可以）

npm install -g vue-cli

2、安装完毕之后在你的终端验证是否安装成功

vue -help

3、使用工具去自动生成项目，在终端找到你行存储项目的地址，然后输入以下命令

vue init webpak 名称

4、等待安装完成，其中有一项是ESlint code，是用来校验代码格式的，根据需求去使用。
5、成功后会有地址，默认是localhost:8080。
6、开发时启动项目使用命令npm run dev 或者 npm start。

二、总结的一些小的知识点

1、scoped 在style标签上加上这个属性，可以实现组件样式也有自己的作用域。
2、success普通函数指向window，如果在vue中想要得到全局的this-VueComponent,可以使用箭头函数。
3、子组件的使用步骤：
创建、引入、注册、使用。
4、组件必须有要有跟节点，但是template标签不算，我们一般都会包一个div。
5、main.js的作用就是将App根组件替换到入口节点div#app中。
6、项目中所有的组件都是以.vue结尾的，.vue结尾的文件我们称之为单文件组件，这种文件比较特殊，浏览器无法识别。
7、输入：import 输出 export

三、介绍生命周期函数created

组件的created选项是一个函数，该函数会自动执行（可以在页面一进入就需要渲染列表的时候使用），该函数中可以用来获取组件的this，this就是当前组件。

四、引入第三方样式

样式的导入也是通过Javascript来导入的，在main.js中
例如：

import  'bootstrap/dist/css/bootstrap.css'
import  './assets/css/index.css'

五、路由的使用

路由是用来实现页面导航的管理，点击不同的导航显示不同的页面（动态显示）
1、安装

npm install vue-router

2、在main.js中加载使用

import  VueRouter from 'vue-router' //加载路由模块
Vue.use(VueRouter)   //注册到vue中才能使用

3、配置路由表

// 配置路由表
const appRouter = new VueRouter({
  routes:[
    {
      path:'/foo',
      component:{
        template:`<div>foo组件啊</div>`
      }
    },
    {
      path:'/bar',
      component:{
        template:`<div>bar组件啊</div>`
      }
    }
  ]
})
//当请求/xxx的时候渲染xxx组件
routes是一个数组，存储一些固定格式的对象
对象的path表示请求的路径
对象的component用来指定当你请求path的路径的时候渲染该组件

4、配置实例选项router，为上面的new出来的VueRouter实例对象

5、预留路由出口
在你的根组件预留一个路由的出口，用来告诉路由匹配到某个path的时候，把该徐建渲染到哪

<router-view></router-view>

6、用户点击链接的设置

 <li><a href="#/foo">GO FOO</a></li>
 <li><a href="#/bar">GO BAR</a></li>

注意href的路径的使用，必须以#开头，后面加path路径

六、将路由导航到.vue组件

1、新建一个.vue组件
2、在main.js中引入该组件

import Herolist from './components/Herolist'

3.修改配置的路由表

{
      path:'/heros',
      component:Herolist
    }

七、使用axios在vue项目中发请求

为什么要使用axios发送请求
axios专门封装了ajax操作，没有别的DOM，很小，支持IE8+
使用步骤：
1、安装

npm install axios 

2、 引入

import axios from "axios"

3、发请求

 created() {
    axios.get("http://localhost:3000/heros")
    .then(res => {
      // 使用箭头函数可以改变this的指向，使this指向当前组件，从而得到this.heros
      // console.log(res.data);
      this.heros = res.data;
    });
  }