目录：

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. js 设计模式——状态模式

    状态模式 允许一个对象在其内部状态改变时改变它的行为,对象看起来似乎修改了它的类. 简单的解释一下: 第一部分的意思是将状态封装成独立的类,并将请求委托给当前的状态对象,当对象的内部状态改变时,会带来 ...

  2. 重新学习MySQL数据库开篇：数据库的前世今生

    本文内容出自刘欣的"码农翻身"公众号,强烈推荐刘欣大大的文章.   数据库的前世今生 小李的数据库之旅 无纸化办公 小李是这个大学计算机科学与技术系的知名学生,他的编程能力了得,使 ...

  3. Numerical methods in enginering with python3 (1)

    <> (1) Numpy 库 Numpy中的矩阵函数 np.diagonal(A) 返回由A中的主对角元素组成的一维矩阵 np.diagonal(A,1) 返回由A中的第一副对角元素组成的 ...

  4. Android进阶之绘制-自定义View完全掌握(一)

    Android的UI设计可以说是决定一个app质量的关键因素,因为人们在使用app的时候,最先映入眼帘的就是app的界面了,一个美观.充实的界面能够给用户带来非常好的体验,会在用户心中留下好的印象. ...

  5. HDU 6055

    题意略. 思路:要你找出所有正多边形,其实是唬人的,整点的正多边形只有正方形,具体证明可以参考     2017国家队论文集-<正多边形>-杨景钦 详见代码: #include<bi ...

  6. Linux 防火墙开放、查询、关闭端口

    1. 开放指定端口 firewall-cmd --zone=public --add-port=5121/tcp --permanent # --permanent 永久生效,如果不加此条,重启后该命 ...

  7. 搭建Spark高可用集群

      Spark简介 官网地址:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 从右侧最后一条新闻看,Spark也用于AI人工智能 sp ...

  8. 问题.springmvc错误.415:Unsupported Media Type

    场景是在希望用ajax发post请求,传递一个json对象,在controller中直接使用java对象接收时遇到的,具体错误信息如下: { "timestamp": 150027 ...

  9. x86—EFLAGS寄存器详解（转载）

    鉴于EFLAGS寄存器的重要性,所以将这一部分内容从处理器体系结构及寻址模式一文中单独抽出另成一文,这部分内容主要来自Intel Developer Mannual,在后续的内核系列中遇到的许多和EF ...

  10. 【selenium】- selenium IDE的安装以及使用

    本文由小编根据慕课网视频亲自整理,转载请注明出处和作者. 1. 自动化测试工程师的任务 一个合格的自动化测试工程师,需要把框架搭建起来.让不是自动化测试的人,一个普通功能化测试的人,可以完成自动化测试 ...