## 盘友圈

是一个在线网盘搜索引擎，阿里云盘、百度网盘、夸克网盘资源搜索工具，支持百度网盘、阿里云盘和夸克网盘资源搜索，使用无需注册登录，即可搜索主流网盘的资源，收录非常丰富，需要找什么网盘资源直接搜索即可。

## 网站地址

盘友圈：[https://panyq.com/](https://panyq.com/)


盘友圈-在线网盘搜索引擎 百度阿里夸克资源搜索

## 变更

Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

## 替换

变更方法会对调用它们的原数组进行变更。相对地，也有一些不可变(immutable)方法，例如filter()、concat()和slice()，这些都不会更改原数组，而是返回一个新数组。当遇到非变更方法时，需要将旧的数组替换为新的。


Vue 3数组变化侦测

## Pinokio

是一款AI浏览器，可以在浏览器中运行任何东西，让你自动轻松地安装、运行和自动化任何AI应用程序和模型（llama、stablediffusion）。

不需要打开终端，不用熟悉git clone、conda install、pip install，也不用配置执行环境，所有这些操作都是一键自动化，就像使用浏览器一样简单，对小白非常友好，相当于一台虚拟电脑，集合终端安装应用程序、运行脚本、终端执行任务，可以在计算机上做的任何事情，都可通过Pinokio自动完成，非常强大，支持Windows、macOS和linux等。

## 下载地址

官网：[https://pinokio.computer/](https://pinokio.computer/)


Pinokio-AI浏览器 在浏览器中运行任何东西

## 界面灵感

是一个Notion站点，设计师灵感来源网站集合，作者是一个UX/UI设计师，这个notion站点主要内容是作者平时收集的Design&Code资源，希望对一些设计师设计有所帮助，灵感设计网站收集的蛮丰富的，而且每个网站都有标注到作者的评价。

Web/App/Email/Others灵感类网站合集，有可能是全网最全的。

## 网站地址

界面灵感：[https://uxchi.notion.site/881b4c0179a74935a3f607ad3521cdb5](https://uxchi.notion.site/881b4c0179a74935a3f607ad3521cdb5)


界面灵感-设计师灵感来源网站集合

## 核心步骤

1. 子组件中：props通过value接收，事件触发input
2. 父组件中：v-model给组件直接绑数据

src\components\BaseSelect.vue文件：

    <template>
      <div>
        <select :value="value" @change="handleChange">
          <option value="101">北京</option>
          <option value="102">上海</option>
          <option value="103">广州</option>
          <option value="104">深圳</option>
        </select>
      </div>
    </template>
    <script>
    export default {
    props: {
    value: String,
    },
    methods: {
    handleChange(e) {
    this.$emit('input', e.target.value)
    },
    },
    }
    </script>

src\App.vue文件：

    <template>
    <div>
    <BaseSelect v-model="selectId"></BaseSelect>
    </div>
    </template>
    <script>
    import BaseSelect from './components/BaseSelect.vue'
    export default {
    data() {
    return {
    selectId: '102',
    }
    },
    components: {
    BaseSelect,
    },
    }
    </script>

## .sync修饰符

作用：可以实现子组件与父组件数据的双向绑定，简化代码。

特点：prop属性名可以自定义，非固定为value。

场景：封装弹框类的基础组件，visible属性：true显示、false隐藏。

本质：就是`:属性名`和`@update:属性名`合写。

src\components\BaseDialog.vue文件：

    <template>
    <div v-show="visible" class="base-dialog-mask">
    <div class="base-dialog">
    <div class="title">
    <h3>温馨提示</h3>
    <button class="close" @click="close">x</button>
    </div>
      &lt;div class=&quot;content&quot;&gt;&lt;p&gt;确认退出本系统么？&lt;/p&gt;&lt;/div&gt;
    
      &lt;div class=&quot;footer&quot;&gt;
        &lt;button&gt;确认&lt;/button&gt;
        &lt;button&gt;取消&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    
    </div>
    </template>
    <script>
    export default {
    props: {
    visible: Boolean,
    },
    methods: {
    close() {
    this.$emit('update:visible', false)
    },
    },
    }
    </script>
    <style scoped>
    .base-dialog-mask {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 300px;
    height: 200px;
    box-shadow: 2px 2px 2px 2px #ccc;
    transform: translate(-50%, -50%);
    padding: 0 10px;
    }
    .base-dialog .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
    }
    .base-dialog .content {
    margin-top: 38px;
    }
    .base-dialog .title .close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    line-height: 10px;
    }
    .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 26px;
    }
    .footer button {
    width: 80px;
    height: 40px;
    }
    .footer button:nth-child(1) {
    margin-right: 10px;
    cursor: pointer;
    }
    </style>

src\App.vue文件：

    <template>
    <div class="app">
    <button @click="openDialog">退出按钮</button>
    <BaseDialog :visible.sync="isShow"></BaseDialog>
    </div>
    </template>
    <script>
    import BaseDialog from './components/BaseDialog.vue'
    export default {
    data() {
    return {
    isShow: false,
    }
    },
    methods: {
    openDialog() {
    this.isShow = true
    },
    },
    components: {
    BaseDialog,
    },
    }
    </script>


Vue表单类组件封装思路

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。