一、创建项目

1、安装Node.js

查看node版本     node-v
查看npm版本    npm-v

2、安装vue-cli脚手架

安装

npm install -g @vue/cli

创建项目

vue create 项目名

启动

// 按照创建完的项目，切换到对应的目录下，然后启动
npm run serve

二、基本预发

1、v-bind属性传值(可以缩写：)

Hello

2、v-if 属性添加判断 v-show根据属性显示是否展示

// v-if根据布尔值创建或者删除dom的标签，v-show不会通过创建或者删除dom标签，只会通过display属性来控制。
if="boolean">好好学习
天天向上

3、v-if、v-else-if、v-else做判断

if="age>70">老了
else-if="age>18">成年
else>儿童

4、v-for循环

for="item in projects" :key="item.key">{{item.value}}

5、v-on绑定事件（缩写@）

按钮
按钮

6、v-model为双向绑定，既可以将Model中的数据传给绑定的属性，也可以将输入的内容传给model来处理

{{username}}

三、VUE生命周期

在组建的整个过程中，在不同的阶段会有不同的钩子（默认会执行到的方法），在这些钩子中可以定义自己需要的方法。
比如：
created() 实例之后的操作
mounted() 实例DOM树之后

四、父子组件传值props，子父组件传值$emit

1、父子组件传值props

思路：被调用的组件上使用v-bind将子组件的数据赋值给一个变量 —— 子组件使用props接收对应数据 —— 接收数据做约束，使用。

    

        
    
    
        
        

            {{message}}
            
        
        
        
    

2、子父组件传值$emit

思路：子组件监听一个事件 —— 当事件触发时，使用$emit 向 调 用 该 子 组 件 的 父 组 件 传 一 个 this.emit(子事件名，要传的值)，—— 被调用的组件标签上传事件给对应的父组件@子事件名=“父方法名”` —— 父方法触发，并且获取传的值

    

        
    
    
        
        

            {{fmessage}}
            
        

        
        
        
        
    

五、父子组件通讯（父访问子组件属性使用$children $refs， 子访问父组件使用$paren,访问根组件$root）

1、父访问子组件属性使用$children、$refs

    

        
    
    
        

            
父组件
            
            
            
            按钮   
         
        
        
        
    

2、子访问父组件使用$paren,访问根组件$root

六、Vue插槽slot 编译作用域 作用域插槽

基本使用

1、插槽不添加任何内容，只占用位置，使用时添加
2、插槽做有内容，当使用插槽时，会被覆盖
3、插槽中有多个插槽，一并添加使用
4、具名插槽（根据插槽名字进行替换）

    

        
    
    
        

            
                
按钮
            
        

        

         
        
    

编译作用域

在模版中调用的时候，使用模版下的参数（vue实例下的参数或者父模版下参数），当使用在组件里时，使用的是组件下的参数。

作用域插槽

作用：父组件调用子组件，但是对子组件展示的方式不满意，要进行自定义，但是使用的是子组件的数据。
原理: 子组件使用插槽(slot)包裹，并且在slot上使用v-bind定义关联对应的数据（例：v-bind:data=“XXXX”），在父组件使用时，使用slot-scope=“slot”生成slot对象。获取数据slot.data（注意：使用时vue版本在2.5.X以前都要使用template进行包裹）

    

        
    
    
        

            
                
                
                    
for="item in slot.data">{{item}}
                
            
        

        
        
        
        
    

七、vue-router

1、安装使用

安装：

npm install vue-router--save

使用：

第一步：导入路由对象

import Vue from 'vue'
import VueRouter from 'vue-router'

第二步：调用

Vue.use(VueRouter)

第三步：创建路由实例，传入路由映射配置

const router = new Router({
  // 配置映射对象
  routes：[],
  mode: 'history',  // 模式指定
  linkActiveClass: 'active',  // 更改响应class属性
})

2、使用vue-router

配置组件和路由映射

a、对于重定向路由使用redirect
b、对于子路由使用children,在父路由下添加
c、在路由实例中可以添加对应的设置mode\linkActiveClass\，这里的routes被抽离了出去，就是上图中的routes

const router = new Router({
  // 配置映射对象
  routes,
  mode: 'history',  // hash
  linkActiveClass: 'active',
})

d、使用绑定方法，指定路由

首页
关于

  methods: {
    btnHome(){
      this.$router.push('/home')
    },
    btnAbout(){
      this.$router.push('/about')
    },
   }

3、使用路由和

在调用的时候可以指定router-link 属性to路由、replace不可以返回上一页面、tag渲染出来的标签、action指定触发时class属性

关于

动态路由

1、 传递参数方式一 params

使用

用户

  {
    path: "/user/:id",
    component: User,
    meta:{
      title: "用户"
    }
  },

获取参数

this.$route.params

2、传递参数方式二 query

使用

    Profile页面

获取参数

$route.query

导航懒加载

作用：打包时，组件js代码分开打包。提高加载效率。

导航守卫

一、什么是导航守卫？

1、vue-router提供的导航守卫主要用来监听路由的进入和离开
2、vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。
参数：
to:即将进入目标的路由对象
from:当前导航即将离开的路由对象
next:调用该方法后，才能进入下一个钩子
 

在全局配置的导航守卫，称之为全局守卫，其他的还有路由独享的守卫、组件内的守卫

keep-alive

说明：keep-alive是vue内置的一个组件，可以使被包含组件保留状态，活避免重新渲染。
1、include 字符串或正则表达式，只有匹配的组件会被缓存
2、exclude 字符串或正则表达式，任何匹配的组件都不会被缓存

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存：

 当使用keep-alive时，会存在activated(0和deactivated()

八、Promise

九、Vuex

十、axios使用

 安装

npm install axios --save

import axios from 'axios'

export function HttpRequest(config){

    // 实例化axios
    const Instance = axios.create({
        url:"127.0.0.1",
        timeout: 50000
    })

    // 请求拦截器，实例Instance发送请求，拦截config配置和请求错误信息error。config和error是两个函数，这里作为use的参数传入。
    Instance.interceptors.request.use(config => {
        console.log(config)
        return config
    },error => {
        console.log(error)
        return error
    })

    // 响应拦截,和请求拦截一样，实例Instance的响应信息做拦截。拦截响应信息res和返回的错误信息error。res和error是两个函数，这里作为use的参数传入。
    Instance.interceptors.request.use(res => {
        console.log(res)
        return res.data  // 这里响应res对象会携带很多axios的其它信息，对于我们有用的就是res.data 。这里我们可以直接做过滤。
    },error => {
        console.log(error)
        return error
    }) 

    // 这里调用Instance执行，并将执行结果返回，也可以穿入config，覆盖内部的配置。
    // 而且Instance本身就是Promise对象，对于HttpRequest函数返回也同样可以当作Promise对象
    return Instance(config)
}