<!-- 动态Props -->

<!DOCTYPE html>
<html lang='utf-8'>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.js"></script>
        <style>
            * {
                font-family: "microsoft yahei";
            }
        </style>
    </head>
    <body>

    <div id="vm">
        <input type="text" v-model="parentMsg" />
        <br />
        <!-- 组件里声明驼峰式，这里要用短线 -->
        <child v-bind:my-message="parentMsg"></child>
    </div>

    <script>
    Vue.component('child', {
        // 声明 props
        props: ['myMessage'],
        // 选项
        template: '<span>{{ myMessage }}</span>'
    });

    new Vue({
        el: '#vm',
        data: {
            parentMsg: '父信息默认值'
        }
    });

    </script>

    </body>
</html>

v-on绑定自定义事件

<!DOCTYPE html>
<html lang='utf-8'>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.js"></script>
        <style>
            * {
                font-family: "microsoft yahei";
            }
        </style>
    </head>
    <body>

    <!-- v-on绑定自定义事件 -->
    <div id="counter-event-example">
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

    <script>
    Vue.component('button-counter', {
        template: '<button v-on:click="increment">{{ counter }}</button>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            increment: function () {
                this.counter += 1;
                // 触发事件
                this.$emit('increment');
            }
        }
    });

    new Vue({
        el: '#counter-event-example',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total += 1;
            }
        }
    });
    </script>

    </body>
</html>

多个组件的过渡

<!DOCTYPE html>
<html lang='utf-8'>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.js"></script>
        <script src="velocity.min.js"></script>
        <style>
            * {
                font-family: "microsoft yahei";
            }
            .component-fade-enter-active, .component-fade-leave-active {
              transition: opacity .3s ease;
            }
            .component-fade-enter, .component-fade-leave-active {
              opacity: 0;
            }
        </style>
    </head>
    <body>

    <p>多个组件的过渡</p>
    <div id="example">
        <input type="radio" name="myradios" value="A" v-on:click="showCont('v-a')" id="A" checked="checked" />
        <label for="A">A</label>

        <input type="radio" name="myradios" value="B" v-on:click="showCont('v-b')" id="B" />
        <label for="B">B</label>

        <transition name="component-fade" mode="out-in">
            <!-- 绑定了view数据 -->
            <component v-bind:is="view"></component>
        </transition>
    </div>

    <script>
    new Vue({
      el: '#example',
      data: {
        view: 'v-a'
      },
      components: {
        'v-a': {
          template: '<div>Component A</div>'
        },
        'v-b': {
          template: '<div>Component B</div>'
        }
      },
      methods: {
          showCont: function (msg) {
              this.view = msg;
          }
      }
    });
    </script>

    </body>
</html>

Vue.js进阶的更多相关文章

  1. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  2. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  3. Vue.js高效前端开发 • 【Ant Design of Vue框架进阶】

    全部章节 >>>> 文章目录 一.栅格组件 1.栅格组件介绍 2.栅格组件使用 3.实践练习 二.输入组件 1.输入框组件使用 2.选择器组件使用 3.单选框组件使用 4.实践 ...

  4. Vue.js 整理笔记

    以前我们用Jquery进行dom的操作,虽然熟悉后开发效率很高,但是如果多个控件的相互操作多的情况下,还是会乱.相比之下,Vue的使用更加清晰,通过虚拟dom将数据绑定,而且组件化和路由的帮助下,让整 ...

  5. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  6. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

  7. 走进Vue时代进阶篇(01)：重构电商购物车模块

    前言 从这篇文章开始,我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章,正好我们公司项目中也用到了Vue.所以,教是最好的学.进阶篇比较适合于二三线城市,还在小厂打拼的童鞋们.欢迎你们跟着 ...

  8. Vue.js 学习笔记 第5章 内置指令

    本篇目录: 5.1 基本指令 5.2 条件渲染指令 5.3 列表渲染指令 v-for 5.4 方法与事件 5.5 实战:利用计算属性.指令等知识开发购物车 回顾一下第2.2节,我们己经介绍过指令(Di ...

  9. Vue (一) --- vue.js的快速入门使用

    =-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...

随机推荐

  1. linux--分卷压缩解压缩

    1.先压缩目录为一个文件 root@ip# tar zcvf apk.tar apk/ 2.对文件进行切分,-d表示切分后的文件后缀已数字区分(如apk_2015.tar01,apk_2015.tar ...

  2. 6.HotSpot垃圾收集器

    HotSpot JVM收集器 上面有7中收集器,分为两块,上面为新生代收集器,下面是老年代收集器.如果两个收集器之间存在连线,就说明它们可以搭配使用. 并发和并行 先解释下什么是垃圾收集器的上下文语境 ...

  3. Android开发涉及有点概念&相关知识点（待写）

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  4. strace命令介绍(转)

    原文链接:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html 简介 strace常用来跟踪进程执行时的系统调用和所接收的信 ...

  5. [DiocpRPC]介绍与安装

    介绍:    Diocp-RPC组件基于DIOCP进行扩展开发,通信协议基于HTTP,遵循RESTFul开发模式,可以用户三层开发.IDE可以支持大于等于D7的IDE,服务端组件支持Win32/Win ...

  6. RecycleView在eclipse的初体验

    在sdk中找到v7包 \sdk\extras\android\support\v7\recyclerview 导入工程 Import\Android\Existing Android Code Int ...

  7. wxPython--Python GUI编程参考链接

    原文链接http://www.cnblogs.com/coderzh/archive/2008/11/23/1339310.html

  8. 抓包工具Charles，anyproxy，mitmproxy等

    Charles:图形化界面,看着比较方便友好,也可以抓取https,不过电脑和手机都要下载证书,主要我的电脑上不能添加一添加就卡死 所以,抓取https的话,就用mitmproxy比较简单 1.安装C ...

  9. freeCodeCamp:Return Largest Numbers in Arrays

    右边大数组中包含了4个小数组,分别找到每个小数组中的最大值,然后把它们串联起来,形成一个新数组. 提示:你可以用for循环来迭代数组,并通过arr[i]的方式来访问数组的每个元素. /*思路 for循 ...

  10. Python3学习(2)-中级篇

    Python3学习(1)-基础篇 Python3学习(2)-中级篇 Python3学习(3)-高级篇 切片:取数组.元组中的部分元素 L=['Jack','Mick','Leon','Jane','A ...