分类：Vue

2020
10-10

vue 监听 Treeselect 选择项的改变操作

vue 监听 Treeselect 选择项的改变操作 项目中使用Treeselect时，需要获取选项的变化从而触发别的事件，所以需要监听Treeselect所选择的值。我使用了watch来监听treeselect绑定的model，如果model的值发生变化就触发currDeptChange事件。<el-form-itemprop="deptId":label="$t('deviceManage.device.table.deptId')+':'"><treeselect:options="deptTree":normalizer="normalizer"v-model="formData.deptId":p... 继续阅读 >
2020
10-10

vue组件中实现嵌套子组件案例

vue组件中实现嵌套子组件案例 如何把一个子组件comment.vue放到一个组件中去1、先创建一个单独的comment.vue组件模板<template><divclass="cmt-container"><h3>发表评论</h3><hr><textareaplaceholder="请输入要BB的内容（最多吐槽120字）"maxlength="120"></textarea><mt-buttontype="primary"size="large">发表评论</mt-button><divclass="cmt-list"><divclass="cmt-item"><divclass="cmt-title">第... 继续阅读 >
2020
10-10

vue 项目中当访问路由不存在的时候默认访问404页面操作

vue 项目中当访问路由不存在的时候默认访问404页面操作 前言：在Vue项目中，当访问的页面路由不存在或错误时，页面显示为一片空白。然而，通常我们需要对访问url不存在或者错误的情况下添加默认的404页面，即notfound页面。一般的处理方法是：在最后添加一个path:*，优先级从上到下查找路由，都没有的时候全部指向404页面，代码如下：constbaseRoute=[{path:'/login',name:'login',component:Login},{path:'/',redirect:'/index',component:Layout,name:'dashbo... 继续阅读 >
2020
10-10

详解vue v-model

1.v-model原理vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分：通过props设置子组件的状态通过监听子组件发出的事件改变父组件的状态，从而影响子组件的props值通过以上两个部分，实现了父组件的状态和子组件状态进行了绑定的效果。1.1demov-model使用示例<!DOCTYPEhtml><html><head><meta... 继续阅读 >
2020
10-10

vue路由结构可设一层方便动态添加路由操作

vue路由结构可设一层方便动态添加路由操作 动态添加路由基本功能letroutes=[{path:'/login',name:'login',component:()=>import('../components/Login.vue')}]this.$router.addRoutes(routes)涉及多层路由嵌套如图单纯使用addRoutes层级结构不同修改路由结构例：{name:'account',path:'/account/account',meta:{title:'个人中心',requireAuth:true},component:account,children:[{name:'account'... 继续阅读 >
2020
10-10

vue elementui tree 任意级别拖拽功能代码

我的是根据父级id做的一些判断<el-treedraggable:allow-drop="allowDrop"@node-drop="sort"accordionstyle="font-size:14px;width:250px;"ref="tree":data="catalogList":props="defaultProps":expand-on-click-node="false"node-key="id":highlight-current="true":load="loadNode"lazy:render-content="renderContent"@node-click="handleNodeClick"empty-text="暂无数据">allowDro... 继续阅读 >
2020
10-10

Vue循环中多个input绑定指定v-model实例

Vue循环中多个input绑定指定v-model实例 Vue.js中提供了v-model可以双向绑定表单元素,这个方法可以非常方便的获得输入的值,但是有时候表单元素需要循环生成,在循环中要怎样获得指定输入框的值呢这里介绍两种：一种是v-for中循环生成的输入框,一种是在element-table中生成的输入框在循环中只要给定的v-model不一致就可以为输入框分别绑定,在循环中index每一项都是不一样的,你也可以使用字符拼接的方式,设置v-model对应的值为input1,input2..类似这样的,这样就可以通过绑定... 继续阅读 >
2020
10-10

浅析 Vue 3.0 的组装式 API（一）

（一）响应式数据1.简单例子从最简单的数据绑定开始，在Vue2.0中，我们这样将一个数据绑定到模板的指定位置：在组件创建参数的data构造函数中返回一个用来绑定的数据对象，其中有个now字段，会被渲染到模板内的.app>p内。<template><divclass="app"><h1>Helloworld!</h1><p>Nowis:{{now.toString()}}</p></div></template><script>//Vue2.0exportdefault{data(){return{now:newDa... 继续阅读 >
2020
10-10

vue中v-model对select的绑定操作

vue中v-model对select的绑定操作 1、单选时<selectv-model="selected"><optiondisabledvalue="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected:{{selected}}</span>data:{selected:''}如果v-model表达式的value初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。在iOS中，这会使用户无法选择第一个选项。因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样... 继续阅读 >
2020
10-10

Vue v-for中的 input 或 select的值发生改变时触发事件操作

Vue v-for中的 input 或 select的值发生改变时触发事件操作 oninput用法<inputtype="text"id="myInput"oninput="myFunction()"><script>functionmyFunction(){}</script>oninput如果需要在Vue中使用则需要写成v-on:input还有绑定id的时候这样写:id="'m_num'+index"注意m_num必须用单引号引起来<inputtype="number":id="'m_num'+index"v-on:input="jsMoney(index)">jsMoney方法jsMoney:function(index){$("#m_num"+index).val()}onchange：input中的文本修改后在input... 继续阅读 >
2020
10-10

vue绑定数字类型 value为数字的实例

直接加:<el-selectv-model="searchData.status"filterableplaceholder="请选择"@change="gamefilter"class="mr40"><el-optionlabel="开启":value='0'></el-option><el-optionlabel="关闭":value='1'></el-option><!--<el-optionlabel="关闭":value='1'>--></el-select>补充知识：vue中input，select标签中v-model绑定的值为数字类型情形背景：vue表单中的input标签v-model绑定的值，默认情况下是自... 继续阅读 >
2020
10-10

详解vue组件之间的通信

说明：下面我总结了比较常用的vue组件之前通信的方式，最近准备面试，所以有些总结贴上来分享props和$emit只有父子关系才可以用这种方式，父组件向子组件传递参数用props，子向父传递使用触发$emit自定义事件1.props<!--parent.vue,可以传递`静态`的props和`动态`的props,静态的参数只能是个String类型的，如果是其他类型的一定要记得加`:`来表示这是一个js表达式而不是一个字符串--><Child:name="name":age="18"address=... 继续阅读 >
2020
10-10

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。使用Vue+ElementUI，构建出最基本的树如下图所示：现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图... 继续阅读 >
2020
10-10

Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能：下拉菜单输入过滤框以CSS样式为主，也会涉及到Vue组件和element组件的使用。对于没有层级的数据，我们可以使用表格或卡片来展示。要展示或建立层级关系，就一定会用到树形组件了。使用Vue+ElementUI，构建出最基本的树如下图所示：现在我们就要在这个基础上进行改造，使页面更加符合我们的交互场景。下拉菜单将下拉菜单嵌到树节点中，使操作更加简便、紧凑。效果演示效果如图... 继续阅读 >
2020
10-10

vue自定义指令和动态路由实现权限控制

功能概述：根据后端返回接口，实现路由动态显示实现按钮（HTML元素）级别权限控制涉及知识点：路由守卫Vuex使用Vue自定义指令导航守卫前端工程采用Github开源项目Vue-element-admin作为模板，该项目地址：Github|Vue-element-admin。在Vue-element-admin模板项目的src/permission.js文件中，给出了路由守卫、加载动态路由的实现方案，在实现了基于不同角色加载动态路由的功能。我们只需要稍作改动，就能将基于角... 继续阅读 >
2020
10-10

vue 动态给每个页面添加title、关键词和描述的方法

前言：直接写html加title和关键词想必大家都知道怎么去加，但用vue框架开发的项目我们怎么去动态的给每个页面添加呢↓先在router.js里面配置我们的title、关键词和描述{path:'/train',name:'Train',component:()=>import('../components/page/Train.vue'),meta:{title:'教师培训-恩启官网',content:{keywords:'教师培训、恩启培训、恩启云课堂、特教老师、线上服务、徐紫薇、王学钢',description:... 继续阅读 >