前端学习：Vue大盘点2

最新推荐文章于 2024-06-04 15:02:46 发布

菜菜取名快废了

最新推荐文章于 2024-06-04 15:02:46 发布

阅读量388

点赞数

文章标签： vue.js 前端学习

本文链接：https://blog.csdn.net/qq_43164745/article/details/125340893

版权

生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

3.生命周期函数的名字不可以更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm或者组件实例对象

5.Vue完成模板的解析并把初始的真是DOM元素放入页面后（挂载完毕）调用mounted

常用的生命周期钩子：

1.mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例：

1.销毁后借助Vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，也不会再触发更新流程了

Vue中使用组件的三大步骤：

一、定义组件（创建组件）

二、注册组件

三、使用组件（写组件标签）

一、如何定义一个组件？

使用Vue.extend（options）创建，其中options和new Vue(options)时传入的那个options几乎一样，但有区别，区别如下：

1.el不要写：最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器

2.data必须写成函数：避免组件被服用时，数据存在引用关系

备注：使用template可以配置组件结构

二、如何注册组件？

1.局部注册：靠new Vue的时候纯如components选项

2.全局注册：靠Vue.component（’组件名‘，组件）

三、编写组件标签：

<组件名></组件名>

关于组件名:

1.一个单词组成:

1）第一种写法(首字母小写) : school

2）第二种写法(首字母大写) : School

2.多个单词组成

1）第一种写法(kebab-case命名) : my-school

2）第二种写法(CamelCase命名) : MySchool (需要Vue 脚手架支持)

备注：

1）组件名尽可能回避HTML 中已有的元素名称，例如: h2、 H2都不行

2）可以使用name 配置项指定组件在开发者工具中呈现的名字

关于组件标签：

第一种写法：<schol></school>

第二种写法：<schoo1/> (需要 Vue脚手架支持)

备注：不使用脚手架时，<school/>会导致后续组件不能渲染

一个简写方式：

const school = Vue . extend(options)可简写为const school = options,因为父组components引入的时候会自动创建

关于VueComponent:

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend的生成的。

2,我们只需要写<school>或<school></school>,Vue解析式会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(option)。

3.特别注意：每次调用Vue.extend。返回的都是一个全新的VueComponent！！！！

4.关于this的指向：

1）组件配置中：

data函数，methods中的函数，watch中的函数，computed中的函数它们的this均是【VueComponent实例对象】。

2）new Vue()配置中：

data函数，methods中的函数，watch中的函数，computed中的函数它们的this均是【Vue实例对象】

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）Vue的实例对象，以后简称vm

一个重要的内置关系：

VueComponents.prototype._proto_ === Vue.prototype，这个关系是为了让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

1）vue,js是完整版的Vue，包含核心功能+模板解析器

2）vue.runtime.xxx.js是运行版的Vue。只包含核心功能：没有模板解析器

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数区指定具体内容。

脚手架文件结构：

Vue.config,js配置文件：

ref属性;

1.被用来给元素或子组件注册引用信息（id的替代者）

2.应用在html标签上获取的是真实DOM元素，应用在组件标签是组件实例对象（vc）

3.使用方式：

打标识：<h1 ref="xxx">......</h1>或<School ref="xxx"></School>

获取：this.$refs.xxx

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDom">点我显示上面的Dom元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
import School from "./components/School.vue"

export default {  
    name:"App",  
    components:{School},
    data() {
        return {
            msg:"法外狂徒张三"
        }
    },
    methods: {
        showDom(){
            console.log(this.$refs.title) // 真实的DOM元素
            console.log(this.$refs.btn) // 真实的DOM元素
            console.log(this.$refs.sch) // School组件的实例对象
        }
    },
}
</script>

配置项props

功能：让组件接受外部传过来的数据

1）传递数据：

2）接收数据：

第一种方式（只接受）：props:["name"]

第二种方式（限制类型）：props：{name:Number}

第三种方式（限制类型，限制必要性，指定默认值）：

 props:{
        name:{
            type:String, // name的雷总是字符串
            required:true, // name是必要的
        },
        address:{
            type:String,
            default:"上海" // 默认值
        }
    }

