在上一篇实现了 侧边栏 效果的基础上，引入腾讯地图，实现地图类型切换、2D、3D视图切换 效果如下： 一、使用腾讯位置服务 1.官网 腾讯位置服务 - 立足生态，连接未来 2.注册 登录 注册账号--->登录控制台 3.创建应用 应用管理--->我的应用--->创建应用--->填写应用名称，选择应用类型 例如：应用名称：maptest 应用类型：其他 4.添加key到「ma…
实现的效果： 代码： 父页面 <template> <a-row :gutter="24"> <a-col :md="24"> <a-card title="递归实验"> <a-steps :current="current"> <a-step v-for="(item, index) in dataSteps" :key="ind…
{ {dataAll.first.name}} 使用 { {}} 双花括号在html页面进行数据绑定时，从一个对象中获取，超过两个 . 就报错，如下代码报错提示为 获取数据是异步进行，vue先执行绑定的数据，但此时赋值为空，直接拿两层是拿不到数据的。 解决办法：在data：里给first一个赋值为空，这样初始化时不会报错 data: { dataAll : { first : {}, } }, 版…
在写vue项目的时候，后台没有及时提供数据，我们前台会在本地模拟一些数据进行开发测试，在axios请求这些假数据的时候，我们需要添加一个请求路径，按道理来说我们写上本地数据路径即可，但是在项目上线的时候就得修改这些本地路径，这样很容易出现漏改，所以，vue给出了一个代理转换机制。 首先，在static文件夹下新建一个mock文件夹用于存放假数据index.json文件： 其次，在 .gitigno…
路由 hash 模式已经将#占用, 页面的锚点功能失效，js 实现替代 <div class="doc"> <a @click="$tools.goAnchor(0)">锚点1</a> <a @click="$tools.goAnchor('#link2')">锚点2</a> <a @click="$tools.goAnchor('…
1、v-text 和v-html（解析） 语法: v-html=“vue数据变量” v-text=“vue数据变量” <template> <div> <p v-html="str"></p> <p v-text="str"></p> </div> </template> <script> …
移动端项目经常要在线调试，引入vconsole插件，当生产环境出现故障需要查看接口或数据时，直接引入会影响用户使用，可以通过以下方法优雅地调出vconsole，又不影响正常用户使用。 //src/directives/index.js /** * @description: 动态引入脚本 * @return {*} */ const createScript = (url) => { ret…
目录 一、vue3与vue2的区别 1.响应式原理 2.启动方式 3.全局定义方法 4.tempmlate 根组件 5.生命周期 二、setup组合式api 1.setup 一、vue3与vue2的区别 1.响应式原理 vue2：响应式原理采用Object.defineProperties 监听对象的getter与setter vue3：pxoy代理的方式监听对象 2.启动方式 vue2: imp…
nextTick 什么时候用？ 出现的前提 修改数据时，视图不会即时更新； 这是因为vue采用的是异步更新策略； 修改数据后并不会立即更新dom，dom的更新是异步的。 什么是nextTick 官方文档解释： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 nextTick的使用场景 更改数据后，进行节点dom操作。 在created，moun…
写文章不容易，点个赞呗兄弟 专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本【2.5.17】 nextTick 是 Vue 中比较重要的一部分，源码独立而简短，稍作修改就可以拿出来为你的项目服务， 我已经有在项目中使用了 如果你觉得排版难看，请点击下面链接 【Vue原理】NextTick - 白话版mp.we…