组件开发:根据封装思想,把页面上可重用的UI 结构封装为组件,从而方便项目的开发和维护.即 UI结构的复用。
- 组件的结构如下:
组成部分关键字 | 描述 |
---|
template | 组件的模板结构 |
script | 组件的javascript行为 |
style | 组件的样式 |
用vue-cli 自动生成一个项目后就会得到一个项目的包。默认有一个App.vue组件,可以删除写自己的组件vue 。如下为生成后基本框架写法
<template>
<div class="text-box">
<h3> 这是用户自定义的test.vue ---{{ username }} </h3>
<button @click="ChangeName">修改用户名</button>
</div>
</template>
<script>
export default{
data(){
return{
username :'张三'
}
},
methods:{
ChangeName(){
if(this.username === 'admin') {
this.username = '张三'
}
else{
this.username = 'admin'
}
}
},
watch:{
},
computed:{
},
filters:{
}
}
</script>
<style lang="less">// 启用less语法
.text-box{
background-color: pink;
}
h3{
color: red;
}
</style>