备注：props是只读的，Vue底层会检测你对props的修改，如果进行修改，就会发出警告，若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后修改data中的数据。

mixin（混入）：

功能：可以把多个自建公用的配置提取称一个混入对象

使用方式：

第一步定义混入：例如：

{

data(){.......}

menthods:{........}

.........

}

第二步使用混入：例如：

1）全局混入：Vue.mixin(xxx)

2）局部混入：mixins:["xxx"]

webStorage：

1.存储内容大小一般支持5MB左右（不同浏览器可能不一样）

2.浏览器通过Window,sessionStorage和Window.localStorage属性来实现本地存储机制

3.相关API：

1）xxxxStorage.setItem("key","value");

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2）xxxxStorage.getItem("person")

该方法接受一个键名作为参数，返回键名对应的值

3）xxxxStorage.removeItem("key")

该方法接受一个键名作为参数，并把该键名从存储中删除

4）xxxxStorage.clear()

该方法会清空存储中的所有数据

4.备注：

1）SessionStorage存储的内容会随着浏览器串口关闭而消失。

2）LocalStorage存储的内容需要手动清除才会消失

3）xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null

4）JSON.parse(null)的结果仍然是null

5）JSON.stringify可以将对象转化为字符串

组件的自定义事件：

1.一种组件间通信的方式，适用于：子组件===>父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3.绑定自定义事件：

1）第一种方式，在父组件中：<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/>

2）第二种方式：在父组件中：

<Demo ref="demo"/>
......
mounted(){
    this.$refs.xxx.$on("atguigu",this.test)
}

3）若想让自定义事件只能触发一次，可以只用once修饰符，或者$once方法

4.触发自定义事件：this.$emit("stguigu",数据)

5.解绑自定事件：this.$off("atguigu")

6.组件上可以绑定原生DOM事件，需要使用native修饰符

7.注意：通过this.$ref.xxx.$on("atguigu",回调)绑定自定义事件时，回调要配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）

1.一种组件间通信的方式，适用于任意组件间通信

2.安装全局事件总线：

new Vue({
  ......
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
.......
})

3.使用事件总线：

1）接收数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

methods: {
            sendStudentName(){
                this.$bus.$emit("hello",this.name)
            }
        }
......

mounted() {
            this.$bus.$on("hello",(data)=>{
                console.log("我是School组件，收到了数据",data)
            })
        },
        beforeCreate() {
            this.$bus.$off("hello")
        }

2）提供数据：this.$bus.$emit("xxxx",数据)

4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

消息订阅与发布（pubsub）

1.一种组件间通信得方式，适用于任意组件间通信

2.使用步骤：

1）安装pubsub：npm i pubsub-js

2）引入：import pubsub from "pubsub-js"

3）接受数据：A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身

 mounted() {
            // this.$bus.$on("hello",(data)=>{
            //     console.log("我是School组件，收到了数据",data)
            // })
            this.pubId = pubsub.subscribe("hello",(msgName,data)=>{
                console.log("我收到了Student组件发来的消息",msgName,data);
            })
        },
        beforeCreate() {
            // this.$bus.$off("hello")
            // 在School组件销毁前曲线订阅
            pubsub.unsubscribe(this.pubId)
        },
    })

.......

 methods: {
            sendStudentName(){
                // this.$bus.$emit("hello",this.name)
                pubsub.publish("hello",666)
            }
        },

4）提供数据：pubsub.publish("xxx"，数据)

5）最好在beforeDestroy狗子中，用PubSub.unsubscribe(pid)去取消订阅

nextTick

1.语法：this.$nextTick（回调函数）

2.作用：在下一次DOM更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加合适的样式类名

2.图示：

3.写法：

1）准备好样式：

元素进入的样式：

i）v-enter：进入的起点

ii）v-enter-active：进入过程中

iii）v-enter-to：进入的终点

元素离开的样式：

i）v-leave：进入的起点

ii）v-leave-active：进入过程中

iii）v-leaver-to：进入的终点

