<!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. 从零开始学习Node.js例子九 设置HTTP头

    server.js //basic server的配置文件 ; var server = require('./basicserver').createServer(); server.useFavI ...

  2. css3 TransformZ() 3D缩放

    transformZ()函数做了一个在Z轴移动的工作,3D空间中,Z轴垂直于x-y所在平面-也就是界面所在的平面,而我们的视角正好垂直于xy平面,所以进行transformZ() 3D缩放,其实在我们 ...

  3. 详解div+css相对定位和绝对定位用法

    1.定位的专业解释: (1)语法 position:static|absolute|fixed|relative 从上面语法可以看出,定位的方法有很多种,它们分别是静态(static),绝对定位(ab ...

  4. Day23_IO第五天

    1.递归求5的阶乘 package com.heima.chario; public class Demo8_Digui { /** * @param args * 递归:方法自己调用自己 * 5! ...

  5. extjs4_msg

    经过一早上的努力,终于成功显示了ext.msg.alert("somestring")!一个漂亮的对话框,呵呵 真的是感想挺多,收获也很多的.主要是: 一.用Wamp在win7下搭 ...

  6. 【php学习】PHP 入门经典第一章笔记

    第一章: php在线手册:http://php.net/manual/zh/index.php 在开始学习PHP之前,先来看一个合格的PHP程序员今后应具备哪些知识,这里只是笔者的一些总结,希望对读者 ...

  7. 修改PHP上传文件大小限制的方法

    感谢分享,原文地址:http://www.cnblogs.com/newsouls/archive/2012/12/27/2835628.html 修改PHP上传文件大小限制的方法1. 一般的文件上传 ...

  8. Java实验四

    20145113 Java实验四 快捷键 之前没怎么记ISDEA的快捷键,但是熟练使用快捷键可以带来很多的便利,于是先开始学习一些常用的快捷键,就采用它默认的快捷键,这样后期就不会出现冲突,一些and ...

  9. 用MFC如何对子对话框进行初始化

    通常情况下,我们在创建子对话框的类时.cpp文件中并不会自动生成initdialog函数,但我们的很多操作都需要用到initdialog初始化函数,如果你直接在类的头文件中去定义一个初始化函数,然后在 ...

  10. 《Web全栈工程师的自我修养》读书笔记（转载）

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...