Vue组件化开发（进阶）

1.Vue基础语法

Vue实例

Vue是一个基于JvaScript的、自底向上的、渐进式的、前端开发框架
构建的项目主要是以Vue实例为核心，和页面视图之间进行数据双向绑定，通过组件化的方式开发前端项目的框架

Vue实例配置

el：挂载的HTML节点，可以通过$mount(‘#app’)函数的方式替换
data：挂载的数据
methods：挂载的普通函数
filters：挂载的私有过滤器
watch：挂载的侦听器
computed：挂载的计算属性
components：挂载的私有组件
beforeCreate（）：生命周期函数/生命周期钩子
created()
beforeMount()
mounted()
beforeUpdate()
updated
beforeDestory()
destoryed()
activated() 组件缓存时才会出现的生命周期钩子
deactivated() 组件缓存时才会出现的生命周期钩子

挂载：标识一个对象和另一个对象之间添加了某个特定的关联关系，并将对象加载到内存中使用的过程
Vue指令

v-text/v-html/v-once
v-if/v-show
v-if/v-for
v-on
v-model

Vue事件和函数

v-on绑定事件
Vue实例中：methods声明事件触发的函数

Vue过滤器

全局过滤器
Vue.filter(‘过滤器名称’,(dat)=>{处理函数})
私有过滤器/局部过滤器

...
filters:{
	'过滤器名称'(dat){
		处理函数
	}
}
...

Vue侦听器
声明在实例的watch选项上

new Vue({
	watch:{
		监听的变量:{
			handler(newValue,oldValue)
		},
		deep:true  //深度监听
	}
})

Vue计算属性
声明在实例的computed属性上

new Vue({
	computed：{
		计算属性名称() {
				处理数据的运算
		}
	}
})

Vue组件
组件是Vue的核心，包含全局组件、局部组件（私有组件）

Vue组件的传值

父子传值：自定义属性
子父传值：自定义事件
组件间传值:自定义事件构建的事件中心

2.组件间数据传递

(示例只展示核心代码)

1.父组件给子组件传递数据

父组件：Parent.vue

...
<p>父组件中的数据：{{pData}}</p>
<Child :msgFromParent='pData' />
...

子组件:Child.vue

<p>接收来自父组件的数据{{msg}}</p>

...
props:['msgFromParent'],
data(){
	return {
		msg:this.msgFromParent
	}
}
...

注意：不推荐子组件中，直接通过自定义属性名称修改父组件传递的数据

自定义属性数据是单向绑定
通过自定义属性名称修改数据不会同步父组件中数据，修改失败
通过自定义属性名称修改数据导致数据发生混乱，不推荐（可以通过计算属性或函数将数据计算之后渲染到页面）

关于自定义属性的使用：
数组格式使用方式比较常见，编写方式最为简洁，一般数据的争取欸选哪个校验都会放在HTML中直接处理
对象格式使用方式比较常见，编写的时候需要注意类型校验和默认值问题

2.子组件传值给父组件

子组件通过自定义事件的方式给父组件进行数据传递
子组件：Child.vue

<button @click="trasnferData">传递数据给父组件</button>

...
data(){
	return{
		cdata:'子组件数据'
	}
},
methods:{
	transferData(){
		//触发子组件中的自定义事件
		this.emit('child-event',this.cdata)
	}
}
...

父组件：Parent.vue

<Child @child-event='getData'></Child>
<p>{{msg}}</p>

...
data(){
	return{
		msg:''
	}
},
methods:{
	getData(...args) {
		this.fromChild = args
	}
}
...

3.组件之间互相传递数据

事件中心：本质上就是相当于中间对象处理数据，发送数据和接收数据保障都是同一个对象在操作(vm.js)

import Vue from 'vue'
const vm = new Vue()
export default vm

发送数据的组件

import vm from 'vm'
vm.$emit(事件名,数据)

接收数据的组件

import vm from 'vm'
getData(){
	vm.$on(事件名,(...args)=>{
		this.msg = args
	})
}
created() {
	this.getData()
}

3.插槽

使用场景：列表展示部分视图结构一模一样，但事实部分数据格式和视图样式有差异，Vue插槽可以让不同的视图内容部分，由组件的使用者决定具体的内容展示，将内容通过闭合标签内容的方式插入到插槽位置

1.匿名插槽

创建组件 Demo.vue

<div>
	<!--组件中预留的插槽位置，使用组件时传入的内容，会自动替换到指定的位置-->
	<slot></slot>
</div>

包含插槽的组件使用

<Demo>
	<!--闭合标签内部的内容，用于替换插槽中的内容-->
	<button>点我</button>
</Demo>

2.具名插槽

项目中的组件，大部分情况下差异化视图位置不止一处，Vue中提供了插槽的扩展操作：具名插槽

<header>
	<slot name='header'></slot>
</header>
<footer>
	<slot name='footer'></slot>
</footer>

具名插槽的使用

<Demo>
	<template v-slot:header>
		替换插槽 name=header内部的内容
	</template>
	<template #footer>  <!--#插槽的简写形式-->
		替换插槽 name=footer内部的内容
	</template>
</Demo>

3.作用域插槽

项目中使用插槽出现一个程序执行的逻辑问题，页面中可能由于插槽的存在，导致对应组件的数据无法正常操作
Vue针对插槽中需要操作数据的情况，提供了作用域插槽，可以通过插槽属性进行数据的传递

<slot :row='user' :my-name='user.name'></slot>

父组件中使用插槽

<!--prop中式slot标签的属性和值的对象数据-->
<template v-slot='prop'>
	<button @click='edit(prop)'>编辑</button>
</template>

4.ref DOM操作

尽管Vue中不建议操作DOM，但是就项目的复杂性而言，不可避免的会出现需要执行DOM操作的内容,Vue提供了一个引用操作ref属性，专门用于DOM操作功能的支持，可以操作普通标签，也可以操作组件数据

<img ref='logo' src='index.jpg'>
<button @click='getRefs'>点击获取refs</button>

...
getReft(){
	let img = this.$refs.logo
	img.style.width = '300px'
}
...

5.第三方插件的使用

前端开发中Vue经常需要依赖第三方插件如jQuery等，第三方组件/模块都提供了基于Vue环境的插件可以下载安装并使用

npm install jQuery -S

import $ from 'jQuery'
...
$('img').animate({width:300,height:300},2000)
...

若一个项目中jQuery需要在大部分组件中使用，单页面引入的方式就会比较繁琐，此时可以在入口文件上，将jQuery挂载给Vue的原型对象，在任何Vue实例页面中都可以直接使用jQuery

import $ from 'jQuery'
//挂载到Vue的原型对象
Vue.prototype.$ = $

Vue语法基础
Vue语法进阶
Vue功能进阶
Vue脚手架
Vue组件基础
VueRouter