2）使用<transition>包裹要过度的元素，并配置name属性：

<transition name="hello" appear>
    <h1 v-show="isShow">你好啊</h1>
</transition>

3）备注：若有多个元素需要过度，则须使用：<transition-group>，且每个元素都要指定key值

VUE脚手架配置代理

方法一：在vue.config.js中添加如下配置：

 devServer: {
    proxy: "http://localhost:5000"
 }

说明：

1）优点：配置简单，请求资源时直接发给前端（8080）即可。

2）缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

3）工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二：编写Vue.config.js配置具体代理规则

devServer: {
    proxy: {
      "/api1": {// 匹配所有"/api"开头的请求路径
        target: "http://localhost:5000", // 代理目标的基础路径
        pathRewrite: { "^/api1": "" },
        ws: true, // 用于支持websocket
        changeOrigin: true //告诉服务器自己的请求端口号与所要请求的服务器端口号一致
      }
    },
    proxy: {
      "/api2": {// 匹配所有"/api"开头的请求路径
        target: "http://localhost:5001",  // 代理目标的基础路径
        pathRewrite: { "^/api2": "" },
        ws: true, // 用于支持websocket
        changeOrigin: true //告诉服务器自己的请求端口号与所要请求的服务器端口号一致
      }
    }
}

注：

changeOrigin设置为true时，服务器收到的请求中host为：localhost：5000

changeOrigin设置为false时，服务器收到的请求中host为：localhost：8080

changeOrigin默认值为true

说明：

1）优点：可以配置多个代理，且可以灵活的控制请求是否走代理

2）缺点：配置略微繁琐，请求资源时必须加前缀

插槽

1.作用：让父组件可以想子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件

2.分类：默认插槽，具名插槽，作用域插槽

3.使用方式：

1）默认插槽

//父组件中：
<Category title="美食">
    <div>html结构</div>
</Category>
//子组件中
<template>
    <div>
        <!-- 定义一个插槽（挖一个坑，等着组件的使用者进行填充） -->
        <slot>我是一些默认值，当使用者灭有传递具体结构时我会出现</slot>
    </div>
</template>

2）具名插槽

//父组件中
<Category title="美食">
    <template slot="center">
        <div>html结构</div>
    </template>

    <template slot="footer">
        <div>html结构</div>
    </template>
</Category>
// 子组件中
<template>
    <div>
        // 定义插槽
        <slot name="center">我是一些默认值，当使用者灭有传递具体结构时我会出现1</slot>
        <slot name="footer">我是一些默认值，当使用者灭有传递具体结构时我会出现2</slot>
    </div>
</template>

3）作用域插槽

i）理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但是使用数据所遍历出来的结构由App组件决定）

ii）具体编码：

// 父组件中
<Category title="游戏">
    <template scope="{games}">
        // 生成ul列表
        <ul>
            <li v-for="(g,index) in games" :key="index">{{g}}</li>
        </ul>
    </template>
</Category>

<Category title="游戏">
    <template scope="{games}">
        // 生成h4标题
        <h4 v-for="(g,index) in games" :key="index">{{g}}</h4>
    </template>
</Category>


// 子组件中
<template>
    <div class="category">
        <h3>{{title}}分类</h3>
        <!-- 定义一个插槽（挖一个坑，等着组件的使用者进行填充） -->
        <slot :games="games">我是一些默认值，当使用者灭有传递具体结构时我会出现1</slot>
    </div>
</template>

<script>
    export default {
        name:"Category",
        props:["title"],
        data() {
            return {
                games:["泡泡堂","超级玛丽","动森","牧场"]
            }
        },
    }
</script>

Vuex

1.概念在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue用用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信

2.何时使用：多个组件需要共享数据时

3.搭建vuex环境

1）创建文件：src/store/index.js

// 该文件用于创建Vuex中最为核心的store

// 引入vue
import Vue from "vue"
// 引入Vuex
import Vuex from "vuex"

// 准备actions--用于相应组件中的动作
const actions = {}

// 准备mutations--用于操作数据（state）
const mutations = {}

// 准备state--用于存储数据
const state = {}

