Component 初识组件

　　组件作为vue学习中的重点之一，其强大的功能在vue编程中随处可见，组件就是制作自定义的标签。

全局化注册组件

　　全局化就是在构造器的外部用Vue.component来注册，我们注册现在就注册一个<xiaofan></xiaofan>的组件来体验一下。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>component-1</title>
</head>
<body><h1>component-1</h1><hr><div id="app"><xiaofan></xiaofan></div><script type="text/javascript">//注册全局组件Vue.component('xiaofan',{template:`<div style="color:red;">全局化注册的jspang标签</div>`
        })var app=new Vue({el:'#app',data:{}})</script>
</body>
</html>

　　我们在js中利用Vue.component(自定义标签名，对象(可以跟一个模版template))，然后在HTML中使用这个组件<xiaofan></xiaofan>

局部注册组件

　　正如其命名方式，局部注册组件，也就是在一个内部自定义的组件，只能在内部使用，所以其有作用域，超出了这个作用域也就无法使用。<!DOCTYPE html><html lang="en"<head>

    <meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>component-1</title>
</head>
<body><h1>component-1</h1><hr><div id="app"><xiaofan></xiaofan></div><script type="text/javascript">var app=new Vue({el:'#app',components:{　　　　　　　　"xiaofan":{　　　　　　　　　　template:` <div style = "color:red;">局部注册组件</div>`　　　　　　　　}　　　　　　　}})</script>
</body>
</html>

　　注意：我们是在app内部写的组件xiaofan，所以其只能在html中的app中使用，并且主要内部写组件或者其他，命名方式基本都加s，外部则不加，同时template后面的不是单引号，而是`也就是tab键上面的符号。

转载于:https://www.cnblogs.com/xiaofandegeng/p/9028973.html

Vue2.0 的漫长学习ing-2-6相关推荐

Vue2.0 的漫长学习ing-1-5
v-on:绑定事件监听器 v-on 就是监听事件,可以用v-on指令监听DOM事件来触发一些javascript代码,也就是我们在js中常用的事件处理函数,同时在Vue中我们可以使用@来简写v-on. ...
vue2.0官网学习记录
目录 1. vue.js是什么 2. 插值 2.1 文本插值{{}}, v-once指令 2.2 原始HTML插值, v-html, XSS攻击 XSS攻击 2.3 属性Attribute, v-bi ...
【Vue2.0学习】—Vuex工作原理图（二十五）
[Vue2.0学习]-Vuex工作原理图(二十五) 一. Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写 ...
【Vue2.0学习】—数据绑定
[Vue2.0学习]-数据绑定 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结.vue2.0的基础知识的总结暂时不总结成文 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
【Vue2.0学习】—插槽（六十四）
[Vue2.0学习]-插槽(六十四) 作用:让父组件可以向子组件指定的位置插入html结构,也是一种组件间通信的方式,适用于父组件=>子组件分类:默认插槽.具名插槽.作用域插槽默认插槽使 ...
vue学习（八）vue2.0路由vue-router的简单入门使用
vue-router官网中文文档:Vue Router Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.路由实际上就是可以理 ...

Vue2.0 的漫长学习ing-2-6

Component 初识组件

全局化注册组件

局部注册组件

Vue2.0 的漫长学习ing-2-6相关推荐

最新文章

热门文章