<!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学习之不同组件之间的消息传递的更多相关文章

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

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

  2. vue学习记录⑤(组件通信-父与子)

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  3. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  4. 38.VUE学习之-全局组件和局部组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. Angular学习笔记之组件之间的交互

    1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组 ...

  6. Vue学习之todolist组件拆分

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue学习系列(二)——组件详解

    前言 在上一篇初识Vue核心中,我们已经熟悉了vue的两大核心,理解了Vue的构建方式,通过基本的指令控制DOM,实现提高应用开发效率和可维护性.而这一篇呢,将对Vue视图组件的核心概念进行详细说明. ...

  8. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

  9. vuex 实现vue中多个组件之间数据同步以及数据共享。

    http://pan.baidu.com/s/1hrJfpli  demo下载地址 前言 在一些项目中有很多数据状态之间要实现数据共享状态共享,例如购物车的数据.用户的登录状态等等.vue父元素是可以 ...

随机推荐

  1. Spring-Boot:拦截器注解范例

    package com.example.aop; import java.lang.annotation.Documented; import java.lang.annotation.Element ...

  2. Vue函数式组件的应用

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...

  3. Javaweb之国际化

    Javaweb之国际化 一.前言 软件的本地化:一个软件在某个国家或地区使用时,采用该国家或地区的语言,数字,货币,日期等习惯. 软件的国际化:软件开发时,让它能支持多个国家和地区的本地化应用.使得应 ...

  4. 整数 布尔值 字符串 for循环

    整型和布尔值的转换 整型---数字(int) 用于比较和运算 32位范围 -2** 31到2 **32-1 64位范围-2** 63到2** 63-1 十进制转二进制计算方法: 15的二进制为 15% ...

  5. 10_switch语句的使用

    /* switch 语句和c语言的用法不同 1.go语句是默认添加break语句的,但c不是默认的 2.go语句添加一个fallthrough语句,可以顺序执行接下来的结构 3.switch在关键词后 ...

  6. npm基本命令

    1.npm是什么? npm(Node Package Manager)意思是 node 的包管理器,它是随着 NodeJs 安装时一起被安装的: 无论是在前端还是在前端开发中都会使用到 npm 包管理 ...

  7. 特殊字符替换 > < " ' &

    function toTXT(str){         var RexStr = /\<|\>|\"|\'|\&/g         str = str.replace ...

  8. [2018CCPC吉林赛区(重现赛)- 感谢北华大学] 补题记录 躁起来

    1007 High Priestess 埃及分数 1008 Lovers 线段树维护取膜意义下的区间s和. 每个区间保存前缀lazy和后缀lazy. #include <iostream> ...

  9. 2018 Petrozavodsk Winter Camp, Yandex Cup

    A. Ability Draft solved by RDC 60min start, 148 min AC, 1Y 题意:两只 Dota 队伍,每队 \(n\) 个英雄,英雄一开始无技能,他们需要按 ...

  10. CF - 1108 E 枚举上界+线段树维护

    题目传送门 枚举每个点作为最大值的那个点.然后既然是作为最大值出现的话,那么这个点就是不需要被减去的,因为如果最小值也在这个区间内的话,2者都减去1,对答案没有影响,如果是最小值不出现在这个区间内的话 ...