随笔分类 - vue
摘要：一、reactive reactive 用于为对象添加响应式状态。接收一个js对象作为参数，返回一个具有响应式状态的副本。 获取数据值的时候直接获取，不需要加.value参数只能传入对象类型 等价于Vue2中的Vue.observable() ，来赋予对象(Object) 响应式的特性 import
阅读全文
摘要：在vue项目中使用如sass、less、stylus时需要进行公共变量、方法的集中维护 vue-cli3.0构建的服务使用如下方法可直接在每个css中引入公共变量、方法此处只说明了style 的引入，其他less sass引入在vue-cli3.0文档中有说明 stylus详见：https://gi
阅读全文
摘要：一、引入最近某项目中，通过fbSdk实现了一种类似于微信朋友圈评论回复的功能。评论数据结构有几层未知，所以用到了递归。递归组件，顾名思义，就是自己的内部实现又调用自己的组件。比如Vue官方给的treeView的例子，父目录下有子目录，子目录下还有子目录，子子孙孙，无穷尽也。就像俄罗斯套娃。 评论数据
阅读全文
摘要：下面 先从setup Fuction 开始编写Compositon API. 1⃣️ setup 新的 setup 组件选项 在 创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。 我们从 setup 返回的所有内容 都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等
阅读全文
摘要：一、响应性原理 数据模型 是被代理的 JavaScript 对象。而当你修改它们时，视图会进行更新。这让状态管理非常简单直观。 理解其工作原理同样重要，这样可以避开一些常见的问题。 1⃣️ 什么是响应性？ 响应性是 一种允许我们以声明式的方式去适应变化的一种编程范例。如excell。 js如何实现响
阅读全文
摘要：为什么使用 composition API ? vue2的局限促使我们使用vue3。具体如下： 随着组件变得更大, 逻辑关注点的列表也会增长。碎片化使得 可读性 和 可维护性也变低。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。如果我们能够将与
阅读全文
摘要：element 官网上 slot=“header”，这种写法，template 内的变量，打印出来的一直是初始值，将slot=“header” 改成#header ，就可以了 * 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot
阅读全文
摘要：深入响应式原理： https://cn.vuejs.org/v2/guide/reactivity.html必须在 data 对象上存在才能让 Vue 将它转换为响应式的.对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, pr
阅读全文
摘要：需求：项目中需要自定义切换中/英文 基于vue.js，结合vue-i18n，ElementUI, 以下是使用方法。 ElementUI国际化链接： http://element-cn.eleme.io/#/...vue-i18n：https://github.com/kazupon/vu... vu
阅读全文
摘要：官网地址： https://element.eleme.cn/#/zh-CN/component/custom-theme elementUI 提供了三种方法，可以进行不同程度的样式自定义。 方式一：仅替换主题色 Element 默认的主题色是鲜艳、友好的蓝色。如果仅希望更换 Element 的主题
阅读全文
摘要：最近做的问卷调查系统中用到了tabs标签页，导致了一个很奇葩的大坑，来回收缩改变页面大小时，甚至访问进来页面就 直接导致浏览器卡死崩溃... 解决方案1 : 使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题 <el-row> <el-col :span="24">
阅读全文
摘要：elementUI官网地址：https://element.eleme.cn/#/zh-CN/component/checkbox#checkbox-button-attributes 在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boole
阅读全文
摘要：场景：项目中我们会定义很多全局变量（如下） 为了更好的代码复用，避免写重复代码，问题的关键是怎么在我们的项目中引入这些文件。 方法1 <style lang="scss"> @import "./styles/_colors.scss"; </style> 在每个单文件组里引入上述代码。 这个方法的
阅读全文
摘要：background: url("../../../assets/pre-registration/web/part10_title.png") background: url("~@/assets/pre-registration/web/part10_title.png") 在style里可以用
阅读全文
摘要：
阅读全文
摘要：应用场景 在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。 由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。 如何配置 在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进
阅读全文
摘要：解决方法:删除文件 package-lock.json，再重新执行npm i或者npm install
阅读全文
摘要：验证过程： 首次登录时，后端服务器判断用户账号密码正确之后，根据用户id、用户名、定义好的秘钥、过期时间生成 token ，返回给前端； 前端拿到后端返回的 token ,存储在 localStroage 和 Vuex 里； 前端每次路由跳转，判断 localStroage 有无 token ，没有
阅读全文
摘要：当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形： 使用一： 使用二： 当我们需要在js代码里面写图片路径的时候，如果我们在data里面写，webpack只会把它当做字符串处理从而找不到图片地址， /*错误写法* /imgUrl:'../assets/logo.png' 在data里
阅读全文
摘要：https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%93 https://github.com/lipis/flag-icon-css
阅读全文
浙公网安备 33010602011771号