目录
㋀㋊
◆ 组件的基本概念
◆ 组件分类
① 全局注册图例
② 局部注册图例
◆ 组件注册
扫描二维码关注公众号,回复:
8542984 查看本文章
③ 两者效果图
组件可以扩展HTML元素,封装可重用的代码。Vue组件是可复用的 Vue 实例,且带有一个名字,一个完整的Vue页面,可以由多个组件拼装而成。
-
定义一个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是函数而不是data:{p:1},也可以写成data(){return {}}[脚手架工具里面可以看到] 每一个组件在实例化的过程中,都是一个新的数据,避免view中 <my-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>
-
局部组件注册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>
-
两者效果图