一、组件概念

　　有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. Docker部署前后端项目

    本地(ubuntu19.04)安装docker: sudo apt install docker.io SSH连接服务器: 安装Docker: yum update yum -y install do ...

  2. myeclipse显示db-brower

    myeclipse显示db-brower 这东西怎么调出来? windows->show view->other->db borwser

  3. CF 148D Bag of mice 题解

    题面 这是我做的第一道概率DP题: 做完后发现没有后效性的DP是真的水: 在这里说主要是再捋顺一下思路: 设f[i][j]表示有i只白鼠,j只黑鼠是获胜的概率: 显然:f[i][0]=1; 然后分四种 ...

  4. Reatful规范

    Reatful规范 drf框架的作用 作用:写接口 什么是接口: URL(前后台信息交互的媒介) 明确了请求方式,提供对应后台所需参数,请求url链接可以得到后台的相应数据 怎么写接口: 参照某种规则 ...

  5. Django项目运行端口被占用

    error:以一种访问权限不允许的方式做了一个访问套接字的尝试,是8000端口被其他程序占用了,杀掉占用的程序就可以 (1)查找哪个进程占用了8000端口 `E:\sign_system\guest& ...

  6. centos配置vsftp，ftp服务

    1.安装vsftp 1.1.安装vsftp,测试安装的vsftpd的版本是:vsftpd.x86_64 0:3.0.2-11.el7_2 yum -y install vsftpd 1.2.修改配置文 ...

  7. vue项目-axios封装、easy-mock使用

    vue全家桶概括下来就是 项目构建工具(vue-cli) 路由(vue-router) 状态管理(vuex) http请求工具 vue有自己的http请求工具插件vue-resource,但是vue2 ...

  8. echarts属性的设置

    // 全图默认背景  // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...

  9. VMware安装CentOS7_1511 mini版本

    这次安装使用的是 CentOS7_1511_mini 如果没有点击下载 点击下载

  10. Chrome去掉标签页8个框

    最终效果: 解决思路: 在标签页鼠标右击弹出的菜单项中存在“查看页面源码”一项,由此可确定chrome的标签页是由一个html页面控制的,只要修改其页面源码便能去掉8个框. 经网上查阅确定了标签页的源 ...