qq_39811414的博客

1. 处理边界情况官方文档 - 处理边界情况1.1. 访问元素 & 组件1.1.1. 访问根组件所有子组件都可以通过 this.$root 访问 main.js 的那个根实例⛔：大型应用建议使用 vuex 来管理！1.1.2. 访问父组件所有子组件可以通过 this.$parent 访问 上一级父组件，但是嵌套层级太深就会出现一个问题1.1.3. 访问子组件实例或元素可以通过给子组件设置一个 ref，来进行访问，比如可以在父组件写一个聚焦函数，让子组件里面的 input 进行聚

1. 插槽1.1. 前言在 2.6.0 以后，vue 官方文档引入了新的指令 v-slot，此文章仅作为学习笔记，如有错误理解请多多指教????‍♂️1.2. 插槽内容⛔：这部分最后一句话，不知道是不是有错误，我自己在 Son.vue 中不写任何 slot（如下），并不会替换 Son.vue 的所有内容<!-- Son.vue --><template><h1>我是子组件</h1></template><!-- Fathe

1. 自定义事件官方文档自定义事件1.1. 自定义组件的 v-model首先，一个组件的 v-model 默认会利用一个名为 value 的 prop 接 input 的事件，如下所示：<!-- Son.vue --><template><input type="text" :value="value" @input="handleInput"/></template><script>export default { prop

1. 自己动手实现响应式1.1. 原理1.1.1. 两个问题首先给你如下的一段代码，要实现响应式，你需要考虑什么问题？<div> {{ message }} <!--这个人是张三--> {{ message }} <!--这个人是李四--> {{ message }} <!--这个人时候王五--> {{ name }}</div><script> const app = new Vue

前言在项目开发中，用到了一个json editor，因为是vue需要用到，于是借鉴了vue-json-editor源码进行编写了一个符合自己业务的json-editor。接口name含义默认值width组件的宽度‘100%’height组件的高度‘500px’mode编辑json的格式(tree、view、form)treemodes可视化json的格式(tree、code、orm、text、view)[‘tree’, ‘code’, ‘form

前言在做项目时，getters里有很多冗余代码，但是仔细一看可以根据参数来解决，于是决定使用传参来进行获取，减少代码冗余。案例需求：在getters里能够根据值动态获取到people的元素。经过多次尝试，最终得到下面的代码。state.js代码如下：export default { people: [ { name: 'zs', age: 14 }, { name: 'ss', age: 24 }, {

前言最近在做练手项目时，把vuex分模块进行了管理。但是对于语法的不熟悉，导致漏洞百出。这两天结合了vuex的官方文档，操作了一下分模块下，如何读取state、getters、actions等，如下是记录过程。为什么分模块之前看的代码，是把所有state、getters、actions写在一个文件，由于项目较大，感觉逻辑有点乱，于是可以利用分模块的办法，給每一个模块单独的state、getters、actions等，从而使得逻辑结构清晰。案例代码说明如下图所示，我主要是分了两个模块a、b，分别在

前言最近在写一个vue读取本地文件夹，然后页面展示vue文件夹的图片信息，有如下的疑惑，遂去了解原因。【onloadend是异步加载的，因此那里拿不到】参考内容URL.createObjectURL(object) 返回了一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容。其参数为用于创建 URL 的File 对象、Blob 对象或者 MediaSource 对象。​FileReader.readAsDataURL(file) 读取指定的 Blob 或 Fil

前言今天在写map遍历对象数组的时候，vue提示报错 ：陷入了更新死循环，原因是遍历操作修改了原数组对象，导致map又一次触发，因此正确做法是map操作时不能改变原数组。 data() { return { names: [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 8 }, { id: 3, name: '张三', age: 18 }

迟到怪物 2020年02月21日 阅读 1004 关注 一文弄懂如何在 Vue 中配置 process.env.NODE_ENV 最近在研习 vue.config.js 文件，发现一行，甚是费解。process.env.NODE_ENV查阅资料后，发现武林众功法中对 process.env.NODE_ENV 没有解释的太清楚，遂决定以一功法记录。process.env 为何物...

<div class="article fmt article__content">npm（你怕吗）npm(Node Package Manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。（与其有同样功能的另一个包管理工具yarn，速度用体验比旧版本的npm好，但npm最近的新版本也做出很大努力，...

总结这两天想试一下怎么部署vue项目，可怜我这个小白一点经验都没，踩了很多坑，以此记录一下我配置的过程，希望能帮到其他人。对很多原理不了解，希望大佬们能够指出。配置情况说明：软件说明服务器：Centos7.2无Nginx1.16.1简单理解就是配置一下它的一些路径，你就能从服务器ip访问到你的项目了步骤首先是安装yum【yum是一个包管理器，用于CentOS下，读者自行安装】安装nginx【yum install nginx】；启动nginx【systemc

VuexVuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。（简单理解就是多个组件需要访问的数据存放在这里面统一管理）为什么用Vuex#说明可以看到，根组件的data这个数据对A、B组件来说有多么麻烦了吧，一层一层往下传，又一层一层往上传；因此如果有个地方存放着这个data，各组件直接从里面获取或者设置不就好了吗？Vuex就有这个作用。有了Vuex，A可直接通过Getter获取到数据，B也可直接通过Mutation设置数据，就很方便啦。V