自家电脑做网站服务器w7花生壳/营销策划与运营团队
简介
概述
组件是拥有专属的HTML+JS+CSS+数据的可重用性元素，用于定义独立的页面功能区域，当想要扩展HTML的功能时,就可以
使用vue定义一些组件，组件可分为两大类，例如：
1,全局组件: Vue.component(组件名, 组件的功能)
2,局部组件: 在Vue对象里, 再加一个属性components
组件使用
在数据渲染区 , 直接把组件名当做HTML的标签名，全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
案例演示
组件基本应用案例演示
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue 组件Component</title><!-- 1.导入vue.js --><script src="js/vue.js"></script></head><body><!-- 2.数据渲染区 --><div id="app"><!-- 5.使用组件 --><htitle></htitle></div><div id="d1"><htitle></htitle><btn></btn></div><script>//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了HTML的标签//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效果Vue.component('htitle',{template : '<h1>你好 Vue组件</h1>' //组件的显示效果}) //3. 创建Vue对象new Vue({el:'#app'})new Vue({el:'#d1' ,// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)components: {'btn':{//组件名template : '<h1>你好 Button组件</h1>' //组件的显示效果}}})</script></body>
</html>