vue学习笔记(1)
1.检测变化
<ul>
<li v-for="item in list">{{item}}</li>
</ul> <script>
export default {
name: 'myComponent',
data() {
return {
list: [1, 2, 3, 4, 5]
}
},
mounted() {
let _self = this;
setTimeout(function() {
_self.list[4] = 6;
});
}
}
</script> 预期渲染后:
.1
.2
.3
.4
.6
实际:
.1
.2
.3
.4
.5
如何使变化能够被检测到?
// 更新数组
Vue.set(this.list, indexOfItem, newValue); // 给对象添加一个新的属性
Vue.set(this.object, 'name', 'Tom');
组件间通信
1.父子组件通信
(1).父传给子组件
pass props
父组件:
<template>
<parent>
<child :list="list"></child> //在这里绑定list对象
</parent>
</template>
import child from 'child.vue';
export default{
components:{child},
data(){
return {
//父组件的数据绑定到子组件的包裹层上
list:["haha","hehe","xixi"];
}
}
子组件 child.vue:(子组件要嵌套到父组件中)
<template>
<ul>
<li v-for="(item ,index)in list">{{item}}</li>
</ul>
</template>
export default{
props:{
list:{
type:Array,//type为Array,default为函数
default(){
return [
"hahaxixihehe"//默认初始值
]}}
},//用props属性进行传数据,此时子组件已经获取到list的数据了
data(){
return {}
}
}
(2).由上面可见,props数据流是单向的。父组件属性更新时,将会传递给子组件,反过来则是不可以的。
子传父
Emit events Parent
{
name: "parent",
template: '<div><span>Parent</span><child v-on:alarm="alarmHandler"></child></div>',
methods: {
alarmHandler() {
alert('Alarm!');
}
}
} Child
{
name: "child",
template: '<div>Child</div>',
mounted() {
let _self = this;
setTimeout(function(){
// 发出事件
_self.$emit('alarm');
}, 2000);
}
} 父组件监听子组件的事件,当子组件发出事件时,父组件处理。由此完成子组件向父组件传递信息的过程。
直接操作子组件(通过ref属性可以直接访问子组件)
Parent
{
name: "parent",
template: '<div><span>Parent</span><child ref="childComponent"></child></div>',
mounted() {
let child = this.$refs.childComponent;
}
} Child
{
name: "child",
template: '<div>Child</div>',
data() {
return {
id: 1
}
},
methods: {
childFunc() {}
}
}
非父子组件的通信(事件总线)
Event bus var eventBus = new vue(); //在A组件发送事件
eventBus.$emit('msgChanged'); //在B组件监听发送的事件
eventBus.$on('msgChanged',function(){
//do something...
})
vue学习笔记(1)的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
随机推荐
- 经典算法入门 列表C/C++
排序:插入排序.选择排序.冒泡排序.归并排序.快速排序.基数排序.计数排序.桶排序 查找:二分查找 树:先根.中根.后跟遍历 图:深度优先.广度优先.最小生成树.单元最短路径.全成对最短路径 动态规划 ...
- myeclipse通过数据表生成jpa或hibernate实体---https://blog.csdn.net/partner4java/article/details/8560289
myeclipse通过数据表生成jpa或hibernate实体-----https://blog.csdn.net/partner4java/article/details/8560289
- Amoeba新版本MYSQL读写分离配置
标签:mysql 数据库 读写分离 休闲 amoeba 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://skyson.blog.5 ...
- js判断对象是否为空对象的几种方法
1.将json对象转化为json字符串,再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{ ...
- bat初学
今天在重置某工具软件试用期时(汗,盗版可耻=_=!,鄙视自己一下),实在懒得每次过了试用期再点开注册表,手工删除了,就想着写个脚本执行一下,这里就想起来了bat文件. 首先介绍一下for循环,从百度知 ...
- POJ 3518 (后缀自动机)
POJ 3518 Boring Problem : 给一个串S,询问串S有多个子串出现至少两次且位置不重叠. Solution : 对S串建立后缀自动机,再建立后缀树,dfs一遍统计处每个结点的子树中 ...
- PatentTips – EMC Virtual File System
BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention generally relates to net ...
- LINUX 内核结构
http://blog.csdn.net/hguisu/article/details/6122513 http://blog.csdn.net/hguisu/article/category/796 ...
- io计算
http://www.cnblogs.com/yalong_xiang/archive/2011/11/15/2249530.html ぬ儱←OWEN★ windows下如何查看磁盘IO性能 复制 ...
- SVN的配置与使用方法
1.所选服务器安装包:VisualSVN-Server-2.1.3.msi. 2.客户端安装包:TortoiseSVN-1.6.2.16344-win32-svn-1.6.2.msi 一.服务器的安装 ...