vue
竹立荷塘
这个作者很懒,什么都没留下…
展开
-
axios query传数组参数的格式
axios query传数组参数的格式原创 2024-01-17 10:00:40 · 964 阅读 · 0 评论 -
vue中同时监听多个参数的实现
vue使用watch同时监听多个参数,其中有任意一个参数发生改变时,都会被监听到需要使用到计算属性computed与监听watch转载 2022-11-01 13:21:00 · 1842 阅读 · 0 评论 -
VUE 监听多个参数变化,用于多个条件任意一个变化触发事件
VUE 监听多个参数变化,用于多个条件任意一个变化触发事件转载 2022-11-01 13:14:47 · 704 阅读 · 0 评论 -
element-ui 输入框键盘回车事件导致页面刷新
element-ui 输入框键盘回车事件导致页面刷新的处理方法。转载 2022-09-29 13:31:55 · 2227 阅读 · 0 评论 -
vue手动定位textarea文本框的光标(将光标定位到内容的最后)
html <textarea ref="textarea" v-model.trim="content" />js const put = this.$refs.textarea const len = put.value.length this.setSelectionRange(put, len, len) setSelectionRange(input, selectionStart, selectionEnd) { i转载 2021-05-12 17:32:30 · 2296 阅读 · 0 评论 -
如何在VUE单页面引入CSS、JS(CDN链接)
可以有以下几个方法,关键看希望在什么环境下使用1. JS/CSS想在全局使用,可以通过npm 安装后在main.js中引入,或在index.html中引入,这种大多不必说2. 想在单页面使用,而又不想通npm安装,那个可以通过创建一个component的方式来引入,如下<template> <div id="baseReport" > <remote-css href="https://cdn.bootcss.com/twitter-bootstrap/4.2原创 2021-05-12 13:18:05 · 1871 阅读 · 4 评论 -
vue 组件内引入外部在线js、css
一、css:<style scoped> @import 'https://unpkg.com/[email protected]/lib/theme-chalk/index.css';</style>二、js:第一种方式:利用Vue的mounted生命周期mounted() { const oScript = document.createElement('script'); oScript.type = 'text/javascript原创 2021-05-10 16:29:26 · 7007 阅读 · 0 评论 -
Vue子路由怎么调用父路由中的方法和参数
问题:Vue中子路由怎么去调用父路由的方法和参数思路:直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法。具体实现:直接贴入自己的测试页面就能看见效果了.<div id="app"> <router-link to="/son" tag="div"></router-link> <router-view></router-vi转载 2021-05-10 10:37:39 · 3010 阅读 · 0 评论 -
vue父路由调用子路由方法
父路由.vue合理运用ref属性<template> <div> <router-view ref="Childmain"/> </div></template><script> created(){ this.$refs['Childmain'].childe() }</script>调用时可能会出现报错,没猜错的话报错原因是子路由还未加载,这.转载 2021-05-10 10:34:52 · 2396 阅读 · 1 评论 -
Vue中子路由怎么调用父路由中的方法和参数
一、实现方式:直接在子路由的范围内使用this.$parent.xx即可调用对应父亲路由的参数。 使用this.$parent.xx()即可调用对应父亲路由的方法二、测试代码:父页面:<template> <div class="parent-demo"> <div>这是父页面</div> <router-view></router-view> </div></templat原创 2021-04-22 16:16:09 · 4834 阅读 · 3 评论 -
20. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端周报管理页面(主页面和详情页面)
接下来主要是周报管理页面的主页面 Weekly.vue 和详情页面WeeklyDetail.vue。一、Weekly.vue(周报管理主页面)1.1 Weekly.vue 页面html部分:<template> <div class="weekly-wrap"> <!-- 搜索框 start --> <el-form class="main-search" :inline="true" :model="keywords" ref=.原创 2020-09-27 17:42:45 · 1560 阅读 · 3 评论 -
19. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端周报管理页面(新增和编辑)
然后我们开始编写此系统的用户管理页面,这个页面分为四个大部分,主要的周报管理页面,周报详情页面、新增周报页面和编辑周报页面。我们先来看一下新增周报页面 WeeklyAdd.vue和编辑周报页面WeeklyEdit.vue。一、WeeklyAdd.vue(新增周报页面)1.1WeeklyAdd.vue 页面html部分:<template> <div class="weekly-main-wrap weekly-add-wrap"> <h3 cl..原创 2020-09-27 17:34:59 · 1386 阅读 · 0 评论 -
18. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端用户管理页面
接下来我们开始编写此系统的用户管理页面,这个页面分为一个大部分两个小部分,即一个主要的用户管理页面,新增用户弹窗和编辑用户弹窗。需要我们创建一个User.vue(主要的用户管理页面),User下的Add.vue(新增用户弹窗)、Edit.vue(编辑用户弹窗)。一、Add.vue(新增用户弹窗)1.1 Add.vue 页面html部分:<template> <el-dialog title="新增管理员" :visible.sync="showFlag" custom-c原创 2020-09-27 17:04:15 · 2408 阅读 · 0 评论 -
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在src\views目录下创建主页面Home.vue。一、Home.vue 页面1.1 Home.vue 页面html部分:<template> <el-container class="home-wrap"> <!-- header start --> <el-header class="flex"> <div class="logo flex-item"><i clas.原创 2020-09-27 16:53:08 · 1703 阅读 · 0 评论 -
16. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端登录页面
接下来开始前端页面编写,在src\views目录下创建登录页面Login.vue和主页面Home.vue。一、Login.vue 页面1.1 Login.vue 页面html部分:<template> <div class="login-container"> <el-form class="login-main sub-center-center" :model="formData" :rules="formRules" ref="formData"原创 2020-09-27 16:49:58 · 1211 阅读 · 1 评论 -
element-ui 表单 form 回车 enter 触发查询,并禁止在输入框中按回车键会刷新页面
element-ui 表单 form 回车 enter 触发查询在 el-form 上添加 @keyup.enter.native="onQuery"vue+elementUI在输入框中按回车键会刷新页面的问题原因:参考element-ui文档:W3C 标准中有如下规定:When there is only one single-line text input field in a form, the user agent should accept Enter in ...原创 2020-08-18 14:08:01 · 7634 阅读 · 0 评论 -
Vue - 列表渲染(Template v-for)
如同 v-if 模板,你也可以用带有v-for的<template>标签来渲染多个元素块。例如:<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider"></li> </template></ul>...原创 2020-08-13 17:33:09 · 4869 阅读 · 0 评论 -
vue对象或者数组中数据变化但是视图没有更新
由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。但是我们还是有一些办法来回避这些限制并保证它们的响应性。一、对于对象Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如:var vm = new Vue({ data:{ a:1 }})// `vm.a` 是响应式的vm.b原创 2020-05-26 18:06:43 · 2655 阅读 · 0 评论