组件的创建和注册
vue.js的组件的使用有3个步骤:创建组件构造器、注册组件和使用组件。
1. 调用Vue.extend()方法创建组件构造器。
2. 调用Vue.component()方法注册组件。
3. 在Vue实例的作用范围内使用组件。
<!DOCTYPE html>
<html>
<body>
<div id="app">
<!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件-->
<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script> // 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
}) // 2.注册组件,并指定组件的标签,组件的HTML标签为<my-component>
Vue.component('my-component', myComponent) new Vue({
el: '#app'
}); </script>
</html>
运行结果:
This is my first component!