Vue组件化编程
一、组件与组件化
1 组件的定义：
实现应用中局部功能代码和资源的集合（html/css/js/image....)
2 为什么要使用组件：
一个界面的功能很复杂
3 使用组件的作用是什么：
复用编码，简化项目编程，提高运行效率
4 什么是组件化：
当应用中的功能是多组件来编写的，那这个应用就是一个组件化的应用。
5 使用组件方式编写应用：
二、使用组件的三大步骤
为了方便学习和理解，以下代码是在html文件中实现功能为：定义了School组件，然后对School组件进行注册
<script type="text/javascript">
// 定义组件
// Vue.extend()可省略，即使不写，Vue也会执行Vue.extend()函数
const School = Vue.extend({
# 使用name属性配置指定组件在开发者中呈现的名字
name:'School',
# 使用template配置组件结构
template:`
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
# data必须写成函数
data(){
return {
name:'尚硅谷',
address:'北京'
}
}
})
# 全局注册（全局注册和局部注册，只会二选一）
Vue.component('School',School)
new Vue({
el:'#root',
data:{
msg:'欢迎学习Vue!'
},
# 局部注册
components:{
# 同名时可以把 School:School 简写成 School
School:School
}
})
</script>
2.1 定义组件
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别，区别如下：
a. el不要写，为什么？
最终所有的组件都要经过一个vm的管理，由vm中el决定服务哪个容器。
b. data必须写成函数，为什么？
避免组件被复用时，数据存在引用关系。
另外，定义组件时，补充三点：
（1）使用template可以配置组件结构
（2）组件的命名官方推荐方法：使用大驼峰标识（前提是脚手架项目中）
（3）定义组件是可以使用简写的方法（见如下示例代码）
consts School = Vue.extend(options) 可简写成 consts School = options
但是，必须要强调一点，虽然没有写Vue.extend(),但是程序实际上是调用了Vue.extend()
g. 组件的嵌套 （用的不多，这里就略过了）
2.2 注册组件
a. 局部注册：new Vue的时候传入components选项
new Vue({ el:'#root', data:{ msg:'欢迎学习Vue!' }, components:{School} })
b. 全局注册：Vue.component( '组件名' , 组件)
Vue.component('School',School)
2.3 使用组件
<School/>
三、单文件组件
在vs-code里面编写vue组件的时候，建议先安装一个插件：Vetur
3.1 一个.vue文件的组成由3个部分组成，模版页面如下：
<template> <!-- 组件的结构 --> </template> <script> // 组件交互相关的代码（数据，方法等等）
</script> <style> /* 组件的样式 */ </style>
以School组件为示例，创建一个School.vue文件，里面编写内容：
# template标签不参与结构编译，即编译后会被去掉
<template> <div class="backgroud"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2> <button @click="showName">点我提示学校名</button> </div> </template> <script> export default { name:'School', data(){ return { name:'尚硅谷', address:'北京昌平' } }, methods: { showName(){ alert(this.name) } } } </script> <style> .backgroud { background-color: orange; } </style>
补充一些知识点：export暴露 (es模块化的知识点) 的三种方式：
分别暴露
export const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } })
统一暴露
const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } }) export {School}
默认暴露，一般会使用默认暴露，因为默认暴露时，引入会比较简单
const School = Vue.extend({ data() { return { name: "尚硅谷", address: "北京昌平" } }, methods: { showName() { alert(this.name) } } })
export default School
可简写为：
export default {
name: 'School',
data() {
return {
name: "尚硅谷",
address: "北京昌平"
}
},
methods: {
showName() {
alert(this.name)
}
}
}
分别暴露和统一暴露时的引入方式
import {School} from ./components/School
默认暴露的引入方式
import School from ./components/School
3.2 引入组件
Vue中有一个非常重要的组件 —— App.vue，它的作用是汇总所有组件（说明一点：Student.vue组件和School.vue组件类似）
<template> <div> <School></School> <Student></Student> </div> </template> <script> //引入组件，.vue可省略，这种引入方式是es6的知识点 import School from './components/School.vue' import Student from './components/Student.vue' export default { name:'App',
// 局部注册 components:{
// School:School可简写成School
School: School,
Student: School
} } </script>
3.3 映射成标签
import School from './components/School' import Student from './components/Student' export default { name:'App', components:{School,Student} }
3.4 使用组件标签
在template标签下，必须有div标签，也就是根元素，否则编译会不通过
<template> <div> <School></School> <Student></Student> </div> </template>
补充一个知识点：
Vue插件
功能：用于增强vue
export default {
install(Vue,x,y,z){
console.log(x,y,z)
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
//定义全局指令
Vue.directive('fbind',{
//指令与元素成功绑定时（一上来）
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x:100,
y:200
}
},
})
//给Vue原型上添加一个方法（vm和vc就都能用了）
Vue.prototype.hello = ()=>{alert('你好啊')}
}
}
引入和使用插件
//引入插件 import plugins from './plugins' //使用插件 Vue.use(plugins,1,2,3)
