Vue学习之不同组件之间的消息传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<!-- watch监听——只能监听包含在watch中 定义 的变量
watch: {
msg: function (){
//打印日志
console.log()
}
}
computed能监听在computed中所使用的所有变量
computed: {
msg1: function() {
return
}
}
使用场景介绍，watch（一个变量/常量/数组，异步场景），computed（数据联动）
如何进行拆分
1、不超过300行
2、复用
组件化带来的问题：
1、组件状态管理（vuex）
2、多组件的混合使用，多页面，复杂业务（vue-router）
3、组件间的传参、消息、事件管理（props，emit/on,bus）
vue代码风格
1、好习惯，少走坑
2、写出自己看得懂的代码
3、写出别人看得懂的代码
vue-router
1、<router-link to="/info"></router-link> 去连接到组件
2、在router.js中定义组件
import Info from './views/Info.vue';
{
path:'/info',
name:'info',
component:Info,
}
3、自己去定义组件
<template>
<div></div>
</template>
<script>
</script>
<style scoped>
</style>
vuex
1、单项数据流概念
2、store.js
{
//组件的状态
state: {
},
//改变状态的方法集
mutations: {
},
actions: {
}
}
https://www.imooc.com/video/18564
vue调式方法,浏览器检查元素进入到console
1、console.log()
2、alert('sd')
3、debugger //程序会运行到这里停止
#### 开发工作流
+ 需求调研（确定需求）
+ 交互设计、逻辑设计、接口设计
+ 代码实现（1/3的时间）、测试运行（1/10）、线上部署
git简介
//创建空的仓库，查看本地/远程分支的
git status
//查看分支的情况
git branch -a
//创建新分支用于开发，名叫dev
git checkout -b dev
//把dev分支合并到master
//首先切换到master
git check master
git merge dev
//删除本地分支
git branch -D dev
//删除远程分支
git push origin :dev
//版本回退
git reset --hard head^
//查看log
git reflog
//回退到制定版本
git reset --hard reglog的id
打包部署
cd 目录
npm build 自动打包，运行完形成dist文件夹，把此文件夹放到服务器就可以访问了
-->
<!-- 此为父组件模板 -->
<div id="root">
<div>
<input v-model="inputValue" />
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
//子组件
Vue.component('todo-item', {
props:['content','index'],
template: '<li @click="handleClick">{{content}}</li>',
methods:{
handleClick: function() {
//向外触发一个事件
this.$emit('delete', this.index)
}
}
})
// var TodoItem = {
// template: '<li>item</li>'
// }
//父组件
new Vue({
el:"#root",
// components:{
// 'todo-item': TodoItem
// },
data:{
inputValue: 'hello',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function(index){
this.list.splice(index, 1)
}
}
})
</script>
</body>
</html>
Vue学习之不同组件之间的消息传递的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习记录⑤（组件通信-父与子）
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- 38.VUE学习之-全局组件和局部组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Angular学习笔记之组件之间的交互
1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组 ...
- Vue学习之todolist组件拆分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue学习系列(二)——组件详解
前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...
- vue学习之父组件与子组件之间的交互
1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...
- vuex 实现vue中多个组件之间数据同步以及数据共享。
http://pan.baidu.com/s/1hrJfpli demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...
随机推荐
- SpringBoot整合Dubbo配合ZooKeeper注册中心
安装ZooKeeper 我这里使用zookeeper作为服务注册中心,版本3.4.9,下载地址: http://mirrors.hust.edu.cn/apache/zookeeper/zookeep ...
- 运行所选代码生成器时出错：“值-1超出了可接受的[0,2147483647]范围。参数名称：value”
在使用vs2019添加mvc控制器的时候 这已经是第二次遇到这个问题了.常言道,多喝热水,重启试试.有时候当应用工作不正常,重启也许能解决问题.但是程序员通常接触不到服务器系统权限.而运维人员和公司流 ...
- iNeuOS 物联网云操作系统2.0发布，集成设备容器、视图建模、机器学习三大模块
目 录 1. 概述... 2 2. 使命及目标... 3 3. 系统框架... 4 4. 设备容器(iNeuKernel)... 4 5. ...
- Flink的Job启动Driver端(源码分析)
整个Flink的Job启动是通过在Driver端通过用户的Envirement的execute()方法将用户的算子转化成StreamGraph,然后得到JobGraph通过远程RPC将这个JobGra ...
- 蓝桥杯单片机CT107D 01 底层驱动基础
代码下载 https://share.weiyun.com/5NHvLxG 这两个代码文件是其他底层驱动代码的基础: 包含了控制138573(间接控制数码管led和蜂鸣器等).delay延时函数.CT ...
- java日志框架笔记-log4j-springboot整合
# 日志框架slf4j log4j logback之间的关系 简答的讲就是slf4j是一系列的日志接口,而log4j logback是具体实现了的日志框架. ```java SLF4J获得logger ...
- CodeForces 909E
题意略. 思路:一个拓扑排序的题目吧.肯定是要先处理后面那个任务,再处理前面那个任务,我的思路是尽力先把主处理器能操作的先操作完,然后再把副处理器能操作完的再操作完,这样循环,直到处理完全部. 定义t ...
- Python处理NetCDF格式数据为TIFF数据(附脚本代码)
博客小序:NetCDF格式数据广泛应用于科学数据的存储,最近几日自己利用python处理了一些NetCDF数据,特撰此博文以记之. 参考博客: https://www.cnblogs.com/shou ...
- 《阿里巴巴Java开发手册1.4.0》阅读总结与心得（五）
笔者作为一名有数年工作经验的Java程序员,仔细研读了这份手册,觉得其是一份不可多得的好材料.阿里巴巴在发布时所说,“阿里巴巴集团推出的<阿里巴巴Java开发手册(正式版)>是阿里巴巴近万 ...
- 极简Docker和Kubernetes发展史
2013年 Docker项目开源 2013年,以AWS及OpenStack,以Cloud Foundry为代表的开源Pass项目,成了云计算领域的一股清流,pass提供了一种"应用托管&qu ...