请陛下批阅
方式1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建组件方式1</title>
<script src="../../vue/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
<mycom1></mycom1>
</div>
</body>
<script>
var com1 = Vue.extend({
template: '<h2>这是Vue.extend创建的组件</h2>'
});
Vue.component('mycom1', com1);
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</html>
方式2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建组件方式2</title>
<script src="../../vue/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom>
</div>
</body>
<script>
Vue.component('mycom', {
template: `
<div>
<h3>这是一个组件</h3><span>jjjjjjj</span>
</div>`
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</html>
方式3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建组件方式3</title>
<script src="../../vue/vue-v2.6.11.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom>
</div>
<template id="tmpl">
<div>
<h2>这是通过外部引用的方式创建的组件</h2>
<span>学到了吧!!!</span>
</div>
</template>
</body>
<script>
Vue.component('mycom', {
template: '#tmpl'
})
var vm = new Vue({
el: '#app',
data: {
}
});
</script>
</html>