vue文档分析和总结.docx

Vue第一天

Vue.js的组件有三个步骤：创建组件构造器(Vue.extend()方法)，注册组件(Vponent())和实例化组件。

!DOCTYPEhtml

html

body

head

title演示Vue/title

/head

divid=container

component1/component1

/div

/body

scriptsrc=./vue.js/script

scripttype=text/javascript

//1.创建一个组件构造器

varcomponent1=Vue.extend({template:divhelloworld/div

});

//2.注册组件，并指定组件的标签为component1Vponent(component1,component1);

//3.实例化组件newVue({

el:#container

});

/script

/html

浏览器编译后html结构会变为

divid=container

divid=container

divhelloworld/div

divhelloworld/div

/div

/div

页面运行显示为

页面运行显示为

helloworld

第1页

PAGE3

PAGE3

第 页

2.

2.

2-1Vue.extend()是Vue构造器的扩展，调用Vue.extend()创建的是一个组件构造器，该构造器有一个选项对象，

选项对象的template属性用于定义组件要渲染的html。

2-2Vponent()是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造

器。

2-3组件需要挂载到某个Vue的实例下，否则不生效。

如下实例：

!DOCTYPEhtml

!DOCTYPEhtml

html

html

body

body

head

head

title演示Vue/title

title演示Vue/title

/head

/head

divid=container1

component1/component1

component1/component1

/div

/div

divid=container2

divid=container2

component1/component1

component1/component1

/div

/div

divid=container3

divid=container3

component1/component1

component1/component1

/div

/body

/body

scriptsrc=./vue.js/script

scriptsrc=./vue.js/script

scripttype=text/javascript

scripttype=text/javascript

//1.创建一个组件构造器

//1.创建一个组件构造器

varcomponent1=Vue.extend({

varcomponent1=Vue.extend({

template:divhelloworld/div

template:divhelloworld/div

});

});

//2.注册组件，并指定组件的标签为component1

//2.注册组件，并指定组件的标签为component1

Vponent(component1,component1);

Vponent(component1,component1);

//3.实例化组件container1

//3.实例化组件container1

new

newVue({

el:#container1

el:#container1

});

});

//3.实例化组件container2

//3.实例化组件container2newVue({

el:#container2

});

});

//不实例化container3因此第三个自定义标签是不会生效的

//不实例化container3因此第三个自定义标签是不会生效的

/script

/script

/html

/html

最终代码被渲染成为如下：

最终代码被渲染成为如下：

divid=container1divhelloworld/div/divdivid=container2divhelloworld/div/div

3.

3.

调用Vponent()注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象

的compon