<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<Button-Test></Button-Test>
</div>
<script>
/* Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: ' <button v-on:click="handle">点击了{{ count }}次</button>',
methods: {
handle: function() {
this.count++;
}
},
}); */
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: `<div>
<button v-on:click="handle">点击了{{ count }}次</button>
<button >测试1</button>
<ButtonTest></ButtonTest>
</div>`,
methods: {
handle: function() {
this.count++;
}
},
});
Vue.component('ButtonTest', {
data: function() {
return {
count: 0
}
},
template: `<div>
<button >测试123</button>
</div>`
});
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <compontent-hello></compontent-hello>
<compontent-test></compontent-test> -->
{{title}}
<button-test title="this is a parent component"></button-test>
<button-test v-bind:title="title"></button-test>
</div>
<script>
/*var helloword = {
data: function() {
return {
msg: 'helloword'
}
},
template: ' <div>{{ msg }}</div>'
}
var hellotest = {
data: function() {
return {
msg: 'hellotest'
}
},
template: ' <div>{{ msg }}</div>'
} */
Vue.component('button-test', {
props: ['title'],
data: function() {
return {
msg: '这是子组件的内容'
}
},
template: "<div> <span>{{ msg }}</span><span>{{ title }}</span></div>"
})
var vm = new Vue({
el: '#app',
data: {
title: '这是父组件的值的内容'
},
/*components: {
"compontent-hello": helloword,
"compontent-test": hellotest,
}*/
})
</script>
</body>
</html>