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个组成部分

1. template：组件模板结构，只能有一个根节点div元素

2. style:     组件样式，启用 less  ：“<style lang="less">”

3. script：组件JS行为

• 注意事项：.vue组件中的data不能指向对象，必须定义为函数，否则会报错

<script>
    // 默认导出，这是固定写法
export default {
    // 数据源必须指向函数
    // 函数return 出去的可以是一个对象
    data() {
        return { username: "刘德华", } 
    }
    }
</script>

使用组件的三个步骤

1. 通过inport语法导入组件

   <!-- 1 导入组件，@表示src的文件路径 -->
   import Left from '@/components/Left'
   import Right from '@/components/Right'

   

2. 使用components结点注册私有子组件

   <!-- 使用compoents节点注册组件 -->
   <script>
   export default {
    
     components: {
       Left
     }
   }
   </script>

3. 以标签形式使用刚才注册的组件

   <!--3  以标签形式使用刚才注册的组件 -->
   <template>
     <div class="app-container">
       <h1>App 根组件</h1>
       <hr />
   
       <div class="box">
         <!-- 渲染 Left 组件和 Right 组件 -->
         <Left></Left>
   
       </div>
     </div>
   </template>

   注册全局组件

方法：在main.js中导入并注册

1. 导入需要全局注册的组件
2. 通过vue.component()注册全局组件

// 1 导入需要全局注册的组件
import count from '../src/components/count.vue'
// 2 通过vue.component()注册全局组件
//  参数1：字符串形式，表示组件的注册名称
//  参数2：要注册的那个组件名称
Vue.component('Mycount', count)

props自定义属性：提高组件复用性

1. default：设置自定义属性的默认值
2. type：自定义属性值的类型
3. required:布尔型，是否必须在调用时定义

// props属性，通过自定义属性为当前组件初始化赋值
  // props: ['自定义属性A', '自定义属性B', '其他自定义属性。。。'],
  // props: ['init'],
  props:{
  init:{
    // 如果外界没有传递属性值，则默认值为default
      default: 0,
      // 定义init的属性值的类型type
      type: Number,
      // 必填项required,调用时，不定义会报错
      required:true,
    }
    
  },

样式冲突

• 方法一：属性选择器

1. 给要定义样式的标签加上：data-v-自定义属性名

2. 给选择器加上属性选择器【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>