在每个生命周期都提供了两个函数一个是开始之前一个是完成之后, 要重写这些函数需要在vue对象中

脚手架工具

VueCLI是Vue官方提供的一个全局命令工具。 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】

1. 全局安装：

npm i @vue/cli -g

2. 查看Vue版本：

vue --version

3.创建项目架子：

vue create project-name（项目名-不能用中文)

4.启动项目：

npm run servee（找package.json)

项目文件

vue-project/  
├── node_modules/      第三方包文件夹
├── public/            放html文件的地方
│   ├── favicon.ico    网站图标
│   └── index.html     index.html模板文件 
├── src/               源代码目录->存放代码的文件夹
│   ├── assets/        静态资源目录->存放图片,字体等
│   ├── components/    组件目录->存放通用组件
│   ├── views/         路由切换相关
│   ├── router/  
│   ├── store/  
│   ├── App.vue        App根组件->项目运行看到的内容
│   ├── main.js        入口文件->打包或 运行,第一个执行的文件
│   └── env.js  
├── tests/  
│   ├── unit/  
│   └── e2e/  
├── .gitignore         git忽略文件
├── babel.config.js    babel配置文件
├── jsconfig.json      js配置文件
├── package.json       项目配置文件->包含项目名,版本号,scripts,依赖包等
├── README.md          项目说明文档
├── vue.config.js      vue-cli配置文件
└── yarn.lock          yarn锁文件,由yarn自动生成的,锁定安装版本

components和views文件夹都是存放组件的,将他们区分开来是为了更易维护

• views文件夹 页面组件-页面展示－配合路由用
• components文件夹 复用组件－展示数据－常用于复用

组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为 好处：便于维护，利于复用→提升开发效率。

在.vue文件中<template>是结构用于写html代码,<style>是样式用于写css代码,<script>是行为用于写js代码 在vue2的结构中只允许有一个div根元素

组件命名 设置组件后默认是以文件名作为组件名的,可以使用name属性手动指定组件名

export default{
	name:"Componet"
}

样式

样式内默认是css语法,如果要写sass或者less等语法需要下载以来并设置

1. 下载依赖

npm install less less-loader --save-dev -g

2. 设置

<style lang="less">
</style>

行为

export default 导出当前组件的配置项,如:data,methods,computed,watch,生命周期构造函数等

普通组件

组件注册的两种方式：

1. 局部注册：只能在注册的组件内使用
2. 全局注册：所有组件内都能使用

局部注册

//导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'
export default {
	//局部注册
	components:{
		//'组件名'：组件对象，
		HmHeader:HmHeader
	}
}

当注册好组件后,使用时当成html标签使用<组件名></组件名>

全局注册

全局注册代码需要写在main.js中

//导入需要全局注册的组件
import HmButton from './components/HmButton'
// 调用 Vue.component 进行全局注册
// Vue.component（'组件名'，组件对象）
Vue.component('HmButton', HmButton)

样式冲突

局部样式

默认情况：写在组件中的样式会全局生效→因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式：默认组件中的样式会作用到全局
2. 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

默认的style样式会作用于全局 给style样式加上scoped属性后样式就会只作用域当前组件

原理: 给样式加上scoped属性后当前组件中的所有元素都会被添加上一个data-v-hash值的自定义属性,通过这个属性来区分不同组件 在css选择器上也会被自动处理,添加上属性选择器div[data-v-hash值]

data函数

一个组件的 data 选项必须是一个函数。→保证每个组件实例，维护独立的一份数据对象。 每次创建新的组件实例，都会新执行一次data函数，得到一个新对象，

data(){
	return{
		count:10
	}
}

用法和data:设置数据完全一致

组件间通信

父子间传递数据

props

用于父元素给它的子元素传递数据

<son :title="myTitle"></son>

export default{
	data(){
		return{
			myTitle:"hello world"
		}
	}
}

子组件在接受数据时需要使用props来接受,且必须是一个数组对象

<div>
	{{title}}
</div>

export default{
	props:['title']
}

校验

由于vue是弱类型,所以在传递的数据不符合要求的时候也有可能不报错 可以对props设置多种校验

设置校验的props接收的就不是一个数组参数了,而是一个对象

1. 类型校验
2. 非空校验
3. 默认值
4. 自定义校验

当传递的数据不符合设定的校验规则时就会报错

基础写法 类型校验是常用的,所以在只指定类型校验的情况时就可以简写

export default{
	props:{
		w:Number  //设置w类型必须是一个数字类型
	}
}

完整写法

export default{
	props:{
		w:{
			type:Number,      //类型校验
			required:true,    //非空校验
			default:10,       //默认值
			validator(){}     //自定义校验. 返回值是一个布尔类型,返回true通过校验,false未通过校验
		}
	}
}

$emit

$emit用于子元素向它的父元素传递数据

<div>
	<button @click="func"></button>
</div>

export default{
	method:{
		func(){
			$emit("val","nihao")
		}
	}
}

父元素需要监听子元素发送数据的key,并设定监听函数

<son @val="handle"></son>

export default{
	methods:{
		handle(newValue){}
	}
}

.sync

可以实现子组件与父组件数据的双向绑定，简化代码 prop属性名，可以自定义，非固定为value

本质就是：属性名和@update:属性名合写

父组件发送数据 父组件设置发送数据

<BaseDialog :visible.sync="isShow"></BaseDialog>

子组件接受数据

props:{
	visible:Boolean
}

子组件发送数据 父组件设置监听

<BaseDialog :visible="isShow" @update:visible="isShow =$event"/>

子组件发送数据

$emit('update:visible',false)

非父子通信

event bus事件总线

创建一个都能访问到的事件总线(空的vue实例)

const Bus=new Vue();
export defalult Bus;

在接收方设置监听

import Bus from '../utils/EventBus'
export default{
	created(){
	//监听发送消息事件
	Bus.$on('sendMsg',(msg)=>{
		console.log(msg)
	})
}

在发送方发送数据

import Bus from '../utils/EventBus'
export default{
	methods:{
		Bus.$emit('sendMsg','这是一条消息')
	}
}

provide&inject

跨层级共享数据

用于子孙元素通信,props只能用于父子间传输数据

父组件发送数据写在provide函数的返回值中

export default {
	provide(){
		return {
			//普通类型【非响应式】
			color: this.color,
			//复杂类型【响应式】
			userInfo: this.userInfo
		}
	}
}

子孙组件取值

export default{
	inject:['color','userInfo'],
	created(){
		console.log(this.color, this.userInfo)
	}
}

v-model通信

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写。

使用v-model监听输入事件,接着再使用props获取数据

获取组件

ref和$ref

利用ref和$refs可以用于获取dom元素，或组件实例 查找范围→ 当前组件内 (更精确稳定)

1. 目标标签－添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2. 恰当时机，通过this.$refs.xxx,获取目标标签

mounted{
	console.log(this.$refs.chartRef)
}

也可以获取组件中得到函数

$refs.chartRef.func()

异步dom更新

vue更新dom是异步的,如果在更新完成前获取其中的数据可能会得到undefined 可以使用$nextTick函数,这个函数会在dom更新后才触发

this.$nextTick(()=>{
	this.$refs.inp.focus()
})

此生命周期对应的是updated,但updated范围太大,整个页面的dom更新都会调用它,$nextTick是当前组件的

贡献者

pinkdopeybug

版权所有

版权归属：PinkDopeyBug

许可证：署名 4.0 国际 (CC-BY-4.0)