component:组件,是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码,并且在其它页面使用。
使用步骤:
1.创建组件构造器
const myTitle = Vue.extend({template:""});
2. 注册组件,
Vue.component('my-title',myTitle);
3. 使用组件,在html中使用
<my-title></my-title>
啪啪它:
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--3. 使用组件-->
<my-title></my-title>
<my-title></my-title>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.创建组件构造器
const myTitle = Vue.extend({
template: `
<div>
<span>Title</span>
<span>User</span>
</div>`
});
//2. 注册组件,注意不能用驼峰命名法,否则无效如myTitle或者定义时驼峰,使用时用-分割 Vue.component('myTitle',myTitle); <my-title></my-title>
Vue.component('my-title',myTitle);
let app = new Vue({
el: '#app',
});
</script>
</body>
</html>
我是分割线
前台效果:
Title