vue学习53~60（Vue组件化编程）
2 Vue组件化编程 2.1 模块与组件、模块化与组件化 2.1.1 模块 理解:向外提供特定功能的js程序,一般就是一 个js文件为什么: js 文件很多很复杂作用:复用js,简化js的编写,提高js运行效率 2.1.2 组件 理解:用来实现局部(特定)功能效果的代码集合(html/css/js/image…)为什么：一个界面的功能很复杂作用：复用编码，简化项目编码，提高运行效率 2.1.3 模块化
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
2.1.4 组件化
当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。
2.2 非单文件组件 基本使用
Vue中使用组件的三大步骤：
定义组件
使用Vue.()创建，其中和new Vue()时传入的那个几乎一样，但也有点区别；
区别如下：
讲解一下面试小问题：data必须写成函数：
这是 js 底层设计的原因：举个例子
对象形式
let data = {a: 99,b: 100
}let x = data;
let y = data;
// x 和 y 引用的都是同一个对象，修改 x 的值， y 的值也会改变
x.a = 66;
console.loh(x); // a:66 b:100
console.log(y); // a:66 b:100
函数形式
function data() {return {a: 99,b: 100}
}
let x = data();
let y = data();
console.log(x === y); // false
// 我的理解是函数每调用一次就创建一个新的对象返回给他们
备注：使用可以配置组件结构。
创建一个组件案例：Vue.() 创建
<script type="text/javascript">Vue.config.productionTip = false//第一步：创建school组件const school = Vue.extend({template:`学校名称：{{schoolName}}
学校地址：{{address}}
`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。data(){return {schoolName:'尚硅谷',address:'北京昌平'}},methods: {showName(){alert(this.schoolName)}},})//第一步：创建student组件const student = Vue.extend({template:`学生姓名：{{studentName}}
学生年龄：{{age}}
`,data(){return {studentName:'张三',age:18}}})//第一步：创建hello组件const hello = Vue.extend({template:` 你好啊！{{name}}
`,data(){return {name:'Tom'}}})
script>
注册组件
局部注册
<script>//创建vmnew Vue({el: '#root',data: {msg:'你好啊！'},//第二步：注册组件（局部注册）components: {school: school,student: student// ES6简写形式// school,// student}})
script>
全局注册
<script>//第二步：全局注册组件Vue.component('hello', hello)
script>
写组件标签
<div id="root"><hello>hello><hr><h1>{{msg}}h1><hr><school>school><hr><student>student>
div>
几个注意点：
关于组件名：
一个单词组成：
多个单词组成：
备注：
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
eg:
const s = Vue.extend({name: 'atguigu',template: `学校名称：{{name}}
学校地址：{{address}}
`,data() {return {name: 'yaya',address:'北京'}}
})
