目录：

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. 测试常用的sql语句

    1.查询:select * from table_name where 条件语句; SELECT * from sms_runwater WHERE message LIKE "%自有支付% ...

  2. Ubuntu 图形界面入门

    Ubuntu 图形界面入门 一.目标 熟悉 Ubuntu 图形界面的基本使用 二..Ubuntu 的任务栏 三. 窗口操作按钮 四. 窗口菜单条

  3. 【改革春风吹满地 HDU - 2036 】【计算几何-----利用叉积计算多边形的面积】

    利用叉积计算多边形的面积 我们都知道计算三角形的面积时可以用两个邻边对应向量积(叉积)的绝对值的一半表示,那么同样,对于多边形,我们可以以多边形上的一个点为源点,作过该点并且过多边形其他点中的某一个的 ...

  4. LeetCode刷题 - (01)两数之和

    题目描述 给定一个整数数组nums和一个目标值target,请你在该数组中找出和为目标值的那两个整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...

  5. Setup Factory 9 简单打包

    由于项目资源太大,使用VS自带打包工具无法实现需求,所以Setup Factory 9进行打包生成多个文件的方案,下面记录使用方法: 一:这里点击下载:下载,提取码:tt7a 二:下载完安装需要注册码 ...

  6. SCRUM的三个工件

    转自:http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-6 Scrum 的工件以不同的方式展现工作和价值,可 ...

  7. Badboy中创建Suite, test, step和Template

    参考: http://leafwf.blog.51cto.com/872759/1111744 http://www.51testing.com/html/00/130600-1367743.html ...

  8. HDU - 1392 Surround the Trees (凸包）

    Surround the Trees:http://acm.hdu.edu.cn/showproblem.php?pid=1392 题意: 在给定点中找到凸包,计算这个凸包的周长. 思路: 这道题找出 ...

  9. codeforces D. Mahmoud and Ehab and the binary string（二分）

    题目链接:http://codeforces.com/contest/862/submission/30696399 题解:这题一看操作数就知道是二分答案了.然后就是怎么个二分法,有两种思路第一种是找 ...

  10. 牛客小白赛5 无关(relationship) 容斥原理（计算因子数的模板）

    链接:https://www.nowcoder.com/acm/contest/135/A来源:牛客网 若一个集合A内所有的元素都不是正整数N的因数,则称N与集合A无关.   给出一个含有k个元素的集 ...