vue-cli 组件
安装：
npm i -g @vue/cli
创建一个项目：
vue create my-project # OR vue ui
项目文件夹目录
src文件夹目录
assets 存放静态资源文件，包括图片等
components 存放组件，封装的可复用组件放在这里
main.js 项目的入口文件，整个项目先执行main.js
app.vue 项目的根组件，定义网页的UI结构
vue项目运行流程：通过main.js把App.vue渲染到index.html中
vm.$mount("#app")与el:"#app"的作用相同
vue组件
-
vue组件就是对UI结构的复用
-
3个组成部分
-
template：组件模板结构，只能有一个根节点div元素
-
style: 组件样式，启用 less ：“<style lang="less">”
-
script：组件JS行为
-
注意事项：.vue组件中的data不能指向对象，必须定义为函数，否则会报错
<script>
// 默认导出，这是固定写法
export default {
// 数据源必须指向函数
// 函数return 出去的可以是一个对象
data() {
return { username: "刘德华", }
}
}
</script>使用组件的三个步骤
-
通过inport语法导入组件
<!-- 1 导入组件，@表示src的文件路径 --> import Left from '@/components/Left' import Right from '@/components/Right'
-
使用components结点注册私有子组件
<!-- 使用compoents节点注册组件 --> <script> export default { components: { Left } } </script> -
以标签形式使用刚才注册的组件
<!--3 以标签形式使用刚才注册的组件 --> <template> <div class="app-container"> <h1>App 根组件</h1> <hr /> <div class="box"> <!-- 渲染 Left 组件和 Right 组件 --> <Left></Left> </div> </div> </template>注册全局组件
方法：在main.js中导入并注册
- 导入需要全局注册的组件
- 通过vue.component()注册全局组件
// 1 导入需要全局注册的组件
import count from '../src/components/count.vue'
// 2 通过vue.component()注册全局组件
// 参数1：字符串形式，表示组件的注册名称
// 参数2：要注册的那个组件名称
Vue.component('Mycount', count)props自定义属性：提高组件复用性
- default：设置自定义属性的默认值
- type：自定义属性值的类型
- required:布尔型，是否必须在调用时定义
// props属性，通过自定义属性为当前组件初始化赋值
// props: ['自定义属性A', '自定义属性B', '其他自定义属性。。。'],
// props: ['init'],
props:{
init:{
// 如果外界没有传递属性值，则默认值为default
default: 0,
// 定义init的属性值的类型type
type: Number,
// 必填项required,调用时，不定义会报错
required:true,
}
},样式冲突
-
方法一：属性选择器
-
给要定义样式的标签加上：data-v-自定义属性名
-
给选择器加上属性选择器【data-v-自定义属性名】
//1 给要定义样式的标签加上：data-v-自定义属性名
<template>
<h3 data-v-001>Left 组件</h3>
</template>
<style lang='less'>
//2 给选择器加上属性选择器【data-v-自定义属性名】
h3[data-v-001]{
color=red
}
</style>-
方法二：scoped
<template>
<h3 >Left 组件</h3>
</template>
//给style标签加上 scoped 属性
<style scoped lang='less'>
//2 给选择器加上属性选择器【data-v-自定义属性名】
h3{
color=red
}
</style>