vue 组件 全局注册与局部注册的方法

全局注册

html部分

<div id="e1">
<name1></name1>
</div>

script部分

<script type="text/javascript">
Vue.component(‘name1‘, {
template: ‘<div>我是效果</div>‘})   //定义全局模板        例如 Vue.component(tagName, options)

new Vue({el: ‘#e1‘})     //起作用的范围

</script>

--------------------------------------------------------

局部注册

html部分

<div id="e2">
<name2></name2>
</div>

script部分

<script type="text/javascript">
var hz={template:‘ <p>我就是效果</p>‘}             //定义一个想要的模板
new Vue({
el: ‘#e2‘,                                                              //vue作用范围  
components:{"name2":hz}                                    // 定义一个组件  名字叫那么的模板
})
</script>

---------------------------------------------

全局注册于局部注册的区别

全局注册可以直接在插入e1中用;

局部变量 需要在组件(components)中使用

时间: 2024-10-08 20:50:18

vue 组件 全局注册与局部注册的方法的相关文章

vue 组件 全局注册和局部注册

全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content

Vue组件全局/局部注册

全局注册 main.js中创建 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) 使用 <div id="components-demo"> <but

vue.js 组件-全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

VUE的双向绑定及局部组件的使用

vue的双向绑定,使用v-model,v-model只能使用在input  textare    select中 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

vue组件详解(一)——组件与复用

一.什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码. 二.组件用法 组件需要注册后才可以使用,注册有全局注册和局部注册两种方式. 2.1 全局注册后,任何V ue 实例都可以使用.如: <div id="app1"> <my-component></my-component> </div> Vue.component('my-component',{ templ

Vue组件基础

gitHub地址:https://github.com/huangpna/vue_learn里面的lesson06 一 vue组件基本实例 举个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>app1</title> </head> <body> <div id=&q

Vue组件 props

组件是Vue最强大的功能之一:组件化编程,允许我们使用小型,独立,通用的可复用型组件构建大型应用:任何页面都可以抽象为组件树: <!-- 组件需要注册后才能使用. 注册有全局注册和局部注册两种方式 全局注册: 全局: 局部注册: 局部: 注册后的组件只是在该作用域下有效 父组件正向的向子组件传递数据和参数 用 props props的值 可以是两种 1,字符串数组 props:['message'] 2,对象 props: {} props中的数据来自父元素.data中的数据来自组件自己的数据.

来吧!一文彻底搞定Vue组件!

作者 | Jeskson 来源 | 达达前端小酒馆 Vue组件的概述 组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么. 事件通信的那些事 如何了解父子组件事件通信,和遇到非父子组件事件通信如何处理. 组件类型又是什么鬼 自定义组件双向绑定v-model,动态组件,又是如何称为动态的,为啥是动态呢,递归组件,如何理解递归. Vue组件的了解 Vue的理解,可以找我上一篇vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础,组件是什么,