-
全局声明注册一个组件,
-
组件也是一个vue实例,在定义时也会接受:data,methods,生命周期函数等,
-
不同的组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性,
-
但是组件渲染需要html模板,所以增加了template 属性,值就是HTML模板,
-
全局组件定义完毕,任何vue实例都可以在HTML中通过组件名称来使用组件,
-
data是一个函数不在是一个对象了,注意是data()。
<!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>Vue-Component</title>
</head>
<body>
<div id="app">
<counter></counter>
<counter></counter>
<button-counter></button-counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
//1、全局声明注册一个组件
//组件也是一个vue实例,在定义时也会接受:data,methods,生命周期函数等
//不同的组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性
//但是组件渲染需要html模板,所以增加了template 属性,值就是HTML模板
//全局组件定义完毕,任何vue实例都可以在HTML中通过组件名称来使用组件
//data()是一个函数不在是一个对象了。
const Feature = Vue.component('counter',
{
template: `<button v-on:click="count ++">我被点击了{{count}}次</button>`,
data() {
return {
count: 1
}
}
});
//2、局部声明组件
const buttonCounter = {
template: `<button v-on:click="count ++">我被点击了{{count}}次····</button>`,
data() {
return {
count: 1
}
}
};
new Vue({
el: "#app",
data: {
count: 1
},
//注册局部组件,注意是components
components: {
"button-counter": buttonCounter
}
}
)
</script>
</body>
</html>
每日寄语:积少成多,积水成渊,多敲多总结!