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)的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  4. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  5. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  6. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  9. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  10. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

随机推荐

  1. 如何使用JDK1.6 API

    如何使用JDK1.6 API-------https://jingyan.baidu.com/article/54b6b9c0e39a102d583b47d5.html  

  2. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  3. Javascript类型转换的规则全面&附有实例

    Javascript的变量是松散类型的,它可以存储Javascript支持的任何数据类型,其变量的类型可以在运行时被动态改变.请看示例: 1 2 3 var n = 10; n = "hel ...

  4. 网络编程基础:粘包现象、基于UDP协议的套接字

    粘包现象: 如上篇博客中最后的示例,客户端有个 phone.recv(2014) , 当服务端发送给客户端的数据大于1024个字节时, 多于1024的数据就会残留在管道中,下次客户端再给服务端发命令时 ...

  5. Codeforces 645C Enduring Exodus【二分】

    题目链接: http://codeforces.com/contest/645/problem/C 题意: 给定01串,将k头牛和农夫放进, 0表示可以放进,1表示不可放进,求农夫距离其牛的最大距离的 ...

  6. 2014ACM/ICPC亚洲区西安站现场赛 F color(二项式反演)

    题意:小球排成一排,从m种颜色中选取k种颜色给n个球上色,要求相邻的球的颜色不同,求可行的方案数,答案模1e9+7.T组数据,1<= n, m <= 1e9, 1 <= k < ...

  7. Java电商项目-5.内容管理cms系统

    目录 实现加载内容分类树功能 实现内容分类动态添加 删除内容分类节点 实现内容分类节点的分页显示 实现广告内容的添加 实现广告内容删除 实现广告内容编辑 到Github获取源码请点击此处 实现加载内容 ...

  8. Use Elasticksearch to solve TOP N issue

    The raw data is like timestamp, router, interface, src_ip, dst_ip, protocol, pkts 10000000, 1.1.1.1 ...

  9. samba服務器下文件夾chmod權限技巧

    需要的效果: samba下文件夹(abc)不可以被重命名.不可以被刪除,其所有子目录可读可写. 如何做到: chmod 777 -R abc   # -R 使得abc下所有数据继承可读可写权限 chm ...

  10. vi,vim的基本使用方法

    "i”插入 "/" 查找 "wq"保存退出 "q!"不保存退出