一、Vue组件概述
1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。
2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。
二、组件的使用分三个步骤
1、调用 Vue.extend() 方法创建组件构造器
var MyComponent = Vue.extend({
// 选项
})
2、调用 Vue.component() 方法注册组件。
Vue.component('my-component', MyComponent)
3、在 Vue 实例的作用范围使用组件。
<div id="app">
<my-component></my-component>
</div>
完整代码(第一种写法)
<!DOCTYPE html>
<html>
<head>
<title>使用组件</title>
<meta charset="utf-8">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3、 #app 是 Vue 实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script type="text/javascript">
// 1、创建一个组件构造器
var Mycomponent=Vue.extend({
//template选项,他是定义组件的网页模板
template:"<div><p>组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。</div></p>"
})
// 2、创建组件,并指定组件的标签,组件的 HTML 标签为<my-component>
Vue.component("my-component",Mycomponent)
new Vue({
el:"#app"
})
</script>
</html>
第二种写法(第一种写法里面组件template 的网页模板html代码不会提示,但是第二种写法会有提示)
<!-- 组件的使用----第二种写法 -->
<!DOCTYPE html>
<html>
<head>
<title>使用组件</title>
<meta charset="utf-8">
<script type="text/javascript" src="l