目录
㋀㋊
◆ 组件的基本概念
◆ 组件分类
① 全局注册图例
② 局部注册图例
◆ 组件注册
③ 两者效果图
-
组件的概念与分类（Components type）
-
组件的基本概念
组件可以扩展HTML元素，封装可重用的代码。Vue组件是可复用的 Vue 实例，且带有一个名字，一个完整的Vue页面，可以由多个组件拼装而成。
-
定义一个Vue组件
定义一个导航组件，代码如图所示
-
组件分类
根据组件的注册方式不同分为全局注册、局部注册 组件，上面定义组件方式为全局注册；
-
全局注册图例
-
局部注册图例
-
组件注册
-
全局组件注册demo
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
注意自己使用的版本
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/x.x.x/vue.js"></script>
<script type="text/javascript">
Vue.component("my-component",{
<!-- 组件中data是函数 -->
data: function(){
return { itemList: ["首页","新闻列表","时事要闻"]}
},
<!-- 标识注册组件结构 -->
template: "<ul><li v-for='item in itemList'>{{item}}</li></ul>"
})
new Vue({
el: "#app"
})
</script>
</body>
</html>-
局部组件注册demo
只在特定的某个vue实例中使用。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
注意自己使用的版本
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/x.x.x/vue.js"></script>
<script type="text/javascript">
Vue.component("my-component",{
data: function(){
return { itemList: ["首页","新闻列表","时事要闻"]}
},
template: "<ul><li v-for='item in itemList'>{{item}}</li></ul>"
})
new Vue({
el: "#app"
})
</script>
</body>
</html>-
两者效果图
