vue相关
大小都是愁
这个作者很懒,什么都没留下…
展开
-
element-ui懒加载树形表格,展开箭头未显示问题
element-ui懒加载树形表格,展开箭头未显示问题el-table箭头无法显示原创 2022-11-28 15:05:20 · 3154 阅读 · 3 评论 -
forEach for 终止 循环
forEach终止循环原创 2022-10-11 10:17:23 · 128 阅读 · 0 评论 -
v-if与perssimion结合实现权限控制
v-if 与 permission结合原创 2022-06-09 15:48:30 · 619 阅读 · 0 评论 -
vue-element-admin 按钮权限解读
v-permisson详解原创 2022-06-09 15:30:33 · 1011 阅读 · 0 评论 -
Vue子组件调用父组件的方法
法一:直接在子组件中通过this.$parent.event来调用父组件的方法// 父组件<template><div><child></child></div></template><script> ... methods: { fatherMethod() { ...原创 2020-03-27 00:12:25 · 5626 阅读 · 0 评论 -
tslint 报错——for (… in …) statements must be filtered with an if statement
使用Tslint时,for in循环出现了这个提示这是由于使用 for in 循环遍历对象的属性时,对象的属性以及原型链上的所有属性都将被访问解决方案法一: for (const key in e.list) { if (e.list.hasOwnProperty(key)) { // 逻辑处理 } }原理:迭...原创 2020-03-26 23:34:53 · 2460 阅读 · 0 评论 -
vue--directive自定义指令
概述:对底层DOM操作时,用自定义指令1、自定义指令.了解指令的组成部分.全局注册 Vue.directive('指令名’,{ 钩子函数 });局部注册directives:{指令名:{} }.使用时,用v-指令名.钩子函数 bind(){} //只调用一次,指令第一次绑定到元素时调用 inserted(){} ...原创 2018-04-04 13:52:21 · 864 阅读 · 0 评论 -
小例--vue下拉框
需求:1.点击按钮出现下拉框2.点击页面除下拉框意外的空白地方,下拉框消失需要:1.注意不能重复绑定点击事件2.getEventListeners(node),只能在谷歌控制台用//查看使用addEventListener绑定的监听器功能1.操作原生dom,用自定义指令2.未雨绸缪,应做好回收处理,以防元素被移除而导致多次绑定监听事件不回收会反复绑定,如下图3.点击select选项时,下拉框不消失...原创 2018-04-04 19:13:07 · 4830 阅读 · 0 评论 -
小例--vue封装一个model框
需求:1. 定制数据: title 、okValue 、 cancelValue 2. 关心内部事件:点击了ok、点击了cancel 3. 定制结构:header、content、footer需要: 1. Prop 允许外部环境传递数据给组件 2. emit,事件允许从组件内触发外部环境的副作用; 3. slot插槽允许外部环境将额外的内容组合在组件中。知识点1.组件的双向...原创 2018-04-04 19:26:30 · 1785 阅读 · 0 评论 -
小例--cli实现的todolist
知识点:1. ./是相对路径;@/是src目录下的2.组件标签用烤串命名;组件模板只能有一个顶级元素3.slice() 方法会选取从 start 到end(默认数组结尾)数组的所有元素思路:1.分成三各组件,listHeader.vue,listContent.vue,listFooter.vue2.公共css直接引入;也可以处理后再引入3.父子组件通信流程:传参~接收~使用4.兄弟组件通信流程:...原创 2018-04-12 11:00:58 · 593 阅读 · 0 评论 -
小例--vue的todolist
知识点1.v-on事件.keyup,从特定键触发时才触发回调,可以通过键别名或代码绑定;<!-- 键修饰符,键别名 --><input @keyup.enter="onEnter"><!-- 键修饰符,键代码 --><input @keyup.13="onEnter">.dblclick//双击时触发.blur//失焦时触发2.computed取值g...原创 2018-04-12 11:25:17 · 862 阅读 · 0 评论 -
vuex热身
概述:狭义~是所有组件都能访问到的一个对象;广义~状态管理模式适用情况:1.多个组件公用一个数据;2.多个组件更改同一个数特点:专为 Vue.js 应用程序开发的 状态管理模式 采用集中式存储管理应用的所有组件的状态 以相应的规则保证状态以一种可预测的方式发生变化使用步骤:1.安装模块到生产依赖中 。 npm install vuex --save 2....原创 2018-04-13 16:37:32 · 165 阅读 · 0 评论 -
vue-router热身
概述:通过管理url,实现url和组件一一映射,常用于单页应用单页面应用优点:前后端分离;减少服务器压力;用户体验好,不需要重新加载整个页面单页面应用缺点:1.不利于SEO;2.第一次加载缓慢可能出现白屏(解决:ssr,在服务端渲染并使用)使用流程:类似vuex,1.npm安装npm install vue-router --save2.src下新建文件夹router/index.js,并impo...原创 2018-04-13 17:10:32 · 210 阅读 · 0 评论 -
vue-router--重定redirect
重定向通过 routes 配置来完成1.直接写。访问/a 重定向到 /b2.写成对象的方式。访问/a时重定向到/b?c=13.写成函数的方式。如果访问/a跳到/,访问/b跳到/about)根据访问路径的不同,或者一些参数的不同,可以重定向到指定的路径to是个对象,称之为路由信息对象...原创 2018-04-13 19:08:11 · 5405 阅读 · 0 评论 -
vue --多组件通信
概述:组件之间不能跨级通信1.可以通过子组件emit发布订阅事件,父组件监听事件进行通信。一级一级传,发布接收,发布接收2.利用事件总线 (实际上就是发布全局订阅事件)3.利用Vuex...原创 2018-04-03 17:38:19 · 246 阅读 · 0 评论 -
vue--组件双向绑定
概述:组件通信通过props,props默认单向绑定(父->子),除了发布订阅事件,另一个通信的方法双向绑定(父->子,子->父)1.用 .sync(同步)修饰符.对要双向绑定的属性用 .sync(同步)修饰符.用.$emit发布一个update的事件.本质是一个包装过的语法糖2.用v-model,更方便 .props接收,用value(固定,可以自定义)来接受v-model的...原创 2018-04-03 17:29:19 · 262 阅读 · 0 评论 -
vue--组件热身
1.流程:创建组件构造器》注册组件》使用组件.第二个参数直接提供一个对象,内部会帮你调用Vue.extend().组件的选项对象没有el属性.组件中的data必须是一个函数,函数中返回一个新对象,防止组件引用同一个对象.全局组件Vue.component(),局部组件{components:{组件id:实例构造器 | 对象}}.组件只能有一个顶级元素2.命名规则:.可以使用烤串命名法 a-b-c....原创 2018-04-03 17:08:47 · 148 阅读 · 0 评论 -
小例~VUE音乐盒
知识点1.数据劫持:取值时触发getter函数;设置值的时候触发setter函数2、计算属性computed默认属性就是getter3、.filter()//筛选集合中满足条件的元素,在组成新集合 .every()//集合中每一项都要满足条件,才返回true .some()//集合中只要有一个满足条件,返回true .reduce()//累加器的作用 ,可设定初始值 ...原创 2018-03-15 16:24:31 · 339 阅读 · 0 评论 -
笔记~vue2实现的购物车(未完待续)
.准备前的工作1.导入vue文件.直接官网下载.npm(npm更多可能链接到国外,建议使用cnpm(淘宝团队提供的径向))2、任何前端项目要先初始化一个package文件,npm init;安装依赖的插件3、一个完整的vue实例.可借鉴小思路.方法说明/差别说明1.vue2中拿到索引的方法(vue1直接通过$index就可以引用)2.vue2的生命周期mounted函数不能保证实例已插入文档,所以...原创 2018-03-05 19:15:54 · 888 阅读 · 0 评论 -
vue--响应式原理
概述:当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。属性默认的特性:可删除,可遍历,可改写如何更改属性的默认特...原创 2018-04-08 18:49:37 · 1289 阅读 · 0 评论 -
vue--数组的变异方法
push()、pop()、shift()、unshift()、splice()、sort()、reverse()EG.变异push()VS原生Array.prototype.pushvue对可以改变原数组的方法【push()、pop()、shift()、unshift()、splice()、sort()、reverse()】进行了改写,以保证数组变化触发响应式可以尽量转换成上面提到的变异方法,或者...原创 2018-04-08 18:58:18 · 1687 阅读 · 0 评论 -
小例~vue商品筛选
知识点1.如果没有定义某个属性,那么就不能检测属性的变化,需要使用set设置对象的属性.Vue.set( target, key, value )//构造函数的静态方法.vm.$set( target, key, value )//实例上的方法.设置对象不能是 Vue 实例,或者 Vue 实例的根数据对象.虽然不可以定义某个属性,但是可以改写整个对象,如果原有对象有属性,可通过...或object...原创 2018-03-26 15:33:41 · 5333 阅读 · 16 评论 -
vue--生命周期函数
挂载阶段 beforeCreate//数据劫持之前被调用,无法访问methods,data,computed上的方法或数据 created//实例创建完成后被调用,未挂载$el 属性不可见,一般在这里发送ajax请求 beforeMount//在挂载开始之前被调用 mounted//挂载完成,一般在这里操作dom 更新阶段 beforeUpdate...原创 2018-04-09 13:57:34 · 1685 阅读 · 0 评论 -
vue--key值的特殊用处
数组的v-foritem in itemsitem of itemsitem,index in items(item,index) in items 对象的v-for(键值,键名,索引)value in object(value, key) in object(value, key, index) in objectv-for渲染的列表的结构采用“就地复用”的策略,也就说当数据重新排列数...原创 2018-04-09 14:10:06 · 11225 阅读 · 1 评论 -
vue--is特性(限制元素&动态组件)
概述:像 <ul>、<ol>、<table>、<select> 里只允许包含指定的元素,像 <option> 这样的元素只能出现在某些特定元素的内部;当模板标签使用在这些有限制性的元素中时,载入前组件还未解析,当前元素发现非指定元素会有排斥反应eg1:问题:table不识别custom标签,排斥解决:is特性,扩展原生HTML元素,cus...原创 2018-04-09 14:19:08 · 5139 阅读 · 0 评论 -
vue--keep-alive保存组件的状态
概述:动态组件的切换过程中走的改变:切换走了->会销毁;切回来->重新构建(渲染)一次;所以组件状态不会保留1.保留组件的状态,用keep-alive(模拟场景注册流程中的下一步下一步) . 把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染 .include - 字符串或正则表达式。只有匹配的组件会被缓存。 .exclude - 字符串或正则表达式。任何匹配的组件都不...原创 2018-04-09 14:56:35 · 2293 阅读 · 0 评论 -
vue-cli--项目目录及文件解析
|-- build // 项目构建(webpack)相关代码| |-- build.js // 生产环境构建代码| |-- check-version.js // 检查node、npm等版本| |-- dev-client.js // 热重载相关| |-- dev-server.js ...原创 2018-04-09 16:34:41 · 586 阅读 · 0 评论 -
vue-cli--组件的导入与使用
概述:一个文件就是一个模块,需要引入模块,和暴露模块的方法在一个组件中使用另一个组件三部曲:引入组件、注册组件、使用组件1.main.js文件解读.是整个项目的入口文件,在src文件夹下.import(es6)引入vue和根组件app.vue.最后new Vue,启动应用2、组件的使用.定义的组件一般放到components目录下.用一个组件的过程a .被引用的文件暴露对象(如果组件中没有scri...原创 2018-04-10 16:25:18 · 1340 阅读 · 0 评论 -
vue--slot插槽
功能:父组件需要在子组件内放一些DOM,那么这些DOM是显示/不显示/在哪个地方显示/如何显示?定制结构,用slot!. 默认插槽,没有名字就是默认,只能有一个. 多个插槽,通过取名字name='XX',给指定的slot='XX'插槽替换指定内容,不能重名.作用域插槽,默认都是使用父组件数据,如果想用子组件的数据,通过slot-scope=‘props’,将数据传递到插槽...原创 2018-04-03 15:45:56 · 870 阅读 · 0 评论 -
vue--props组件通信
1.父组件向子组件通信(传递数据),用props.传参,接收,使用.传参时,写成key='value'的形式,key自定义;.传参时,如果用烤串命名法传参,那props需要用驼峰命名接收 ;.传参时,value需要动态绑定数据要加上v-bind;.接收时,使用传参时定义的key接收,可以是数组;也可以是对象,加上各种验证(可以自定义)eg type//验证类型 renquired//...原创 2018-04-03 16:56:04 · 238 阅读 · 0 评论 -
vue-cli--项目的构建
1、node.js安装 https://nodejs.org/en/download/ .msi方便以后npm的使用 .命令行中输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node2、安装vue-cli npm install -g vue-cli .-g代表全局安装.命令行中输入vue -V检测你是否安装了vue-cli和版本情况。出现版本...原创 2016-06-21 16:24:20 · 12926 阅读 · 1 评论