使用component的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="example">
<my-component></my-component>
{
{message}}
</div>
<script crossorigin="anonymous" integrity="sha512-YXLGLsQBiwHPHLCAA9npZWhADUsHECjkZ71D1uzT2Hpop82/eLnmFb6b0jo8pK4T0Au0g2FETrRJNblF/46ZzQ==" src="https://lib.baomitu.com/vue/2.6.12/vue.js"></script>
<script>
Vue.component('my-component', {
template:
'<div>A custom component!</div>'
})
var vm = new Vue({
el: '#example',
data:{
message:'hello world'
}
})
</script>
</body>
</html>
使用extend的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例2</title>
</head>
<body>
<div id="app1">
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<cpn></cpn>
<script src="../js/vue.js"></script>
<script>
const cpn = Vue.extend({
template: `
<div>
<h2>我是标题</h2>
<p>我是组件中的内容</p>
</div>
`
})
Vue.component('cpn', cpn)
const app1 = new Vue({
el: '#app1'
})
const app2 = new Vue({
el: '#app2'
})
</script>
</body>
</html>
slot插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-组件slot的基本使用</title>
</head>
<body>
<div id="app">
<cpn><button>我是button元素</button></cpn>
</div>
<template id="cpn">
<div>
<div>我是div元素</div>
<slot>我是slot元素</slot>
<h2>我是h2元素</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const cpn = Vue.extend({
template: '#cpn',
})
const app = new Vue({
el: '#app',
components: {
cpn
}
})
</script>
</body>
</html>