随笔分类 -  vue

$nextTick解决Vue组件卸载在加载合并的问题
摘要：情况是这样的，父子组件都是复选框，点击父组件的复选框，子组件的复选框要显示并全选，取消复选框，子组件隐藏。子组件显隐我用的 v-if ，使用created钩子函数来使子组件处于全选状态。 但是出现的问题就是点击父组件的第一个复选框，在点击第二个复选框，子组件并不会触发v-if,只是更新了数据。倒是没 阅读全文
posted @ 2021-03-05 10:23 张最棒 阅读(374) 评论(0) 推荐(1)
vue-router keep-alive
摘要：当点击一个路由跳转时，当前组件就会有一个生命周期，当组件不处于路由活跃状态时就会销毁（死亡），当点回来又会重新创建一个新的组件。 keep-alive是vue内置的一个组件。而router-view是router-view的内置组件 当router-view被包裹在keep-alive里面，当前组件 阅读全文
posted @ 2020-10-25 19:05 张最棒 阅读(1767) 评论(0) 推荐(0)
嵌套路由
摘要：例如在home页面中，通过/home/news和/home/message在home页面中访问news组件显示新闻，在home页面访问message组件访显示消息。 实现路由嵌套的两个步骤： 创建对应的子组件，并且在路由映射中配置对用的子路由 是组件内部使用<router-view>标签 阅读全文
posted @ 2020-06-10 08:08 张最棒 阅读(212) 评论(0) 推荐(0)
vue-router打包文件的解析和路由懒加载
摘要：在没有使用路由懒加载时，脚手架默认打包后的文件目录 从上面的目录结构看到，我们自己写的所有js代码都会放到app.js文件里，如果我们的组件很多，打包后的代码都放到app.js的代码非常大，一次从静态资源服务器请求下来需要花费一定的时间，容易出现电脑短暂空白现象。 如何避免这种情况呢？ 使用路由懒加 阅读全文
posted @ 2020-06-09 22:44 张最棒 阅读(1528) 评论(0) 推荐(1)
vue-router动态路由使用，路由参数传递的方式 $router 和 $route
摘要：传递参数的两种类型params和query 参数传递方式一params类型 ： 路由配置格式： 参数 传递方式二query类型： $router指向的是整个路由实例，而$route指向的是处于当前活跃状态的路由。 这两个属性都在this(this指向的是当前组件的vue实例)直接调用。每一个组件都有 阅读全文
posted @ 2020-06-09 22:12 张最棒 阅读(1616) 评论(0) 推荐(0)
通过router-link或代码进行路由跳转
摘要：router-link的属性 to:指定跳转路径 tag:指定router-link最终渲染成什么组件 ，默认渲染成<a> replace:replace不会留下history记录，指定replace后，不可以后退和前进，这里源码使用history.replaceState.而不加这个属性使用的是h 阅读全文
posted @ 2020-06-08 19:20 张最棒 阅读(1495) 评论(0) 推荐(0)
vue-router安装和配置方法
摘要：vue-router是vue.js官方的路由插件，里面组件和URL的映射关系由vue-router帮我们管理。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。 一：首先下载插件，当我们初始化项目时，有一个选项vue-router选项，我们选y,他就帮我们自动下载插件了。 如果没 阅读全文
posted @ 2020-06-08 08:30 张最棒 阅读(17483) 评论(0) 推荐(0)
前端渲染路由，后端渲染路由
摘要：什么是路由？ 路由是网络工程里面的术语，指通过互联网把信息从源地址传输到目的地址的活动。 打个比方，你的一个北京的朋友给你发送一条消息中间会经过很多个路由与转发。选择一个最佳路径，把消息通过一个个路由转发给你。 后端渲染和后端路由阶段： 在早期网页开发用类似于jsp/php等技术直接把渲染好的整个H 阅读全文
posted @ 2020-06-05 08:18 张最棒 阅读(580) 评论(0) 推荐(0)
vue-cli3与vue-cli2的区别和vue-cli 怎么修改配置
摘要：vue-cli3是基于webpack4打造，vue-cli2是基于webpack3 vue-cli3的设计原则是“0配置”，移除（隐藏）配置文件build和config等目录 vue-cli3提供了vue ui 命令，提供了可视化配置 vue-cli3移除了static文件夹，新增了public文件 阅读全文
posted @ 2020-06-05 01:00 张最棒 阅读(2765) 评论(0) 推荐(0)
runtime-compiler和runtime-only的区别
摘要：在我们使用脚手架vuecli初始化一个项目时，会让你选择是使用runtime-compiler和runtime-only. 这两者的我们发现他创建的main.js不一样。 在选择runtime-compiler vue的运行过程会将 template --解析--> 成抽象语法树（ast）--编译成 阅读全文
posted @ 2020-06-04 21:38 张最棒 阅读(789) 评论(0) 推荐(0)
webpack-dev-serve搭建本地服务器
摘要：webpack提供了一个本地服务器，这个服务器基于node.js搭建，内部使用express框架，可以实现我们想要浏览器自动刷新显示我们修改后的结果。 安装 npm install webpack-dev-server@2.9.3 --save-dev 修改配置 在webpack.config.js 阅读全文
posted @ 2020-06-03 07:23 张最棒 阅读(1075) 评论(0) 推荐(1)
webpack plugin
摘要：plugin是什么？ plugin是插件，通常适用于对某个现有的架构进行扩展 webpack中的插件，就是对webpack现有功能的各种扩展，例如打包优化，文件压缩等 loader和plugin的区别 loader主要用于对某些文件进行加载，转化某些类型文件 加载器，转换器 plugin是对webp 阅读全文
posted @ 2020-06-03 06:48 张最棒 阅读(139) 评论(0) 推荐(0)