vue文档重点学习.docx
- 文档编号：27753261
- 上传时间：2023-07-04
- 格式：DOCX
- 页数：148
- 大小：224.62KB
vue文档重点学习.docx
《vue文档重点学习.docx》由会员分享，可在线阅读，更多相关《vue文档重点学习.docx（148页珍藏版）》请在冰豆网上搜索。
vue文档重点学习
Vue第一天
1.vue组件注册步骤
1.Vue.js的组件有三个步骤：
创建组件构造器（Vue.extend（）方法），注册组件（Vponent（））和实例化组件。
DOCTYPEhtml>
演示Vue
//1.创建一个组件构造器
varcomponent1=Vue.extend（{
template:
'
helloworld
'
}）;
//2.注册组件，并指定组件的标签为
Vponent（'component1',component1）;
//3.实例化组件
newVue（{
el:
'#container'
}）;
浏览器编译后html结构会变为
helloworld
页面运行显示为
helloworld
2.理解组件的创建和注册。
2-1Vue.extend（）是Vue构造器的扩展，调用Vue.extend（）创建的是一个组件构造器，该构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的html。
2-2Vponent（）是注册组件，需要2个参数，第一个参数是自定义组件的标签，第二个参数是组件的构造器。
2-3组件需要挂载到某个Vue的实例下，否则不生效。
如下实例：
DOCTYPEhtml>
演示Vue
//1.创建一个组件构造器
varcomponent1=Vue.extend（{
template:
'
helloworld
'
}）;
//2.注册组件，并指定组件的标签为
Vponent（'component1',component1）;
//3.实例化组件container1
newVue（{
el:
'#container1'
}）;
//3.实例化组件container2
newVue（{
el:
'#container2'
}）;
//不实例化container3因此第三个自定义标签是不会生效的
最终代码被渲染成为如下：
helloworld
helloworld
3.理解Vue全局注册和局部注册
调用Vponent（）注册组件时，组件的注册是全局的，如果想要使用组件的局部注册的话，可以用选项对象的components属性实现局部注册。
如下代码：
中间就把第二步注册组件哪项移到实例化组件里面来了；如下代码：
DOCTYPEhtml>
演示Vue
--不能使用component1组件，因为它是container1里面局部注册的-->
//1.创建一个组件构造器
varcomponent1=Vue.extend（{
template:
'
helloworld
'}）;
//3.实例化组件container1
newVue（{
el:
'#container1',
components:
{
'component1':
component1
}
}）;
//实例化container2是不生效的
newVue（{
el:
'#container2'
}）
实例化container2是不生效的，并且在浏览器控制台会报如下错误：
4.理解父组件和子组件。
在一个组件中包含另一个组件，那么另一个组件就是该组件的子组件。
如下代码：
DOCTYPEhtml>
演示Vue
//1.创建一个组件构造器
varChild=Vue.extend（{
template:
'
helloworld
'}）;
varParent=Vue.extend（{
//在组件内部使用组件
template:
'
helloworld
',components:
{
//局部注册Child组件
'child-component':
Child
}
}）;
//全局注册Parent组件
Vponent（'parent-component',Parent）;
//实例化组件
newVue（{
el:
'#container1'
}）
简单理解代码如下：
1.varChild=Vue.extend（...）定义一个Child组件构造器。
2.varParent=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元素为id='container1'里面去。
Child组件是在Parent组件中注册的，只能在Parent组件中注册的。
如下几种情况都不行的。
4-1以子标签的形式在父组件中使用；如下代码：
DOCTYPEhtml>
演示Vue
//1.创建一个组件构造器
varChild=Vue.extend（{
template:
'
helloworld
'}）;
varParent=Vue.extend（{
//在组件内部使用组件
template:
'
helloworld
',components:
{
//局部注册Child组件
'child-component':
Child
}
}）;
//全局注册Parent组件
Vponent（'parent-component',Parent）;
//实例化组件
newVue（{
el:
'#container1'
}）
上面调用子组件的方式是无效的，因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么，所以当parent-component运行的时候，在父组件使用自定义的子标签。
运行时会当做html的普通标签来渲染，但是它又不是普通的html标签，因此会被忽略掉。
4-2.在父组件标签外使用子组件。
js代码还是上面的一样，运行完成后，在浏览器下会报错如下：
5.理解组件的语法糖。
我们可以使用更简单的方式来注册组件。
5-1使用Vponent（）直接创建和注册组件。
如下代码：
DOCTYPEhtml>
演示Vue
//全局注册
Vponent（'component1',{
template:
'
helloworld222
'}）;
//实例化
varvm1=newVue（{
el:
'#container1'
}）;
Vponent（）的第一个参数是标签名称，第二个参数是一个选项对象，使用选项对象的template属性定义，使用该方式，在Vue源码中会调用Vue.extend（）方法。
注意：
在template元素中需要使用一个标签容器包围，比如我们可以把div元素去掉的话，只放内容的话，会报错如下：
5-2在选项对象的components属性中实现局部注册。
DOCTYPEhtml>
演示Vue
//全局注册，my-component1是标签名称
Vponent（'component1',{
template:
'
'}）
varvm1=newVue（{
el:
'#container1'
}）
//实例化局部注册
varvm1=newVue（{
el:
'#container2',
components:
{
//局部注册，component2是标签名称
'component2':
{
template:
'
component2
'},
//局部注册，component3是标签名称
'component3':
{
template:
'
component3
'}
}
}）;
6.学会使用script或template标签。
虽然语法糖简化了组件注册，但是在template选项中拼接了html元素，这导致View和C层的高耦合性。
幸运的是Vue.js提供了2种方式将javascript中的html模板分离出来。
6-1使用script标签, 如下代码：
DOCTYPEhtml>
演示Vue
helloworld
newVue（{
el:
'#container1',
components:
{
'component1':
{
template:
'#myComponent'
}
}
}）
注意：
使用
newVue（{
el:
'#container1',
components:
{
'component1':
{
template:
'#myComponent'
}
}
}）