VUE组件化开发
2023-06-05 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
组件化开发思想
组件注册
Vue调试工具用法
组件间数据交互
组件插槽
基于组件的案例
-->
<!--
组件规范：web components
-->
<!--
组件的注册（全局组件注册法）
Vue.component(组件名称,{
data:组件数据,
template:组件模板内容
})
-->
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
<hello-tom></hello-tom>
</div>
<script src="./vue/vue.js"></script>
<script>
/*
组件注册的注意事项：
（1）data必须是一个函数：分析函数与普通对象的对比
（2）组件模板内容必须是单个根元素
（3）组件模板内容可以是模板字符串
template:`
<div>
<button @click="handel">点击了{{count}}次</button>
</div>
`
（4）如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符模板中使用驼峰式的方法使用组件，
但是在普通标签中，必须使用短横线的方式使用组件
**/
Vue.component('button-counter',{
data:function(){
return {
count:0
}
},
template:'<button @click="handel">点击了{{count}}次</button>',
methods:{
handel:function(){
this.count++;
}
}
});
// 局部组件注册
var HelloWorld = {
data:function(){
return {
msg:"hello world"
}
},
template:'<div>{{msg}}</div>'
};
var HelloTom = {
data:function(){
return {
msg:"hello tom"
}
},
template:'<div>{{msg}}</div>'
};
var vm = new Vue({
el:"#app",
data:{},
methods:{},
components:{
'hello-world':HelloWorld,
'hello-tom':HelloTom
}
});
</script>
</body>
</html>
