一、组件概念

　　有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. 数据结构之二叉树篇卷四 -- 二叉树线索化（With Java)

    一.线索二叉树简介 二叉树本身是一种非线性结构,然而当你对二叉树进行遍历时,你会发现遍历结果是一个线性序列.这个序列中的节点存在前驱后继关系.因此,如何将这种前驱后继信息赋予给原本的二叉树呢?这就是二 ...

  2. docker 配置私有仓库

    1.使用docker 命令: 1.准备两台虚拟机,这里使用的是centos7,两台使用yum install docker 安装docker; 2.给两台虚拟机设置固定ip: 进入到虚拟机内 敲入命令 ...

  3. CentOs 7.6 开启防火墙后 无法显示远程文件夹

    转:https://blog.csdn.net/ygwlove0110/article/details/88232065 遇到了个坑.服务器开启了防火墙后,ftp客户端连接就无法显示目录.关掉防火墙就 ...

  4. PHP扩展开发01:第一个扩展

    我们先假设业务场景,是需要有这么一个扩展,提供一个叫ccvita_string的函数,他的主要作用是返回一段字符.(这个业务场景实在太假,大家就这么看看吧)对应的PHP代码可能是这样: functio ...

  5. 客户端相关知识学习（二）之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  6. SQLAlchemy技术手册

    一.ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法 ...

  7. C# 之 String.Empty

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

  8. 安装MySQL数据库并开启远程访问

    一.安装MySQL数据库 MySQL安装在系统盘下(C:\Program Files),方便系统备份. 1.双击安装程序,勾选“I accept the license terms”,点击“Next” ...

  9. jQuery获取当前按钮的id

    function test(e) { $(e.target).attr('id') } // 记得带上点击事件

  10. 认识配置文件schema.xml（managed-schema）

    1.schema文件是在SolrConfig中的架构工厂定义,有两种定义模式: 1.1.默认的托管模式: solr默认使用的就是托管模式.也就是当在solrconfig.xml文件中没有显式声明< ...