小马Ti的博客

具名插槽使用方法1.编写使用的组件模板,模板中的插槽添加name属性 1234567891011121314151617181920212223242526272829303132<template> <div id="Category"> <h3>{{ title }}分类</h3> <slot name="center">1. 我是一些默认值，当使用者没有传递具体结构时，我会出现</slot> <slot name="footer">2. 我是具名插槽</slot> </div></template><script>export default { name: "Category", ...

全局事件总线1.一种组件间通信的方式，适用于任意组件间通信。 2.安装全局事件总线: 12345678new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ......}) 3.使用事件总线:①接收数据: A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。 1234567methods: () => { demo(data){......}},mounted(){ this.$bus.on('xxxx',this.demo)} ②提供数据：this.$bus.emit(‘xxxx’,数据) 4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

修改默认脚手架配置vue.config.js配置文件1.vue inspect > output.js 可以查看Vue脚手架的默认配置2.使用vue.config.js可以对脚手架进行个性化配置,这个文件需要与package.json同级目录3.关闭语法检查使用lintOnSave第一种: 12345678module.exports = { pages: { index: { entry: 'src/index/main.js' // 入口 } }, lintOnSave: false // 关闭语法检查} 第二种: 123456const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false})

作用域插槽使用方法1.编写想要的组件模板,并将模板的数据也迁移到模板中.通过:games:game这个属性将组件的数据(子组件)传递给APP.vue中(父组件) 123456789101112131415161718192021222324252627282930313233<template> <div id="Category"> <h3>{{ title }}分类</h3> <!-- 通过slot标签传递的数据传给了该插槽的使用者 --> <slot :games="games" :msg="msg">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot> </div></template><script>export default { name: "Category", props:...

事件处理 1.方法一般放在Vue的method中,不要放在data下面,因为data是可以数据劫持以及数据代理的.比如 12345678910111213141516171819const vm = new Vue({ el: "#root", data: { name: "尚硅谷" }, /** * */ methods: { showInfo1(event) { // alert("同学你好") console.log(this) }, showInfo2(event,number) { // alert("同学你好") console.log(event,number) ...

事件修饰符

watch对比computed 1.watch可以开启异步任务,而computed不可以

简介定义Vue.js（简称 Vue）是一个用于构建用户界面的 渐进式 JavaScript 框架，采用 MVVM（Model-View-ViewModel）模式，主要用于创建单页面应用（SPA）。Vue 的设计核心是通过双向数据绑定和组件化来简化前端开发。 组成部分1.模板（Template）：声明式语法，用于定义视图的结构和内容。2.实例（Instance）：Vue 的核心对象，负责绑定数据、方法和生命周期钩子。3.指令（Directives）：特殊的 HTML 属性，用于操作 DOM（如 v-bind、v-if、v-for）。4.组件（Components）：可复用的独立 UI 单元，支持嵌套和组合。5.路由（Router）：通过 vue-router 实现单页面导航。6.状态管理（Vuex）：集中管理应用的状态。 结构形式Vue 的项目通常由以下几部分组成： 1.视图层：负责页面展示，如 HTML 模板。2.数据层：与组件绑定的数据对象。3.逻辑层：控制用户交互逻辑和数据流动。 分类Vue 本身是一个核心库，但其生态系统提供了一整套工具： 1.核心框架：Vue.js...

Vue监测数据总结

Vue实例与组件实例1.VueComponent.prototype.__proto__ === Vue.prototype。这行代码揭示了VueComponent（Vue的组件构造函数）的原型链与Vue（Vue实例的构造函数）的原型链之间的关系。这种关系是通过JavaScript的原型继承机制实现的。 2.建立这种原型链关系的目的是为了让组件实例对象（通常用vc表示）能够访问Vue原型上的属性和方法。这对于Vue.js的应用开发非常关键，因为它允许组件继承和利用Vue实例上的功能。 3.通过原型链访问 Vue 的原型对象,这是 JavaScript 的 原型继承机制，组件实例 vc 可以沿着原型链逐级访问到 Vue 的原型对象，从而使用 Vue 定义在其原型上的方法或属性，例如 $mount、$watch 等。. 4.通过 $parent 访问 Vue 的实例对象,这是 Vue 的 组件树结构（父子关系）设计，vc（子组件实例）的 $parent 属性会指向 vm（父组件实例）。通过 $parent，vc 可以直接访问父组件的实例数据和方法，比如父组件的...