一、组件概念

　　有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. Firefox、IE、chrome浏览器和驱动下载地址

    一.Firefox和驱动下载地址 selenium2.X最高支持的Firefox版本为46,使用selenium2.X的话不需要下载火狐驱动,只需要配置火狐的启动路径即可. Selenium3.0开始 ...

  2. 草地排水 洛谷P2740 最大流 入门题目

    草地排水 洛谷P2740 最大流入门题目 题意 在农夫约翰的农场上,每逢下雨,贝茜最喜欢的三叶草地就积聚了一潭水.这意味着草地被水淹没了,并且小草要继续生长还要花相当长一段时间.因此,农夫约翰修建了一 ...

  3. 编译LNMP部署动态网站环境

    LNMP动态网站部署架构是由一套 Linux+Nginx+MySQL+PHP 组成的动态网站系统解决方案. 以下配置环境为:Linux=RHEL7 --> Nginx=1.13 --> M ...

  4. springboot JPA mysql

    官方文档 https://docs.spring.io/spring-data/jpa/docs/1.11.10.RELEASE/reference/html/ 常用关键字 通常,JPA的查询创建机制 ...

  5. Windows账户管理

    windows账户管理 最近部署人员给我们提了一个需求,就是希望简化部署过程. 为了能够远程桌面控制终端电脑,他们需要为每台终端设置进行一些设置,例如创建用户名和密码,开启允许 远程桌面设置,以及开机 ...

  6. JS基础_数据类型-Null类型和Undefined类型

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 基于bootstrap的分页插件

    之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...

  8. C# 之 String.Empty

    .NET Framework 类库,表示空字符串,此字段为只读,命名空间:System.程序集:mscorlib(在 mscorlib.dll 中).   EG:protected string lo ...

  9. oracle重置dba用户密码

    1.进入sqlplus里面: [oracle@master ~]$ sqlplus / as sysdba SQL*Plus: Release 12.1.0.2.0 Production on Tue ...

  10. ctfd搭建

    CTFd 0x00 前言 搭个CTF平台,看能不能带动一下学校的CTF参与度. 一个下午都在搭这个平台:O 抓瞎摸索,最后成功用Apache+mod_wsgi也算是功德圆满了. 进入正题: 系统: C ...