一,介绍
关于对于使用vue的核心,也就是对组件的使用,也就是对于vue的核心的基本的了解了。
组件是vue的重要概论,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。
二,基本使用
首先创建一个文件,导入vue的cdn的地址
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
第二步,创建一个div区域给vue做代理的作用,可以在这个区域里面随便创建组件。
<div class="app">
//组件标签
<test-component></test-component>
</div>
第三步,new 一个VUE实例,代理
script>
let vm = new Vue({
el : ".app",
data :{
}
})
</script>
进行以上的步骤后,就相当于将这个app的标签给vue代理了
就可以给这个组件的使用了
Vue.component("test-component" , {
template : `
<ul>
<li>{{ msg }}</li>
<item-component></item-component>
</ul>
`,
data(){
return {
msg : 123456
}
}
})
也就是将test-component这个标签给vue代理通过template写入到页面中,其中也可以再次套一个组件,再次代理使用
也就是这样的
Vue.component("item-component" , {
template : `
<p>{{ mymsg }}</p>
`,
data(){
return {
mymsg : 4546
}
}
})
也就是上一个标签test-component中套用item-component这个标签,然后我再次将item-component使用
三,总结
对于用哪种方式创建Vue组件,我们最终的目的是在HTML页面中展示出来。本节将详细介绍Vue组件使用方式。
对于.vue文件的名称就是组件的名称,其结构非常简单、清晰:
- template标签是组件的HTML模板;
- script标签是逻辑代码;
- style标签中是样式代码。