vue-js
文章平均质量分 59
yanhappyYY
深自缄默,如云淡薄。
展开
-
关于动态组件的一个小小的注意点:内存里的数据需要手动回收
通过动态组件加载进来的页面,内存是不会自动回收的,影响性能。<el-dialog class="childPage" title="" :visible.sync="dialogVisible" width="100%" height="100%"> <component v-bind:is="dialogPage"></component></el-dialog>动态组件切换时,子组件里面数据不会主动回收。所以要在关闭该页面的时候回收数据举个例原创 2021-08-03 10:25:36 · 272 阅读 · 0 评论 -
vuex 动态监听数据
需求:想要再子组件中监听父组件的动态数据变化解决方案//监听属性 computed: { dialogState() { // 数据变化能够实时监听 console.log("监听属性",store.getters.dialogState); return store.getters.dialogState; } }, //监控data中的数据变化 watch: { dialogState(){ // 方法体内第一次数据原创 2021-08-03 09:38:20 · 621 阅读 · 0 评论 -
【笔记】vue中引用了其他组件 (比如Bus.js),如何使this重新指向当前组件?
在引用组件中使this重新指向当前组件关于vue组件的其他通信方式<父子组件通信、兄弟组件通信(Bus方式、Vuex方式)>请看我另一篇文章 VueAwesomeSwiper轮播图组件存在同样问题在兄弟组件中采用Bus方式进行通信时: created() { Bus.$on("fromOther", function(data) { this.cur...原创 2018-03-26 20:21:16 · 3000 阅读 · 0 评论 -
在 VUE中,动态加载JS文件
需求在vue组件中需要调用的函数方法名是相同的(接口相同),但是按照页面不同需要导入不同JS文件 。如下:然而上面这种写法肯定是行不通的,但表达的需求很明确。根据menuId的不同从JS文件中获取方法解决方案promise方式: const menuId = store.getters.getMenuId; let circuitInit = menuId >...原创 2019-07-22 16:15:53 · 23235 阅读 · 4 评论 -
webpack按需加载js go-debug.js/go.js
项目中使用的go.js有两个版本,一个是开发版的go-debug.js和生产环境的go.js。debug版本会抛出警告和提醒,然而在生产环境中则不需要显示出来。在webpack.base.conf.js中配置 resolve: { alias: { 'gojs': process.env.NODE_ENV === 'production' ? path.resolve...原创 2019-02-14 15:44:07 · 636 阅读 · 0 评论 -
vue-cli 搭建scss环境
安装loadercnpm i node-sass sass-loader --save-dev配置loader - -> build/webpack.base.conf.js { test:/\.scss$/, loaders:["style","css","sass"] }style 中 lang = “scss”<st...原创 2019-01-14 14:41:57 · 310 阅读 · 0 评论 -
vue-cli webpack打包时背景图片、字体路径报错问题
解决方案: 使用相对路径,所有资源都从根目录向 dist/路径下找对应资源。添加该行代码: publicPath:"../../"报错信息客户端-生成代码分析因为 publicPath:’/’ 设置问题,都会从根目录dist往下找路径,所以当前为css的话就无法识别’/static/***’ 开头的路径因为html/js和图片资源处在同一目录,所以路径‘/st...原创 2018-11-12 17:24:50 · 594 阅读 · 0 评论 -
利用Node.js GET/POST请求响应axios/ajax测试
项目迁移vue,使用了vue推荐的axios请求方式。测试axios、ajax的异同html页面 - 引入jquery和ajax分别模拟了ajax/axios的get/post请求方式<body> <button onclick="axiosFn()">axios</button> <button onclick="ajaxFn...原创 2018-11-08 10:36:22 · 1107 阅读 · 0 评论 -
vue学习笔记-使用vue-cli脚手架快速创建vue项目工程
vue-cli脚手架制作 vue-cli是Vue.js 提供的官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。安装国内NPM镜像在用 Vue.js 构建大型应用时推荐使用 NPM 安装, NPM 能很好地和诸如 Webpack 或 Browseri原创 2017-09-04 09:29:03 · 438 阅读 · 0 评论 -
vue自定义指令实例--钩子函数及钩子函数参数
emmmm…..这次直接讲代码放到了Run.js上了。算是自己的笔记,当有不懂的时候可以翻阅。vue官网自定义指令 –地址个人代码:runjs 代码 –地址原创 2018-03-29 14:23:59 · 2251 阅读 · 3 评论 -
vue组件间的通信案例
组件间通信方式汇总父子组件间的通信方式父向子组件的通信方式// 在父组件中定义props数据,并绑定在子组件上<template> <div id="parent"> <input type="text" v-modal="parentMsg"/> <Child v-bind:parentMsg=原创 2018-03-27 21:16:08 · 523 阅读 · 0 评论 -
vue 生命周期
beforeCreate(){ alert("组件实例化之前执行的函数"); }, created(){ alert("组件实例化完毕,但页面未显示"); }, beforeMount(){ alert("组件挂载前,页面仍未展示,但是虚拟Dom已经配置"); }, mounted(){ alert("组件挂载,此方法执行后,页面显示");原创 2017-12-23 17:15:09 · 478 阅读 · 0 评论 -
vue-父子组件间的相互传值与传址
vue框架的最大的特点就是组件化,降低偶度,可多次调用,避免重复劳动。 所以父子组件中的数值传递则是必不可少的功能,下面是我的个人笔记。1.父往子传值:父组件data中定义prop数据父组件中通过v-bind:propName=”propName” 传入 value (”PropName”)2.子组件中通过 props:[“propName”] 接收传输的value 3.子组件中通过模版调用{原创 2017-12-23 15:31:15 · 3966 阅读 · 0 评论