vue实例相关
2024-10-15 08:45:14
第一种方法要比第二种更省事
if (!row.alert_at) return;
if(row.alert_at){
} else {
}
v-for="todo in list" // 任务 在 列表 (列表中的任务)
window自带的方法,里边的this向最外层的window
比如:
forEach(funtion(row, i){
})
setInterval(function(){
}, 1000)
var me = this //用me把this缓存一下
this.check_alerts(); //this指向实例
setInterval(function () {
console.log('this:', this); //this指向最外层 window,不是指向实例
}, 1000);
回调函数
//子组件触发
Event.$emit(name, params); //父级监听
Event.$on('remove', function (aa) { //回调函数,参数aa就是参数params
console.log('aa:', aa);
})
子组件不能直接操作父级的数据
只有父级来操作你,不能你操作父级,数据一定要单向流动。需要在子组件里边通过methods来告诉父级你想要干什么。
组件和组件间通信,或者组件和vue实例通信,在上边新建一个Event(事件调度中心)
var Event = new Vue();
Event.$emit(name, params); //把Event这个实例作为一个事件调度中心,把name触发($emit)出去,后边给一个params(传参)
Vue.component('task', {
template: '#task-tpl',
props: ['todo'],
methods: {
action: function (name, params) { //action:行为 name:行为的名称(你想干什么) params:行为的传参
Event.$emit(name, params);
}
}
})
Event里边的this要注意(作用域)
var me = this; //把this缓存一下 Event.$on('remove', function (id) {
if (id) {
me.remove(id);
}
})
<task :todo="todo"></task> Vue.component('task', {
template: '#task-tpl',
props: ['todo']
}); // 自定义组件task,他需要的数据是todo,通过 :(v-bind),把变量 todo 给他传进去 // <task a="1" :todo="todo"></task>,如果 "a" 在 props 里边不存在,vue不知道你在说什么,必须在props里边传了(["todo"]),他才会去解析
vue中数组的元素 修改 用vue.set()
this.list[index] = Object.assign({},this.current); //不行,vue检测不到
Vue.set(this.list, index, copy(this.current)); //可以,vue可以检测的到
Vue.set(this.list[i], 'complete', !this.list[i].completed); //可以,vue可以检测的到
{{todo.desc || '暂无详情'}} // || 否则(如果没有)
watch: 监控
watch: {
list: { //属性名称(监控对象) 每次当list发生变化的时候,自动执行handler函数
deep: true,
handler: function (n, o) { //handler:处理(用手段去处理)
if (n) {
ms.set('list', n);
} else {
ms.set('list', []);
}
}
}
}
some() 返回 判断
array.some( function(currentvalue){
return currentvalue == aa // return currentvalue.id == 11 (如果要查询的 对象 具有id属性)
}) //some 检测数组中的元素是否满足指定条件(函数提供),如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测,
//如果没有满足条件的元素,则返回false
//sonme 里边是个函数
//currentvalue参数 要查询的 对象 当前的 元素
var ages = [3, 10, 18, 20]; function checkAdult(age) {
return age >= 18;
} function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);
} //true
forEach() 迭代
array.forEach(function(currentValue, index){
this.value
})
//forEach 调用数组的每个元素,并将元素传递给回调函数。
//forEach 里边是个函数
//currentvalue参数 要查询的 对象 当前的 元素, index参数 当前元素的索引值
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p> <script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25]; function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script> //
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
find() 返回要寻找的元素
array.find( function(currentvalue){
return currentvalue == aa // return currentvalue.id == 11 (如果要查询的 对象 具有id属性)
}) //find 返回 传入一个测试条件(函数)符合条件的数组第一个元素
//find 里边是个函数
//currentvalue参数 要查询的 对象 当前的 元素
var ages = [3, 10, 18, 20]; function checkAdult(age) {
return age >= 18;
} function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
//18
findIndex() 返回要寻找的下标
var ages = [3, 10, 18, 20]; function checkAdult(age) {
return age >= 18;
} function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
} //
数组自带 index(数组元素的下标)
splice()
array.splice(index,howmany,item1,.....,itemX)
//index: 必需,从何处 添加/删除 数组, 该参数是开始 添加/删除 数组元素的下标
//howmany: 必需,应该删除多少元素,可以是0 (0的情况是添加)
//intemX: 可选,要添加到数据的 新元素
插入:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango
删除并插入
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi"); // Banana,Orange,Lemon,Kiwi,Mango
删除
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2); //Banana,Orange
computed \ methods 里边是(各种)函数,函数里边调用变量用this. computed 里边是 (各种)函数返回对象 实例中data是对象, 在组件中(在其他里边)data是函数返回对象
Object assign
Object.assign(target, ...sources)
克隆对象
var obj = {a: 1};
var copy = Object.assign({}, obj);
console.log(copy); // {a: 1};
合并对象
var o1 = {a: 1};
var o2 = {b: 2};
var o3 = {c: 3}; var obj = Object.assign(o1, o2, o3);
console.log(obj); //{a: 1, b: 2, c: 3}
console.log(o1); //{a: 1, b: 2, c: 3}, 目标对象被改变了
js中if条件为null/undefined/0/NaN/""表达式时,统统被解释为false,此外均为true
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
v-model:把当前这个input里边的值指到哪里
<input v-model="current.title" id="task-input" type="text">
JSON.stringify() 方法将 JavaScript对象 转换为 JSON字符串。
JSON.parse() 方法将 JSON字符串 转换为 JavaScript对象。
<p id="demo"></p> <script> var obj = { "name":"runoob", "alexa":10000, "site":"www.runoob.com"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON; </script> //运行结果:{"name":"runoob","alexa":10000,"site":"www.runoob.com"}
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
'{"name":"Google","site":"http://www.Google.com" },' +
'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj;
</script> //运行结果:[object Object] <p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"name":"菜鸟教程","site":"http://www.runoob.com" },' +
'{"name":"Google","site":"http://www.Google.com" },' +
'{"name":"Taobao","site":"http://www.taobao.com" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].name;
</script> //运行结果:Google
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML = person;
</script> //运行结果:[object Object] <p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML = person.firstName;
</script> //运行结果:John
最新文章
- php.h: No such file or directory
- kafka集群安装
- Keepalived+Redis高可用部署
- python 传递结构体指针到 c++ dll
- hdu 1542 Atlantis(线段树,扫描线)
- apache重写
- js 如何把JSON格式的字符串转换为JSON对象
- Web三维技术:Flash Builder+away3d平台搭建(含演示视频)
- script 两则
- 拖拽系列一、JavaScript实现简单的拖拽效果
- 微信授权登录(PHP)
- 关于<;form:select>;
- KVM 虚拟机 安装配置
- flex"
- redis的两种安装方法
- 配置成功java11后安装eclipse失败
- Comet OJ 热身赛(K题)principal(括号匹配问题+stack模拟)
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
- curator 分布式锁InterProcessMutex
- 关于Excel分析图插入到论文的问题
热门文章
- robotframework添加自定义的API,在Lib\site-packages路径下放入写好的py文件。
- linux防火墙开放和禁用指定端口
- 剑指offer——矩形覆盖
- AI 可视化
- HotSpot虚拟机对象探秘(对象创建,对象内存布局,对象访问定位)
- There is no action xxxFun defined for api controller api/subitem
- 第一部分牛刀小试:启动GDB开始调试
- 史上最全面的Elasticsearch使用指南
- @Vue/Cli 3 Invalid Host header 检测关闭
- 小记Java时间工具类