Vue中创建组件
2018-11-08 本文已影响6人
___大鱼___
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 如果要使用组件, 直接把组件的名称, 以HTML标签的形式显示出来即可
如何定义的模板名为驼峰命名中有大写 如 codDocker 则需要用cod-docker来展示, 否则页面不会展示
-->
<mycom1></mycom1>
</div>
<script>
// 使用Vue.extend 来创建全局的Vue组件
var com1 = Vue.extend({
template: '<h3>我是你大哥你服不服</h3>' // 通过 template 属性, 指定了组件需要展示的HTML结构
});
// 使用 Vue.component('组件的名称', 要展示的组件)
Vue.component('mycom1', com1)
var app = new Vue({
el: '#app',
data:{
},
methods: {
},
created: function () {
},
mounted: function () {
}
})
</script>
</body>
</html>
