一、组件概念

　　有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. 微信小程序打开地图选择位置

    wx.getLocation({ type: 'wgs84', success(res) { const latitude = res.latitude const longitude = res.l ...

  2. 关于maven自动部署tomcat9 步骤

    maven 自动部署tomcat9 (远程方法) 1.首先要去配置用户,在tomcat的conf中有tomcat_users.xml,在其中有tomcat-user的配置 配置:<tommcat ...

  3. 初步了解autoencoder

    初步了解autoencoder 学习自莫烦python 什么是autoencoder? 自编码(autoencoder)是一种神经网络的形式. 例子:一张图片->对其进行打码->最后再将其 ...

  4. 洛谷P1192台阶问题

    题目描述 有NN级的台阶,你一开始在底部,每次可以向上迈最多KK级台阶(最少11级),问到达第NN级台阶有多少种不同方式. 输入格式 两个正整数N,K. 输出格式 一个正整数,为不同方式数,由于答案可 ...

  5. C++练习 | 不使用头插法逆转单链表

    void D(PBook pHead) { PBook p,q,s; p=pHead->next->next; q=p->next; s=q->next; pHead-> ...

  6. JavaScript刷新事件

    1, Location reload() 方法 2,

  7. Git复习（四）之解决冲突

    解决冲突 合并分支往往也不是一帆风顺的 假设:我们从master创建了一个新的分支feature1更改了最后一行提交,我们切换到master分支也更改了最后一行提交,现在,master分支和featu ...

  8. debezium关于cdc的使用(上)

    博文原址:debezium关于cdc的使用(上) 简介 debezium是一个为了捕获数据变更(cdc)的开源的分布式平台.启动并指向数据库,当其他应用对此数据库执行inserts.updates.d ...

  9. UITableViewCell背景色.选中背景色,分割线,字体颜色设置

    1.系统默认的颜色设置 //无色 cell.selectionStyle = UITableViewCellSelectionStyleNone; //蓝色 cell.selectionStyle = ...

  10. LInux安装MySQL5.7.24详情

    安装包下载 MySQL 的官网下载地址:http://www.mysql.com/downloads/ 我安装的是5.7版本 第二步: 选择:TAR (mysql-5.7.24-el7-x86_64. ...