Vue学习笔记

一、基础知识

{{ }} 双花括号只能渲染文本，示例：<p>{{ test }}</p>

v-html 渲染 html，示例：<div v-html="test"></div>

v-bind 渲染属性，示例：<div v-bind:id="test"></div> 简写为：<div :id="test"></div>

二、组件

一个 .vue 文件就是一个组件，基本构成为：

<template>
</template>

<script>
export default {
    name: "ComponentName"
}
</script>

<style>
</style>

1、加载组件的流程

1）引入组件：import ComponentName from 'path'

2）挂载组件：components:{ComponentName}

3）显示组件：<component-name/>

注：ComponentName 和 component-name 是等价的

加载组件示例：

<template>
    <component-name> // 显示组件
</template>

<script>

import ComponentName from 'path' // 引入组件

export default {
    name: "FatherComponent",
    Components:{
        ComponentName // 挂载组件
    }
}
</script>

<style>
</style>

一个 vue 界面就是由多个 vue 组件嵌套组成的，逻辑上是个组件树的形式，被挂载的为子节点，挂载的为父节点。

2、组件之间的交互

props 用于父组件给子组件传递信息（字符串、整型、数组、函数），示例如下：

父组件：

<template>
    <component-name :messageKey="transfer">
</template>

<script>

import ComponentName from 'path'

export default {
    name: "FatherComponent",
    data(){
        return{
            transfer:"一个消息"
        }
    }
    Components:{
        ComponentName
    }
}
</script>

<style>
</style>

子组件：

<template>
    <p>{{ messageKey }}</p>
</template>

<script>
export default {
    name: "ComponentName",
    props:{
        messageKey:{
            type:String,
            default:"" //防止父组件不传递消息导致报错（传递数组和对象时，返回的默认值需要是函数形式）
        }
    }
}
</script>

<style>
</style>

$emit 用于子组件给父组件传递信息

三、Axios

1、单个组件导入

在单个组件内部直接 import axios from "axios" 即可

使用示例1：

axios({
    method: "get",
    url: "http://host:port"
}).then(res => {
    this.object = res.data
})

使用示例2：

axios.get(url).then(res => {
    this.object = res.data
})

2、 全局挂载导入

main.js 中配置：

import {createApp} from 'vue'
import App from './App.vue'
import axios from "axios"

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')

此时挂载完成并起别名为 $axios

使用方式改变示例：

this.$axios.get(url).then(res => { // res 是参数
    this.object = res.data
})

3、axios 的封装

/src/utils/http.js 里面封装：

import axios from "axios"

const instance = axios.create({
    timeout:5000 // 全局配置，请求或响应超时时间为 5 s
})

// 请求拦截器
instance.interceptors.request.use(
    // config 和 error 都是参数，表示请求成功或失败
    config =>{
        return config
    }
    error =>{
        return error
    }
)

// 响应拦截器
instance.interceptors.response.use(
    // config 和 error 都是参数，表示请求成功或失败
    response =>{
        return response.status
    }
    error =>{
        return error
    }
)

export default instance;

创建两个文件：/src/base.js 和 /src/index.js

/src/base.js 里面封装：

const base = {
    baseUrl: "http://host:port"
    aanda-test:"/params"
    // 上面两个组成完整的请求路径
}

export default base;

/src/index.js 里面封装：

import axios from "../utils/http"
import axios from "./base"

const api = {
    aandaTest() {
        return axios.get(base.baseUrl + base.aanda-test)
    }
}

export default api

使用封装的 axios：

<template>
</template>

<script>

import api from "../api/index"

export default {
    name: "ComponentName",
    api.aandaTest().then(res =>{
        console.log(res.data)
    })
}
</script>

<style>
</style>

vue-router

1、路由的使用

我们可以用 vue-router 来管理组件之间的关系

创建一个路由文件，定义一个数组管理所有路由

import { createRouter, createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView"

const routes= [
    {
        path:"/",
        component:HomeView
    },
    {
        path:"/about",
        // 懒加载页面，节省资源。
        component:() => import(AboutView from "../views/AboutView")
    }
]

const router = createRouter({  
    history:createWebHashHistory(),
    routes
})

export default router;

在 main.js 中导入：

import {createApp} from 'vue'
import App from './App.vue'
import router from "./router"

createApp(App).use(router).mount('#app')

在 .vue 的文件中使用：

<template>
<!-- 该路由所对应的组件在这里显示 -->
<router-view></router-view>
<!-- 点击后跳转至指定路由页面 -->
<router-link to="/about">关于</router-link>
</template>

<script>
export default {
    name: "ComponentName"
}
</script>

<style>
</style>

2、路由的传参

3、路由的嵌套

import { createRouter, createWebHashHistory } from "vue-router"
import HomeView from "../views/HomeView"

const routes= [
    {
        path:"/",
        component:HomeView
    },
    {
        path:"/about",
        // 懒加载页面，节省资源。
        component:() => import(AboutView from "../views/AboutView")
        // 二级导航界面不需要加 /
        children:[
            {
                path:"us",
                component:() => import("../view/AboutSub/AboutUs.vue")
            }
            {
                path:"info",
                component:() => import("../view/AboutSub/AboutInfo.vue")
            }
        ]
        // 默认重定向到关于我们界面
        redirect:"/about/us"
    }
]

const router = createRouter({  
    history:createWebHashHistory(),
    routes
})

export default router;

四、Vuex

我们之前学过 props 和 $emit 这种父子组件的数据传递方式，但是局限性太大，所以提出了 vuex 这种集中式组件数据状态管理库。

1、配置 vuex

import { createStore } from "vuex"

export default createStrore({
    state: {
        cnt:0 // 可被读取的状态
    }
})

2、主文件中引入 vuex

import {createApp} from 'vue'
import App from './App.vue'
import store from "./store"

createApp(App).use(store).mount('#app')

3、任意组件都可读取

<template>
    <p>{{ cnt }}</p>
    <!-- 这种方式不需要下面导包 mapState-->
    <p>{{ $store.state.cnt }}</p>
</template>

<script>

import {mapState} from "vuex"

export default {
    name: "ComponentName",
    computed:{
        ...mapState(["cnt"])
    }
}
</script>

<style>
</style>

vuex 核心四种操作

State、Getter、Mutation、Action

Getter

对数据进行过滤

import { createStore } from "vuex"

export default createStrore({
    state: {
        cnt:0 // 可被读取的状态
    },
    getters:{
        getCounter(state){
            return state.counter > 0 ? state.counter : "counter 小于零"
        }
    }
})

Mutation

修改数据状态

import { createStore } from "vuex"

export default createStrore({
    state: {
        cnt:0 // 可被读取的状态
    },
    getters:{
        getCounter(state){
            return state.counter > 0 ? state.counter : "counter 小于零"
        }
    }
    mutation:{
        addCounter(state,num){
            state.cnt+=num // 可通过事件调用
        }
    }
})

Action

异步操作数据状态

import { createStore } from "vuex"

export default createStrore({
    state: {
        cnt:0 // 可被读取的状态
    },
    getters:{
        getCounter(state){
            return state.counter > 0 ? state.counter : "counter 小于零"
        }
    }
    mutation:{
        addCounter(state,num){
            state.cnt+=num // 可通过事件调用
        }
    },
    actions:{
        asyncAddCounter({ commit }){
            axios.get("http://host:port")
            .then(res =>{
                commit.addCounter(res.data) // addCounter 参数来自异步网络请求，而不是页面传参了
            })
        }
    }
})