<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <div id="app"></div>

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

    <script>

        // Vue 中的组件分为局部组件和全局组件，局部组件的使用步骤：声明、挂载、使用

        // 全局组件用法如下:第一个参数是组件名，第二个参数是options

        Vue.component('Btn', {

            template: `<button>我是全局组件按钮</button>`

        })

        // 声明局部组件，组件名应大写

        var App = {

            template:`<div>我是局部组件App<Btn /></div>`,

            data(){ // ES6匿名函数写法

                return {} // 组件的data需要返回一个函数

            }

        };

        new Vue({

            el: '#app',

            // 使用局部组件

            template: `

                <App />

            `,

            data:function(){

                return {}

            },

            // 挂载局部组件

            components: {

                App

            }

        });

    </script>

</body>

</html>

Vue之组件的使用的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  6. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  7. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  8. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  9. 为什么VUE注册组件命名时不能用大写的？

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

  10. vue的组件化运用（数据在两个组件互传，小问题总结）

    一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...

随机推荐

  1. kubernetes1.13.1部署ingress-nginx-十一

    一.Ingress 简介 (1) 在Kubernetes中,服务和Pod的IP地址仅可以在集群网络内部使用,对于集群外的应用是不可见的. 为了使外部的应用能够访问集群内的服务, 在Kubernetes ...

  2. UVa 1643 Angle and Squares (计算几何)

    题意:有n个正方形和一个角(均在第一象限中),使这些正方形与这个角构成封闭的阴影区域,求阴影区域面积的最大值. 析:很容易知道只有所有的正方形的对角形在一条直线时,是最大的,然后根据数学关系,就容易得 ...

  3. sql server编写通用脚本自动统计各表数据量心得

    工作过程中,如果一个数据库的表比较多,手工编写统计脚本就会比较繁琐,于是摸索出自动生成各表统计数据量脚本的通用方法,直接上代码: /* 脚本来源:https://www.cnblogs.com/zha ...

  4. 黑客攻防技术宝典web实战篇：解析应用程序习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 当解析一个应用程序时,会遇到以下 URL:https://wahh-app.com/Coo ...

  5. .bashrc等文件中的rc是什么意思

    转自:  https://blog.csdn.net/u010167269/article/details/52612260 刚刚配置 .bashrc 文件时,突然想,这里面的 rc 是什么意思? 使 ...

  6. Ubuntu 设置文件默认打开的应用

    右键单击该文件,然后点击属性,打开属性面板 然后进入open with的选项,选择应用后,点击 set as default

  7. 同一台服务器上部署多个Tomcat的配置修改方法

    同一服务器部署多个tomcat时,存在端口号冲突的问题,所以需要修改tomcat配置文件server.xml,以tomcat7为例. 首先了解下tomcat的几个主要端口: <Server po ...

  8. .Net开发人员必备工具下载

    .Net开发人员必备工具下载   本人亲测下载地址: Win8.1破解工具下载: http://pan.baidu.com/s/1eQf2UiQ 可激活版本 Windows Vista Busines ...

  9. document.body 与 document.documentElement区别介绍

    什么是document.body? 返回html dom中的body节点 即<body> 什么是 document.documentElement? 返回html dom中的root 节点 ...

  10. LightOj 1076 - Get the Containers (折半枚举好题)

    题目链接: http://www.lightoj.com/volume_showproblem.php?problem=1076 题目描述: 给出n个数,要求分成m段,问这m段中最大的总和,最小是多少 ...