随笔分类 - vue
摘要：购物车原型图 从功能上拆分层次 尽量让组件原子化 容器组件（只管理数据）vuex 组件拆分 该功能拆分成两个组件，顶部是商品列表，底部是购物车商品 功能上 1.点击加入购物车，底部购物车新增商品（或者是已有商品，数量加1即可） 2.点击增加按钮，数量加一，点击减少，数量减1 数据结构上 1.有两种数
阅读全文
摘要：Object.defineProperty 劫持数据 只是对对象的属性进行劫持 无法监听新增属性和删除属性 需要使用 vue.set, vue.delete 深层对象的劫持需要一次性递归 var obj = { a: 1, o: { b: 2, o1: {} } } 无法监听原生数组，需要特殊处理，
阅读全文
摘要：路由是根据不同的url地址来显示不同的页面或内容的功能，这个概念很早是由后端提出的。后端之前是这么做的，当我们访问 http://xxx.abc.com/xx 的时候，大致流程可以想象成这样的： 1. 浏览器向服务器发出请求。2. 服务器监听到80端口，如果有请求过来，那么就解析url地址。3. 服
阅读全文
摘要：vue组件是异步渲染的 汇总data的修改，一次性更新视图 减少dom的操作次数，提高性能 <template> <div id="app"> <ul ref="ul1"> <li v-for="(item, index) in list" :key="index"> {{item}} </li>
阅读全文
摘要：转载；https://www.cnblogs.com/ming1025/p/13091678.html 本版本是对于vue2.x的总结，未来等学习了vue3，再完善对比一波！然后就是说，我们这里主要介绍原理部分，所谓二八原则，我们一切都从最重要的说起吧！ 一切从这张图开始 让我们一步步看吧！ 一、初
阅读全文
摘要：vue响应式简单代码 // 触发更新视图 function updateView() { console.log('视图更新') } // 重新定义数组原型 const oldArrayProperty = Array.prototype // 创建新对象，原型指向 oldArrayProperty
阅读全文
摘要：Object.defineProperty()语法说明 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 Object.defineProperty(obj, prop, desc) obj 需要定义属性的当前对象 prop 当前需要
阅读全文
摘要：Model-View-ViewModel（MVVM，数据驱动视图模型）是软件体系结构模式之一。通过将应用程序分为以下三个部分Model - View - ViewModel来设计和实现具有自己的图形用户界面（GUI）的应用程序的方法。
阅读全文
摘要：当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，如下： mixin中 组件中 控制台 解决方案：不要返回结果而是直接返回异步函数 mixin中 组件中 控制台
阅读全文
摘要：mixins基础概况 vue中的解释是这样的，如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 怎么用？ 举个栗子： 定义一个混入对象
阅读全文
摘要：在项目的目录中找到router文件夹里的index.js index.js文件原先的文件结构 import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City
阅读全文
摘要：动态组件就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。 在挂载点使用 component 标签，然后使用 is =“组件名”，它会自动去找匹配的组件名，如果有，则显示 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以实现动态组件
阅读全文
摘要：vue中的插槽————slot 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 父组件拥有结构，子
阅读全文
摘要：vue高级特性 1. 自定义v-model; 详解；https://www.cnblogs.com/fsg6/p/14469150.html 2. this.$nextTick vue是异步渲染，data改变后，Dom不会立刻渲染， $nextTick会在DOM渲染之后被粗发，已获得最新的dom节点
阅读全文
摘要：v-model 还有一种数据的交互方式是使用 v-model， 这种方法专门是 input 组件， 这只不过是 一种语法糖的形式： input 组件上面本身有一个 onInput 事件。每当素输入框内容发生发生的时候，就会触发这个事件，然后把 input 的值 通过 $emit 传递出去。 <!--
阅读全文
摘要：Vue实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选
阅读全文
摘要：1.watch如何深度监听，watch监听引用类型数据，拿不到oldVal <template> <div> <input v-model="name"/> <input v-model="info.city"/> </div> </template> <script> export default
阅读全文
摘要：在项目开发过程中，遇到vuex报错 Classic mode for store/ is deprecated and will be removed in Nuxt 3. 在nuxt官网查了一下发现是不建议使用这种语法 在 nuxtjs 升级到2.4之后，采用旧的 store 配置方式，配置 vu
阅读全文
摘要：卸载已安装版本 npm uninstall node-sass安装 npm install node-sass@4.14.1
阅读全文
摘要：一.报错结果 出现错误: this.getResolve is not a function 进行sass-loader,node-loader的安装后 $ npm install sass-loader node-sass -D (-D是 --save-dev 的简写) 1 重新运行项目 npm
阅读全文