随笔分类 - vue
摘要：本文皆为简单实现，不涉及边界和优化问题 不涉及参数的简单实现 涉及参数的简单实现
阅读全文
摘要：1.hash模式的简单实现 使用锚点跳转+监听hashChange事件 2.history模式的简单实现 因为使用history.pushState不会刷新页面,故使用history.pushState+监听pushState事件 关于history模式刷新页面404的问题，因为刷新页面之后相当于在
阅读全文
摘要：1.js中的对象 在es5里呢，js对象呢有一个特性，就是可以进行set和get 何为set和get呢 所谓set，就是可以在set中检测到对象某个属性值是否改变了，只要对象的属性值改变就会触发它 而get呢，可以在get里面进行数据的拦截处理，比如说我一个对象里有一个code值为123，我在set
阅读全文
摘要：- src -- myPackage 自定义组件库 zoo-modal 自定义组件 src 组件内容 index.vue -- index.js 注册可以使用按需引入方法的组件 -- installComponents.js 全局注册组件 1.封装组件 zoo-modal/src/index.vue
阅读全文
摘要：官方介绍 updated 类型：Function 详细：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下， 你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计
阅读全文
摘要：1.使用事件总线机制 1.创建实例,导出实例,新建bus.js文件 import Vue from "vue" const Bus = new Vue() export default Bus 2.传值的组件引入事件总线实例,发射事件 import Bus from 'bus.js' Bus.$em
阅读全文
摘要：vue响应式的核心是数据劫持,使用了object.defineProperty()这个方法,给每一个数据添加setter和getter,getter作为依赖收集,setter派发更新,是一种发布订阅的模式 具体来说 vue实例初始化的时候,遍历data,给date的每个数据添加setter和gett
阅读全文
摘要：我们知道,vue每个组件之间不会相互影响是因为每个组件都是一个单独的实例 而vuex是通过创建一个store实例,并把store实例挂载到了所有的组件上,那样每个组件操作store其实是对同一个引用进行操作,这个组件上改了store的state,另一个组件上的state也会改变
阅读全文
摘要：<template></template> <script> export default { methods: { print() { console.log(123); }, }, }; </script> <style> </style> 子组件中定义了一个方法print,打印123 父组件想
阅读全文
摘要：假设这是父组件 father <template> <div> <Child /> </div> </template> <script> import Child from './child' export default { components:{ Child }, data() { retu
阅读全文
摘要：vue中的dom更新是异步的,参考下面的例子: <template> <div> <div style="width: 20vw; height: 10vw; border: 1px solid #000000" @click="updateData" ref="box" > {{ msg }} <
阅读全文
摘要：如果我们不想让也面初始化的时候就加载所有的组件，就会用到动态组件 常用的场景是多tab的页面，每一个tab是一个组件这种 示例1：这是没有使用动态组件的时候 <template> <div> <button @click="check">{{ !show ? "展示组件" : "隐藏组件" }}</
阅读全文
摘要：<template> <div> <button @click="fetch">开始请求</button> <div v-if="loading">正在加载...</div> </div> </template> <script> import axios from "axios"; import
阅读全文
摘要：代码示意: 比如说有一个组件count.vue: <template> <div> <button @click="change(1)">加一</button> <input type="text" v-model="num" /> <button @click="change(-1)">减一</b
阅读全文
摘要：<div v-for="item in list" :key="item">{{item}}</div> <button @click="arrayChange">改变数组内容</button> <button @click="arrayLengthChange">改变数组长度</button> <
阅读全文
摘要：如图,这个是使用vue-cli构建项目后删除一些没用的东西,简洁的目录结构 1.index.html 这个是index.html文件,可以看到,body里面有一个id="app"的div 2.main.js 这里new Vue()是创建了一个新的vue实例, new Vue().$mount("#a
阅读全文
摘要：vue-cli搭建的环境，用nginx做代理服务器，访问时显示：Invalid Host header 经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接hos
阅读全文
摘要：解决方法： 管理员身份打开cmd,输入命令 set-ExecutionPolicy RemoteSigned 回车，继续输入y 回车
阅读全文
摘要：在项目中,有个组件使用的插槽,想控制插槽里面内容的现实隐藏,使用v-show后发现没效果,经过查阅资料,发现尤雨溪在社区里解释过这个问题: vue的插槽是一种类似于template的抽象元素,本质上并不是真正的HTML元素,而v-show是控制元素的css属性display实现的,既然slot本质上
阅读全文
摘要：在此之前,我没有在意路由跳转携带参数,如果刷新页面参数会消失导致报错的问题,经此次遇到,才仔细的研究了vue路由传参的秘密 在项目中,我们通常希望在某个事件里跳转路由,并携带参数, 官方文档里把这叫做编程式导航(https://router.vuejs.org/zh/guide/essentials
阅读全文
