1、第 1 页Vue 第一天1.vue 组件注册步骤1.Vue.js 的组件有三个步骤： 创建组件构造器(Vue.extend()方法 )，注册组件(Vponent()和实例化组件。演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 2. 注册组件，并指定组件的标签为Vponent(component1, component1);/ 3. 实例化组件new Vue(el: #container);浏览器编译后 html 结构会变为 hello world页面运行显示为 hello world第 2 页2.
2、理解组件的创建和注册。2-1 Vue.extend() 是 Vue 构造器的扩展，调用 Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，选项对象的 template 属性用于定义组件要渲染的 html。2-2 Vponent() 是注册组件，需要 2 个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。2-3 组件需要挂载到某个 Vue 的实例下，否则不生效。如下实例：演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 2. 注册组件，并指定组件的标签为Vponen
3、t(component1, component1);/ 3. 实例化组件 container1new Vue(el: #container1);/ 3. 实例化组件 container2第 3 页new Vue(el: #container2);/ 不实例化 container3 因此第三个自定义标签是不会生效的最终代码被渲染成为如下：hello worldhello world3.理解 Vue 全局注册和局部注册调用 Vponent()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的 components 属性实现局部注册。如下代码：中间就把第二步注册组件哪项
4、移到实例化组件里面来了；如下代码：演示 Vue/ 1. 创建一个组件构造器var component1 = Vue.extend(template: hello world);/ 3. 实例化组件 container1new Vue(el: #container1,components: component1: component1第 4 页);/ 实例化 container2 是不生效的new Vue(el: #container2)实例化 container2 是不生效的，并且在浏览器控制台会报如下错误：4.理解父组件和子组件。在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。
5、如下代码：演示 Vue/ 1. 创建一个组件构造器var Child = Vue.extend(template: hello world);var Parent = Vue.extend(/ 在组件内部使用组件template: hello world ,components: / 局部注册 Child 组件第 5 页child-component: Child);/ 全局注册 Parent 组件Vponent(parent-component, Parent);/ 实例化组件new Vue(el: #container1)简单理解代码如下：1. var Child = Vue.extend
6、(.) 定义一个 Child 组件构造器。2. var Parent = Vue.extend(.) 定义一个 Parent 组件构造器。3. components: child-component: Child, 将 Child 组件注册到 Parent 组件，并将 Child 组件的标签设置为 child-component;4. template: 渲染 html 模板，找到 template 选项，然后使用 child-component 组件。5. 注册 Parent 组件 Vponent(parent-component, Parent);6. 最后实例化组件，需要到 html 元
7、素为 id=container1里面去。Child 组件是在 Parent 组件中注册的，只能在 Parent 组件中注册的。如下几种情况都不行的。4-1 以子标签的形式在父组件中使用；如下代码：演示 Vue第 6 页/ 1. 创建一个组件构造器var Child = Vue.extend(template: hello world);var Parent = Vue.extend(/ 在组件内部使用组件template: hello world,components: / 局部注册 Child 组件child-component: Child);/ 全局注册 Parent 组件Vponent
8、(parent-component, Parent);/ 实例化组件new Vue(el: #container1)上面调用子组件的方式是无效的，因为在 js 里面当父组件要需要的 html 模板 template 的内容的时候已经决定了需要渲染什么，所以当 parent-component 运行的时候，在父组件使用自定义的子标签。运行时会当做 html 的普通标签来渲染，但是它又不是普通的 html 标签，因此会被忽略掉。4-2. 在父组件标签外使用子组件。js 代码还是上面的一样，运行完成后，在浏览器下会报错如下：第 7 页5.理解组件的语法糖。我们可以使用更简单的方式来注册组件。5-1
9、使用 Vponent()直接创建和注册组件。如下代码：演示 Vue/ 全局注册Vponent(component1, template: hello world222);/ 实例化var vm1 = new Vue(el: #container1);Vponent()的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的 template 属性定义，使用该方式，在 Vue 源码中会调用 Vue.extend()方法。第 8 页注意： 在 template 元素中需要使用一个标签容器包围，比如我们可以把 div 元素去掉的话，只放内容的话，会报错如下：5-2 在选项对象的 compon
10、ents 属性中实现局部注册。演示 Vue/ 全局注册，my-component1 是标签名称Vponent(component1,template: This is the first component!)var vm1 = new Vue(el: #container1)/ 实例化 局部注册var vm1 = new Vue(el: #container2,第 9 页components: / 局部注册， component2 是标签名称component2: template: component2,/ 局部注册，component3 是标签名称component3: template
11、: component3);6.学会使用 script 或 template 标签。虽然语法糖简化了组件注册，但是在 template 选项中拼接了 html 元素，这导致 View 和 C 层的高耦合性。幸运的是 Vue.js 提供了 2 种方式将 javascript 中的 html 模板分离出来。6-1 使用 script 标签, 如下代码：演示 Vuehello world!new Vue(el: #container1,components: component1: template: #myComponent)第 10 页注意： 使用标签时，type 指定为 text/x-template，是告诉浏览器这不是一段 js 脚本，浏览器在解析html 文档时会忽略 script 标签内定义的内容。6-2 使用标签。不需要指定 type 属性。如下代码：演示 Vuehello world2222!new Vue(el: #container1,components: component1: template: #myComponent)7.理解使用 props。父组件的数据如何传给子组件呢？可以使用 props 把数据传给子组件。代码如下：
