小马Ti的博客

列表排序在列表过滤的基础上进行排序 通过数组的sort方法来实现排序

分析脚手架结构目录和文件作用12345678910111213141516├── node_modules/ # 存放项目依赖的目录├── public/ # 公共文件目录│ ├── index.html # 页面入口 HTML 文件│ └── ...├── src/ # 源代码目录│ ├── assets/ # 存放静态资源（图片、样式等）│ ├── components/ # Vue 组件│ ├── views/ # 页面级别的组件│ ├── App.vue # 根组件│ ├── main.js # 入口 JavaScript 文件│ └── router.js # Vue Router 配置（如果有）├── .gitignore # Git 忽略文件├──...

函数简化第一种写法1234render(createElement) { return createElement("h1", "你好啊");} 这是一个常规的函数声明方式 第二种写法1234render: (createElement) => { return createElement("h1", "你好啊");} 这是一种箭头函数写法。箭头函数通常用于简化代码，并且具有与常规函数不同的 this 绑定方式。在这里，它做的是与第一种写法一样的事情，只不过是用箭头函数来代替常规函数，返回的是同样的结果。 第三种写法1234render: createElement => { return createElement("h1", "你好啊");} 这种写法省略了箭头函数的括号，通常在只有一个参数时可以省略括号。这个写法和第二种写法是等价的，createElement...

具名插槽使用方法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不可以