//由于需要先使用vuex才能使用store,所以先使用vuex
// 使用Vuex插件
Vue.use(Vuex)
// 创建并暴露store
export default new Vuex.Store({
    // 当对象的键名与对象的值同名时，可以利用简写形式
    /* actions:actions,
    mutations:mutations,
    state:state */
    actions,
    mutations,
    state
})

2）在main.js中创建vm时传入store配置项

// 引入vue
import Vue from "vue"
// 引入App
import App from "./App.vue"
// 引入插件,使得vc身上多了一个$http
import vueResource from "vue-resource"
// 引入store
import store from "./store/index"

// 关闭Vue生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(vueResource)


new Vue({
    el: "#app",
    render: h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线
    }
})

Vuex中getters的使用

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2.在store.js中追加getters配置

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

// 创建并暴露store
export default new Vuex.Store({
    // 当对象的键名与对象的值同名时，可以利用简写形式
    /* actions:actions,
    mutations:mutations,
    state:state */
    ......
    getters
})

3.组件中读取数据：$store.getters.bigSum

四个map方法的使用：

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed:{
// sum(){
//     return this.$store.state.sum
// },
// 借助mapState生成计算属性（对象写法）
...mapState({sum:"sum"}),
// 借助mapState生成计算属性（数组写法）
...mapState(["sum"]),

}

2.mapGetter方法：用于帮助我们映射getters中的数据为计算属性


// bigSum(){
//     return this.$store.getters.bigSum
// }
// 借助mapGetters生成计算属性（对象写法）
...mapGetter({bigSum:"bigSum"}),
// 借助mapGetters生成计算属性（数组写法）
...mapGetter(["bigSum"])

3.mapAction方法：用于帮助我们生成与actions对话的方法，即包含$store.dispatch(xxx)的函数

// increment(){
//     this.$store.commit("JIA",this.number)
//     console.log(this);
// },
// decrement(){
//     this.$store.commit("JIAN",this.number)
// },
// 借助mapMutation生成对应的方法，方法中会调用commit去联系mutations（对象的写法）
...mapMutations({increment:"JIA",decrement:"JIAN"}),
// 借助mapMutation生成对应的方法，方法中会调用commit去联系mutations（数组的写法）
...mapMutations(["JIA","JIAN"]),

4.mapMutation方法：用于帮助我们生成与mutation对话的方法，即包含$store.commit(xxx)的函数

// incrementOdd(){
//     this.$store.dispatch("jiaOdd",this.number)
// },
// incrementWait(){
//     this.$store.dispatch("jiaWait",this.number)
// },
// 借助mapAction生成对应的方法，方法中会调用dispatch去联系actions（对象的写法）
...mapActions({incrementOdd:"jiaOdd",incrementWait:"jiaWait"}),
// 借助mapAction生成对应的方法，方法中会调用dispatch去联系actions（数组的写法）
...mapActions(["jiaOdd","jiaWait"])

备注：mapActions与mapMutations使用时，如需要传递参数需要在模板中绑定好事件时传递好参数，否则参数是事件对象

模块化编码+命名空间

1.目的：让代码更好维护，让多种数据分类更明确

2.修改store.js

// 该文件用于创建Vuex中最为核心的store

// 引入vue
import Vue from "vue"
// 引入Vuex
import Vuex from "vuex"

