一、组件概念

　　有html模板，有css样式，有js逻辑的集合体

每一个组件都是一个vue实例

每个组件均具有自身的模板template，根组件的模板就是挂载点

每个组件模板只能拥有一个根标签

子组件的数据具有作用域，以达到组件的复用

1、根组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>模板</title>

</head>

<body>

<div id="app">

    <h1>组件概念</h1>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    // 组件：有html模板，有css样式，有js逻辑的集合体

    // 根组件的模板就使用挂载点，子组件必须自己定义template（局部子组件， 全局子组件）

    new Vue({

        el: '#app',

        template: `

                    <div>

                        <h1 style="color:red;">组件渲染的模板</h1>

                        <h2 @click="action">副标题</h2>

                    </div>

                   `,

        data: {

        },

        methods: {

            action: function () {

                alert(123)

            }

        }

    })

</script>

</html>

2、局部组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>模板</title>

</head>

<body>

<div id="app">

    <abc></abc>

    <abc></abc>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    // 定义局部组件

    let localTag = {

        // data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)

        // data的值就是一个存放数据的字典

        // 需要满足以上两个条件，data值为一个可以产生名称空间的函数的返回值，返回值是字典

        data: function () {

            return {

                count: 0

            }

        },

        template: `

                <div class="box" style="border:solid;width:300px">

                    <h1>局部组件</h1>

                    <p class="p1">文本内容</p>

                    <p @click="action" class="p2" style="background:yellow">被点击了{{ count }}次</p>

                </div>

                `,

        methods: {

            action: function () {

                this.count++

            }

        }

    };

    new Vue({

        el: '#app',

        data: {

        },

        // 注册组件

        components: {

            'abc': localTag

        }

    })

</script>

</html>

3、全局组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>模板</title>

</head>

<body>

<div id="app">

    <!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->

    <old-boy></old-boy>

</div>

</body>

<script src="js/vue.js"></script>

<script>

    // 创建一个全局组件

    // Vue.component(组件名, {组件主体})

    Vue.component('OldBoy', {

        data: function(){

            return {

                count: 0

            }

        },

        template: `

            <div class="box" style="border:solid;width:300px">

                <h1>全局组件</h1>

                <p class="p1">文本内容</p>

                <p @click="action" class="p2" style="background:yellow">被点击了{{ count }}次</p>

            </div>

            `,

        methods: {

            action: function () {

                this.count++

            }

        }

    });

    // 全局组件无需注册

    new Vue({

        el: '#app',

        data: {

        }

    })

</script>

</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. MHA搭建

    https://metacpan.org 下载perl依赖包的网站 ##################上传安装依赖包#################### mkdir /opt/soft_file ...

  2. SpringMVC请求参数总结

    前提 在日常使用SpringMVC进行开发的时候,有可能遇到前端各种类型的请求参数,这里做一次相对全面的总结.SpringMVC中处理控制器参数的接口是HandlerMethodArgumentRes ...

  3. JavaScript和JSON转化

    1, JSON转JavaScript JSON.parse():https://www.runoob.com/json/json-parse.html 2, JavaScript转JSON JSON. ...

  4. MySQL中文正常而mybatis查询出现乱码的解决方案

    解决方案是在spring-mvc.xml文件中,加入 <mvc:annotation-driven> <mvc:message-converters> <bean cla ...

  5. ado.net SqlHelp类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. golang（6）： 接口 & 反射

    接口详解 // 举例:sort包中的 Sort 函数,如下: func Sort(data Interface) Sort sorts data. It makes one call to data. ...

  7. postgresql 服务无法启动，日志中报如下错误

    1.postgresql 服务无法启动,日志中报如下错误,磁盘空间足够. 无法找到来自源 PostgreSQL 的事件 ID 0 的描述.本地计算机上未安装引发此事件的组件,或者安装已损坏.可以安装或 ...

  8. 098、Swarm 如何实现 Failover （Swarm05）

    参考https://www.cnblogs.com/CloudMan6/p/7898245.html   故障是在所难免的,容器可能崩溃,Docker Host 可能宕机,不过幸运的是,Swarm 已 ...

  9. golang利用beego框架orm操作mysql

    GO引入orm框架操作mysql 在beego框架中引入orm操作mysql需要进行的步骤: 第一步:导入orm框架依赖,导入mysql数据库的驱动依赖 import ( "github.c ...

  10. SpringCloudGateWay之限流

    一.引言在高并发系统中,经常需要限制系统中的电流化妆.一方面是防止大量的请求使服务器过载,导致服务不可用,另一方面是防止网络攻击.常用的限流方法,如hystrix.应用线程池隔离.超过线程池的负载和g ...