vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等
vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)
-----------------------------------------------------------------------
回调函数就是一个参数,将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数。这个过程就叫做回调;
回调,回调,就是回头调用的意思。主函数的事先干完,回头再调用传进来的那个函数。
-----------------------------------------------------------------------
例子:
点击按钮获取数组中大于 18 的所有元素。
<button onclick="myFunction()" id="demo">点我</button>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
语法:
array.filter(function(currentValue,index,arr), thisValue)
filter() 不会对空数组进行检测。
filter() 不会改变原始数组。
-----------------------------------------------------------------------
vue计算属性(computed)会有缓存;调用的实际是属性的get方法;methods方法不会有;
-----------------------------------------------------------------------
数组置空问题
let arrayList = [] or arrayList.length = 0 ;//不是靠谱的做法;
this.arrayList.splice(0, this.arrayList.length);//首选
-----------------------------------------------------------------------
document.getElementById("xxx").focus(); //光标自动定位到当前文本框
-----------------------------------------------------------------------
vue父组件调用子组件的方法
<Father/>
<Child ref="myChild"/>
假如子组件Child里面有一个方法叫 getName(){...},
父组件调用形式为this.$refs.myChild.getName();
-----------------------------------------------------------------------
输入框限制只能输入小数点并且小数点后保留4位小数
oninput="value=value.replace(/[^\d\.]/g,'').replace(/^(\d*(\.\d{0,4})?).*/,'$1')"
-----------------------------------------------------------------------
拷贝数据
deepCopyData(data) {
return JSON.parse(JSON.stringify(data));
},
截去数组最后一条数据;
cutArrayLength(arr) {
return arr.slice(0, -1);
},
vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等的更多相关文章
- vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式
不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...
- vue+element ui项目总结点(二)table合计栏目,按照起始年份--截止年份 插入数据并向后追加数据以最后一条年份+1
1.oninput 事件在用户输入时触发; <template> <div class="test_box"> <p>hell,你好</p ...
- vue+element ui项目总结点(六)table编辑当前行、删除当前行、新增、合计操作
具体属性方法参考官方网站:http://element-cn.eleme.io/#/zh-CN/component/installation <template> <div clas ...
- vue+element ui项目总结点(五)Carousel 走马灯组件、Collapse 折叠面板、Tree 树形控件
<template> <div class="ele_test_box"> <!-- 常用效果 Popover 弹出框组件 具体属性查看官方文档--& ...
- vue+element ui项目总结点(三)富文本编辑器 vue-wangeditor
1.参考 https://www.npmjs.com/package/vue-wangeditor 使用该富文本编辑器 <template> <div class="egi ...
- vue 父组件调用子组件内置方法
背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...
- Vue 父组件调用子组件的方法
qwq 前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
随机推荐
- 【旧文章搬运】Win7可变对象头结构之InfoMask解析
原文发表于百度空间,2010-08-11========================================================================== 对Wind ...
- Linux Ctrl+Z的使用方法
假设你发现前台运行的一个程序需要很长的时间,但是需要干其他的事情,你就可以用 Ctrl-Z ,终止这个程序,然后可以看到系统提示: [1]+ Stopped /root/bin/rsync.sh 然后 ...
- 高级java工程师面试题-随笔
最近打算要换工作,也面试了几家,因为不是自己喜欢的所以拒了一些(当然也有人家不要我的.....).在面试的过程中发现对java高级程序员的考察基本上围绕知识面,知识深度两个方面来考察.下面是在面试过程 ...
- error:未定义的引用
用qtcreator编程的话,先在.pro文件中这样写: INCLUDEPATH += \ /usr/local/include/ LIBS += \ -L"/usr/local/lib&q ...
- 1、css选择器
一.CSS rgb颜色对照表:https://www.114la.com/other/rgb.htm 1.在标签上设置style属性 <!DOCTYPE html> <html la ...
- sql之视图、触发器、函数、存储过程、事务
视图 # 视图也是一张表,但在data文件里只有表结构,没有表数据 # 不建议使用,扩展性差,程序需改变时,依赖的视图也要改变 # 视图牵涉到多张表时,视图中的记录不能修改. create view ...
- c++中ctype常用函数总结(isprint isblank..)
1 判断是否是二十六得字母中其中之一 isalpha(); #include <stdio.h> #include <ctype.h> #include <iostrea ...
- yarn 基础
创建: 2019/04/06 安装 mac brew install yarn 升级 brew upgrade yarn 确认是否成功 yarn --version 初始化项目 yarn ini ...
- win7 mongod不是内部命令
1.下载MongoDB 1.1 MongoDB下载 1.2 选择Server下面的 Community 2.安装MongoDB 2.1 注意事项:一直下一步就行了,但是遇到下面这个界面,注意一定要去掉 ...
- [Xcode 实际操作]八、网络与多线程-(4)使用UIApplication对象发送短信
目录:[Swift]Xcode实际操作 本文将演示如何使用应用程序单例对象,发送短信的功能. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 注:需要使用真机进行测 ...