const countAbout = {
    namespaced: true,
    // 准备actions--用于相应组件中的动作
    actions: {
        jia(context, value) {
            // console.log("我是actions里面的jia，我被调用了", context, value);
            context.commit("JIA", value)
        },
        jian(context, value) {
            context.commit("JIAN", value)
        },
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit("JIAODD", value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit("JIAWAIT", value)
            }, 1000)
        },
    },
    // 准备mutations--用于操作数据（state）
    mutations: {
        JIA(state, value) {
            // console.log("我是mutations里面的JIA，我被调用了", state, value);
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
        JIAODD(state, value) {
            state.sum += value
        },
        JIAWAIT(state, value) {
            state.sum += value
        },
    },
    // 准备state--用于存储
    state: {
        sum: 1, // 当前的和
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

const personAbout = {
    namespaced: true,
    actions: {},
    // 准备mutations--用于操作数据（state）
    mutations: {
        ADDPERSON(state, value) {
            // console.log(state, value);
            state.personList.unshift(value)
        }
    },
    // 准备state--用于存储数据
    state: {
        personList: [
            { id: "001", name: "张三" }
        ]
    },
    getters: {}
}

//由于需要先使用vuex才能使用store,所以先使用vuex
// 使用Vuex插件
Vue.use(Vuex)
// 创建并暴露store
export default new Vuex.Store({
    // 当对象的键名与对象的值同名时，可以利用简写形式
    /* actions:actions,
    mutations:mutations,
    state:state */
    /*  actions,
     mutations,
     state,
     getters */
    // 模块化暴露
    modules: {
        countAbout,
        personAbout
    }
})

3.开启命名空间后，组件中读取state数据：

// 方式一：自己直接读取
this.$store.state.personAbout.personList
// 方式二：借助mapState读取
...mapState("countAbout",["sum"]),

4.开启命名空间后，组件中读取getters数据：

// 方式一：自己直接读取
bigSum(){
    return this.$store.getters["countAbout/bigSum"]
},
// 方式二：借助mapGetters读取
...mapGetters("countAbout",["bigSum"]),

5.开启命名空间后，组件中调用dispatch：

// 方式一：自己直接dispatch
incrementOdd(){
    this.$store.dispatch("countAbout/jiaOdd",this.number)
},
incrementWait(){
    this.$store.dispatch("countAbout/jiaWait",this.number)
}

// 方式二：借助mapActions
...mapActions("countAbout",{incrementOdd:"jiaOdd",incrementWait:"jiaWait"}),

6.开启命名空间后，组件中调用commit：

// 方式一：自己直接commit
incrementOdd(){
    this.$store.commit("countAbout/jiaOdd",this.number)
},
incrementWait(){
    this.$store.commit("countAbout/jiaWait",this.number)
}
// 方式二：借助mapMutations
...mapMutations("countAbout",{increment:"JIA",decrement:"JIAN"}),

路由

1.基本使用

1）安装vue-router，命令：npm i vue-router

2）应用插件：Vue.use(VueRouter)

3）编写router配置项

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'

// 创建并暴露路由
export default new VueRouter({
    routes: [
        {
            path: "/about",
            component: About
        },
        {
            path: "/home",
            component: Home
        },
    ]
})

4）实现切换（active-class可配置高亮样式）

<router-link class="list-group-item " active-class="active" to="/about">About</router-link>

5）指定显示位置

<router-view></router-view>

2.几个注意点：

1）路由组件通常存放在pages文件夹中，一般组件通常存放在components文件夹中

2）通过切换，”隐藏“了的路由组件，默认是被销毁掉的。需要的时候再去挂载

3）每个组件都有自己的$route属性，里面存储着自己的路由信息

4）整个应用只有一个router，可以通过组件的$router属性获取到

3.多级路由

1）配置路由规则，使用children配置项：

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'

// 创建并暴露路由
export default new VueRouter({
    routes: [
        {
            path: "/about",
            component: About
        },
        {
            path: "/home",
            component: Home,
            children: [
                {
                    path: "message",
                    component: Message
                },
                {
                    path: "news",
                    component: News
                }
            ]
        },
    ]
})

2）跳转（要写完整路径）

<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

4.路由的query参数

1）传递参数

<li v-for="m in messageList" :key="m.id">
    <!-- 路由跳转并携带query参数，to字符串写法 -->
    <!-- <router-link :to="`/home/message/detile?id=${m.id}&title=${m.title}`">{{m.title}}            </router-link>&nbsp;&nbsp; -->
    <!-- 路由跳转并携带query参数，to对象写法 -->
    <router-link :to="{
        path:'/home/message/detile',
        query:{
            id:m.id,
            title:m.title
        }
    }">
    {{m.title}}
    </router-link>&nbsp;&nbsp;            
</li>

2）接收参数