目录：

1：父组件向子组件传值，通过属性绑定的方式。

2：父组件向子组件传方法，通过事件绑定的方式 。

3：通过ref来获取Dom元素

1：父组件向子组件传值，通过属性绑定的方式

1.1：父组件声明数据

1.2：子组件声明属性

<script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "这是父组件中的数组",
            },
            components : {
                tem : {
                    template : "#tem",
                    // 这是从父组件中传递过来的数据，这里的数据是只读的。
                    props : [
                        "parentmsg",
                    ],
                    data(){ // 子组件中的数据，是子组件私有的，不是父组件传递过来的，
                            // 比如从ajax请求过来的数据。这里的数据是可读可写的
                        return {
                            title : "1234",
                        };
                    }
                },
            
            },
        });
    </script>

1.3：子组件引用的使用绑定属性

<div id="app">
        <tem v-bind:parentmsg="msg"></tem>
    </div>
    <template id="tem">
        <h1>这是子组件~~{{parentmsg}}</h1>
    </template>
 
 

2：父组件向子组件传递事件

<body>
    <div id="app">
        <!-- 2:绑定父组件方法到子组件中 -->
        <tem @func="show"></tem>
    </div>
    <template id="tem">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="子组件中的方法" @click="myclick">
        </div>
        
    </template>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "这是父组件中的数组"
            },
            methods : {
                // 1:声明父组件方法
                show(arg){
                    console.log(arg)
                }
            },
            components : {
                tem : {
                    template : "#tem",
                    methods : {
                    // 4:调用子组件方法
                    myclick(){
                        // 3:声明子组件方法
                        this.$emit("func", "123");
                    }
                }
                },
                
            },
        });
    </script>
</body>
 
 

3:ref获取dom元素和组件。

<body>
    <div id="app">
        <h2 ref="myh2">我是h2标签</h2>
        <input type="button" value="点击" @click="myclick">
    </div>
    <script>

var vm = new Vue({

            el : "#app",
            data :{
            },
            methods : {
                myclick(){
                    console.log(this.$refs.myh2.innerText);
                },
            }
        });
    </script>
    
</body>
 
 
 
4：路由四部曲
1：导包
2：定义路由规则
3：挂载到Vue实例中
4：显示在html元素里
<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
 
    <script>
        var login = {
            template :"<h3>登陆组件</h3>", 
        };
        var register = {
            template : "<h3>注册组件</h3>",
        }
        var router = new VueRouter({
            routes : [
                {path : "/", component: login},
                {path : "/login", component: login},
                {path : "/register", component : register},
            ],
        });
        var vm = new Vue({
            el : "#app",
            data : {
            },
            router : router,
        });
    
    
    </script>
</body>

04 (H5*) Vue第四天的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. 总结Vue 第四天：vue-cli（Vue2.0 新手入门 — 从环境搭建到发布）

    总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■   CLI是Command-Lin ...

  3. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  4. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  5. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  6. 04. H5标签有哪些？行内元素有哪些？块级元素有哪些？空(void)元素有哪些？行内元素和块级元素有什么区别？你工作中常用标签有什么？

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  7. 从后端到前端之Vue（四）小试牛刀——真实项目的应用（树、tab、数据列表和分页）

    学以致用嘛,学了这么多,在真实项目里面怎么应用呢?带着问题去学习才是最快的学习方式.还是以前的那个项目,前后端分离,现在把前端换成vue的,暂时采用脚本化的方式,然后在尝试工程化的方式. 现在先实现功 ...

  8. PHP 将数据从 Laravel 传送到 vue 的四种方式

    在过去的两三年里,我一直在研究同时使用 Vue 和 Laravel 的项目,在每个项目开发的开始阶段,我必须问自己 “我将如何将数据从 Laravel 传递到 Vue ?”.这适用于 Vue 前端组件 ...

  9. 前端笔记之Vue（四）UI组件库&Vuex&虚拟服务器初识

    一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...

随机推荐

  1. springBoot项目配置日志打印管理(log4j2)

    1.修改pom文件引用log4j2相关jar包 依赖代码: <!-- log4j2 start --><!-- Spring Boot log4j2依赖 --><depe ...

  2. Python-demo(video)

    #!/usr/bin/env python# #-*-coding:utf-8-*-import requestsimport randomimport timedef get_json(url): ...

  3. Oracle笔记_多表查询

    1 执行sql文件 @文件地址名 --执行某个sql文件: 2 多表查询 想要的数据不在同一张表,就需要多个表进行联查. 多表查询也叫做表连接查询,其中的where条件就是连接条件. 可以使用join ...

  4. LightOJ - 1370 Bi-shoe and Phi-shoe 欧拉函数 题解

    题目: Bamboo Pole-vault is a massively popular sport in Xzhiland. And Master Phi-shoe is a very popula ...

  5. zookeeper快速上手

    ## # zookeeper的基本功能和应用场景 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件. ...

  6. macbook 安装redis流程及问题总结

    Mac安装redis流程和总结 一.redis安装流程: 1.进入redis官网-->点击download-->选择稳定版本(stable)-->点击Download即可. 2.将下 ...

  7. 【spring-boot 源码解析】spring-boot 依赖管理

    关键词:spring-boot 依赖管理.spring-boot-dependencies.spring-boot-parent 问题 maven 工程,依赖管理是非常基本又非常重要的功能,现在的工程 ...

  8. Delphi - Indy TIdHTTP方式创建程序外壳 - 实现可执行程序的自动升级

    Delphi 实现可执行程序的自动升级 准备工作: 1:Delphi调用TIdHTTP方式开发程序,生成程序打包外壳 说明:程序工程命名为ERP_Update 界面布局如下: 代码实现如下: unit ...

  9. Nginx总结（四）基于域名的虚拟主机配置

    前面讲了如何安装配置Nginx,大家可以去这里看看nginx系列文章:https://www.cnblogs.com/zhangweizhong/category/1529997.html 今天要说的 ...

  10. JVM体系结构详解

    每个Java开发人员都知道字节码将由JRE (Java运行时环境)执行.但是很多人不知道JRE是Java Virtual Machine(JVM)的实现,它分析字节码.解释代码并执行代码.作为开发者, ...