vue组件一

时间：2023-01-11 15:15:45
<!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. 1280&ast;720P和1920&ast;1080P的视频在25帧30帧50帧60帧时的参数

  2. Cocos2d-x 3&period;x游戏开发之旅

    Cocos2d-x 3.x游戏开发之旅 钟迪龙 著   ISBN 978-7-121-24276-2 2014年10月出版 定价:79.00元 516页 16开 内容提要 <Cocos2d-x ...

  3. Memcached【Magent&plus;Memcached】集群

    Memcached介绍  事件处理libevent是个程序库,它将Linux的epoll.BSD类操作系统的kqueue等事件处理功能封装成统一的接口.即使对服务器的连接数增加,也能发挥O(1)的性能 ...

  4. &lbrack;CC&rsqb;Plugin-提取ISS3D关键点

    基于CloudCompare开发的提取ISS3D关键点. void qLxPluginPCL::doISS3D() { assert(m_app); if (!m_app) return; const ...

  5. Codeforces Round &num;225 &lpar;Div&period; 2&rpar;

    比赛时候只做出AB,E题一眼看过去似乎线段树能搞,但是写完过不了样例,才发现看错题了,然后比赛就没啥时间了~~整体状况还是很糟糕,A,B题实在出得太慢,然后持续到现在还没出过C题...不能更弱%&gt ...

  6. Scala Web 框架——Lift（一）准备工作

    [Lift]Scala Web 框架——Lift(一)准备工作 Lift 官方网站:http://liftweb.net/ 下载 http://liftweb.net/download 下载.zip压 ...

  7. Java 处理 multipart&sol;mixed 请求

    一.multipart/mixed 请求   multipart/mixed 和 multipart/form-date 都是多文件上传的格式.区别在于,multipart/form-data 是一种 ...

  8. 【数学建模】MatLab 数据读写方法汇总

    1.读入 txt 文件数据. load xxx.txt A=load(‘xxx.txt’) A=dlmread(‘xxx.txt’) A=importdata(‘xxx.txt’) 例:将身高体重的 ...

  9. 关于多线程之GCD的一些学习要点

    GCD是当前多线程使用最方便的,也是使用比较多的. 学习GCD主要集中在一下几点: 一.队列,同步,异步 1.主队列:dispatch_get_main_queue(); 2.串行队列:dispatc ...

  10. ubuntu打开windows下txt文档乱码问题的解决

    昨天晚上安装了Ubuntu11.10,打开TXT文件的时候发现中文乱码问题,在网上查了一下,一些网友提供了下面的方法: “按Alt+F2,打开“运行应用程序”对话框,输入“gconf-editor”, ...

相关文章