目录：

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. Android UI控件常用库汇总

    现在App的开发已经是非常成熟,涌现了一大批开源的工具.这些项目能够提高我们的搬砖效率.以下是一些在开发中比较常使用的控件和库. ListView WaveSwipeRefreshLayout 水滴效 ...

  2. 一.安全NA之syslog SNMP SSH NTP

    一.常用命令 配置模式下: no logging console #关闭屏幕实时显示日志,不影响到日志buffer里(show logging) logging console #打开屏幕实时日志显示 ...

  3. 初学html总结

    2019-08-17 17:58:49 html:超文本标记语言,用于网页结构的搭建 html语言构成:由标签.属性.属性值构成 标签:" < "后面第一个单词 属性:标签后 ...

  4. Luogu P5490 扫描线

    模板题,想象一条线从左边扫到右边,只有在矩阵边界才会产生影响,所以我们离散化缩小数据范围,再用线段树维护扫描线上的情况,得出结果 #include<bits/stdc++.h> #defi ...

  5. 漏洞挖掘技巧之利用javascript:

    好久没更新博客了,更新一波. 场景: window.location.href=”” location=”” location.href=”” window.location.* 常见地点:任何二次跳 ...

  6. Leetcode之二分法专题-162. 寻找峰值（Find Peak Element）

    Leetcode之二分法专题-162. 寻找峰值(Find Peak Element) 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1] ...

  7. redis desktop manager安装及连接方式

    1.下载安装包 官网下载地址:https://redisdesktop.com/pricing 官网下载需要付费使用 再此附上一个免费的破解版本,绿色安全可用 链接:https://pan.baidu ...

  8. CF 538 D. Flood Fill 递归 区间DP

    link:https://codeforces.com/contest/1114/problem/D 题意: 给定一个数组,有不同的颜色,你可以从任意一个位置开始,改变颜色,相邻的是同一种颜色的位子的 ...

  9. CodeForces div3 第一场

    A Wrong Subtraction 题意: 对于一个数操作n次,操作如下: 如果末尾是0就将这个数除以10, 如果末尾不是0就将这个数-1, 直接做就好了. 代码: #include<bit ...

  10. kick start 2019 round D T3题解

    ---恢复内容开始--- 题目大意:共有N个房子,每个房子都有各自的坐标X[i],占据每个房子需要一定花费C[i].现在需要选择K个房子作为仓库,1个房子作为商店(与题目不同,概念一样),由于仓库到房 ...