<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="app">

            <simple-counter></simple-counter>

            <simple-counter></simple-counter>

            <simple-counter></simple-counter>

        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            var data = {

                counter: 0

            }

            Vue.component("simple-counter" , {

                template: '<button v-on:click="counter += 1">{{counter}}</button>',

                data: function(){

                    return{

                        counter: 0

                    }

                }

            });

            new Vue({

                el: '#app'

            });

        </script>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="app">

            <child message="hello" my-message="gunduzi"></child>

        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

        Vue.component('child' , {

            props: ['message','myMessage'],

            template: '<div><span>{{message}}</span> <span>{{myMessage}}</span></div>'

        });

        new Vue({

            el:'#app'

        });

        </script>

    </body>

</html>

vue组件一的更多相关文章

  1. vue组件

    分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

  2. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  3. vue组件，撸第一个

    实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. JS组件系列——又一款MVVM组件：Vue（二：构建自己的Vue组件）

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  6. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  7. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  8. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  9. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  10. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

随机推荐

  1. WPF中未将对象引用设置到对象的实例

    前几天,我开始了WPF的基础学习,一上来我就遇到了一个令我头痛的问题,按照书上的例子我写了一段属于自己的代码,一个简单的色调器.满心期待的编译运行,就出现了未将对象引用设置到对象的实例.我在网上查阅了 ...

  2. Ruby学习笔记0708

    #!/usr/bin/env ruby class MegaGreeter attr_accessor :names # 初始化這個物件 def initialize(names = "Wo ...

  3. linux查看一条命令的执行结果是1还是0

    echo $? 0为成功 其他为失败

  4. block中如何避免循环引用

    使用 weak–strong dance 技术 block 可以直接引用 self,但是要非常小心地在 block 中引用 self.因为在 block 引用 self,可能会导致循环引用.如下例所示 ...

  5. G - 非常可乐

    Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  6. HowTo系列之virtualenv

    1. 简介 virtualenv是一个用于创建Python独立运行环境的命令行工具. 在我们使用python进行开发的时候,我们会依赖不同的Python版本和不同的库版本.当我们的项目需要依赖别的开发 ...

  7. IO消息机制

    同步阻塞 同步非阻塞 异步阻塞 异步非阻塞 同步是函数自身等待结果 异步可采用状态轮询/通知/回调 返回结果: 阻塞和非阻塞的关注点是在等待消息的时候 线程的状态 同步阻塞 线程挂起 逻辑上函数不马上 ...

  8. c# 函数

    1.输入三个数,求最大的数. 2.输入一个数,求1~n的和. 3.求n的阶乘. 4.输入一个小于等于100的数,判断是否是100,还是小于10,还是两位数.

  9. HTML5学堂，感谢您一年的陪伴（上）

    在HTML学堂将满一周岁之际,感谢再过去的一年里支持和关注它的每一个小伙伴.有了你们的支持,HTML5学堂才能更好的走下去.我们将会把这一年的积累重新体现在HTML5学堂的官网上.HTML5学堂将会全 ...

  10. 《C与指针》读后感

    到目前为止,我已经读到了<C与指针>第十六章,总共十八章,接下来的章节内容分别是标准函数库.数据结构.以及C语言的运行环境,还没有完全做完练习就写这篇读后感原因有二,第一个当然是最主要的, ...