这仅仅是个人为了防止忘记做的笔记而已，仅供参考，有不对的地方请纠正

组件这种东西用来封装多次使用的控件还是很有用处的，我还是挺喜欢这种模式，优化了前端的工作，写个组件也比较简单。下次有时间记录一下样式的复用

首先呢，使用webstorm创建一个新的Vue项目

创建完毕项目后，我们在component目录下创建一个index页面，然后在这里做测试，因为我所有的选择都是默认的，自己在做的时候可以根据实际需求来写，都无所谓，这不是重点。

那么重点来了，组件，我首先，引入Vue.js，引入完毕后来写组件

引入之后，使用component属性自定义所需的控件

vue.component('Hello',{

      template:'<h1>Hello World</h1>'

    });

我这里定义了一个Hello，我在页面上可以这么引用自定义组件

<div id="app">

    <Hello></Hello>

</div>

那么我运行之后在页面上显示的结果就是这样的，这就是一个最简单的组件使用方式。

至于Vue，可以自己去官网找下载链接，我这里就不放Vue的下载链接了，下面我附上整个页面的源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

  <script src="vue.min.js"></script>

  <script>

    vue.component('Hello',{

      template:'<h1>Hello World</h1>'

    });

    new vue({

      el:"#app"

    });

  </script>

</head>

<body>

<div id="app">

    <Hello></Hello>

</div>

</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. JavaScript中标识符的命名

    JavaScript中的标识符的命名有以下规则: 由字母.数字.$._组成 以字母.$._开头 不可以使用保留字!!! 要有意义!!!!!!! 标识符的命名规范: 1.驼峰命名法 除标识符的第一个单词 ...

  2. MySQL随手记

    一.MySQL数据迁移(由远端主机迁移到本地) 1.导出数据库mysqldump -u root -p db > dump_db_date.sqlroot: 账户db: 需要导出的数据库名 2. ...

  3. Dubbo原理实现之与spring融合

    Spring中bean的定义可以通过编程,可以定义在properties文件,也可以定义在通过xml文件中,用的最多的是通过xml形式,由于xml格式具有很好的自说明便于编写及维护.对于xml的文档结 ...

  4. 《react精髓》读书笔记

    概述 前几天找react的技术书籍看,找到<react精粹>和<深入浅出React和Redux>.由于<react精粹>是外国人写的,再加上译者奇舞团我也比较喜欢, ...

  5. 组件基础（参数校验和动态组件、v-once）—Vue学习笔记

    最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...

  6. WebRTC开发基础（WebRTC入门系列3：RTCDataChannel）

    除了视频和音频,webRTC还可以传输其他数据 例子: http://webrtc.github.io/samples/src/content/datachannel/datatransfer/ 应用 ...

  7. 常见排序算法总结（java版）

    一.冒泡排序 1.原理:相邻元素两两比较,大的往后放.第一次完毕,最大值在最大索引处. 即使用相邻的两个元素一次比价,依次将最大的数放到最后. 2.代码: public static void bub ...

  8. Firefox火狐 浏览器接口调试工具 JSON 格式化

    作为一名“IT界”的淫才,还是主攻Web端的淫才,相信大家经常会联调各种接口! 如今APP猖狂的年代接口联调更为频繁,当然我们常用于Firefox火狐 浏览器,所以这里主要讲Firefox火狐 浏览器 ...

  9. jieba分词(2)

    结巴分词系统中实现了两种关键词抽取法,一种是TF-IDF关键词抽取算法另一种是TextRank关键词抽取算法,它们都是无监督的算法. 以下是两种算法的使用: #-*- coding:utf-8 -*- ...

  10. 【JAVA】序列化

    好处有2: 实现了数据的持久化,通过序列化可以把数据永久地保存到硬盘上(通常存放在文件里). 利用序列化实现远程通信,即在网络上传送对象的字节序列. 序列化ID的作用: 简单来说,Java的序列化机制 ...