<!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. hadoop2 Ubuntu 下安装部署

    搭建Hadoop环境( 我以hadoop 2.7.3 为例, 系统为 64bit Ubuntu14.04 ) hadoop 2.7.3 官网下载 , 选择自己要安装的版本.注意每个版本对应两个下载选项 ...

  2. 装饰器模式(Decorator) C++

    装饰器模式是比较常用的一种设计模式,Python中就内置了对于装饰器的支持. 具体来说,装饰器模式是用来给对象增加某些特性或者对被装饰对象进行某些修改. 如上图所示,需要被装饰的对象在最上方,它自身可 ...

  3. Event Handling Guide for iOS--(三)---Event Delivery: The Responder Chain

    Event Delivery: The Responder Chain 事件传递:响应链 When you design your app, it’s likely that you want to ...

  4. 012--python字符编码和list列表和循环语句

    一.字符编码: ASCII码最多只能表示 256个符号,每一个字符占8位 为什么一个字节占8位?因为计算机在读一串二进制数111011001111101110的时候, 要按照规定的长度截取,才能分清一 ...

  5. ACM中java的使用

    ACM中java的使用 转载自http://www.cnblogs.com/XBWer/archive/2012/06/24/2560532.html 这里指的java速成,只限于java语法,包括输 ...

  6. python help(int)

    class int(object) | int(x=0) -> integer | int(x, base=10) -> integer | | Convert a number or s ...

  7. IT兄弟连 JavaWeb教程 Servlet表单数据

    很多情况下,需要传递一些信息,从浏览器到Web服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到Web服务器,分别为GET方法和POST方法. 1．GET方法 GET 方法向页面请求发送已编 ...

  8. 黑客攻防技术宝典web实战篇：利用信息泄露习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 当探查 SQL 注入漏洞时,如果请求以下 URL:https://wahh-app.com ...

  9. Java | 基础归纳 | java时间格式处理总结

    https://www.cnblogs.com/edwardlauxh/archive/2010/03/21/1918615.html https://blog.csdn.net/xsj_blog/a ...

  10. python之os、sys和random模块

    import os # print(os.getcwd())#获取当前目录,绝对路径# print(os.chdir('../'))#更改当前目录,../的意思是退回上一级目录# print(os.g ...