组件

• 概念：用来实现局部功能效果的代码集合
• 作用：复用编码，简化项目编码、提高运行效率

模块

• 理解：向外提供特定功能的js程序，一般是一个js文件
• 作用：复用js、简化js的编程、提高js运行效率

非单文件组件：一个文件中有多个组件 单文件组件：一个文件中只有一个组件

在一个html文件中

组件的使用分3个步骤

1.定义组件

let a = Vue.extend({

template:``,

组件里的data 都需要写成函数形式

data(){

}

})

简写方式

let a = {

}

2、在vue实例里面注册组件

new Vue({

el:''

data:{},

//注册组件

components:{

组件名:上面定义组件用的变量

}

})

3、使用组件

在dom界面里 用组件名当做标签使用即可

组件名的命名规范

一个单词 第一种： 纯小写

第二种：第一个首字母大写

多个单词 第一种： 'abc-fff'

第二种： 首字母大写

不要使用html已经用的名字作为你的组件名

控制台断点调试 : debugger;

组件的嵌套：

app组件vm之下万人之上
正常定义组件，在父级组件里面注册组件，在父级组建了里面使用组件

vueComponent构造函数

每创建一个组件该组件都是一个新的new vueComponent实例对象 简称vc 使用Vue.extend定义组件后 会自动帮我们new 一个vc

一个重要的内置关系

vc.prototype.proto === vm.prototype 让组件实例对象vc（vueComponent）可以访问到Vue原型上的属性和方法

单文件组件

.vue组件 a因为外星人原因 此处单括号变成了双括号

《template》

《/template》

《script》

export defalut{

}

《/script》

《style》

《/style》

安装vue脚手架-cli

1)配置淘宝镜像

• npm config set registry registry.npm.taobao.org
• 2)下载全局脚手架
• npm i -g @vue/cli
• 3)创建脚手架 选择脚手架的版本
• vue create 项目名
• 这里简单提一下vue-Cli 里的main文件里的render函数
• 他的作用是引入的vue版本不是完整版缺少模板解析器不能使用template配置项
• 需要render函数接受到的createElement函数去指定具体内容
• 阿巴阿巴阿巴
• render:q => q(组件名)

ref属性

• 被用来给元素或者组件注册引用信息（id的代替者）
• 应用在html标签上获取的是真实DOM，应用在组件标签上获取到的是该组件的实例对象vueComenter
• 使用方法：
• 打标识
• 获取：this.$refs.xx

propers配置项

• 让组件接收外部传过来的数据
• 写法：
• 1)在父组件上面给子组件写上属性名
• 2)在子组件配置项上添加props:['属性名']接收传递过来值
• 接收值有3种写法
• 第一种为数组写法：如上
• 第二种为对象写法：可以指定传递过来的值的数据类型 props:{name:String}
• 第三种为对象里面包含对象的写法，能够限制类型、必要性、跟默认值

props:{

name:{

type:String //类型

required:true // 必要性

default:‘老六’ //默认值

}

}

mixin配置项-混合配置项

功能:可以把多个组件共用的配置提取成一个混入对象

第一步定义混合

export const hunhe = {

//写vm里面的配置项跟数据，生命周期等

}

export const hunhe2 = {

//写vm里面的配置项跟数据生命周期等

}

第二步使用混合

在需要用到的组件引入hunhe hunhe2

inport {hunhe,hunhe2} from ''

然后在mixin配置项里面使用混合

mixin:[hunhe,hunhe2]

！插件：

功能：用于增强vue

本质：包含install方法的一个对象，install的第一个参数是vue，第二个参数是插件使用者传递的数据

定义插件：

对象.install = function（vue，options）{

}

简写：导出

export default {

install（vue，options）

}

使用插件

Vue.use(对象名)

style标签添加

• scoped：使每个组件的样式不会互相冲突
• lang: 调整样式的写法