1. vue组件简介
1.1 概述
组件是拥有专属的HTML+JS+CSS+数据的可重用性元素，用于定义独立的页面功能区域，当想要扩展HTML的功能时,就可以
使用vue定义一些组件，组件可分为两大类，例如：
- 全局组件: Vue.component(组件名, 组件的功能)
- 局部组件: 在Vue对象里, 再加一个属性components
2. 组件使用
在数据渲染区 , 直接把组件名当做HTML的标签名，全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
2.1 案例演示
组件基本应用案例演示
<!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>
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
