vue文档重点学习Word文档格式.docx
- 文档编号:13730547
- 上传时间:2022-10-13
- 格式:DOCX
- 页数:127
- 大小:222.24KB
vue文档重点学习Word文档格式.docx
《vue文档重点学习Word文档格式.docx》由会员分享,可在线阅读,更多相关《vue文档重点学习Word文档格式.docx(127页珍藏版)》请在冰豆网上搜索。
title>
演示Vue<
/title>
/head>
divid="
container"
>
component1>
/component1>
/div>
/body>
scriptsrc="
./vue.js"
/script>
scripttype="
text/javascript"
//1.创建一个组件构造器
varcomponent1=Vue.extend({
template:
'
div>
helloworld<
'
});
//2.注册组件,并指定组件的标签为<
Vponent('
component1'
component1);
//3.实例化组件
newVue({
el:
#container'
/html>
浏览器编译后html结构会变为
页面运行显示为
helloworld
2.理解组件的创建和注册。
2-1Vue.extend()是Vue构造器的扩展,调用Vue.extend()创建的是一个组件构造器,该构造器有一个选项对象,选项对象的template属性用于定义组件要渲染的html。
2-2Vponent()是注册组件,需要2个参数,第一个参数是自定义组件的标签,第二个参数是组件的构造器。
2-3组件需要挂载到某个Vue的实例下,否则不生效。
如下实例:
container1"
container2"
container3"
//3.实例化组件container1
#container1'
//3.实例化组件container2
#container2'
//不实例化container3因此第三个自定义标签是不会生效的
最终代码被渲染成为如下:
3.理解Vue全局注册和局部注册
调用Vponent()注册组件时,组件的注册是全局的,如果想要使用组件的局部注册的话,可以用选项对象的components属性实现局部注册。
如下代码:
中间就把第二步注册组件哪项移到实例化组件里面来了;
--不能使用component1组件,因为它是container1里面局部注册的-->
components:
{
:
component1
}
//实例化container2是不生效的
})
实例化container2是不生效的,并且在浏览器控制台会报如下错误:
4.理解父组件和子组件。
在一个组件中包含另一个组件,那么另一个组件就是该组件的子组件。
parent-component>
/parent-component>
varChild=Vue.extend({
varParent=Vue.extend({
//在组件内部使用<
child-component>
组件
helloworld<
/child-component>
//局部注册Child组件
child-component'
Child
//全局注册Parent组件
parent-component'
Parent);
//实例化组件
简单理解代码如下:
1.varChild=Vue.extend(...)定义一个Child组件构造器。
2.varParent=Vue.extend(...)定义一个Parent组件构造器。
3.components:
{'
Child},将Child组件注册到Parent组件,并将Child组件的标签设置为child-component;
4.template:
渲染html模板,找到template选项,然后使用child-component组件。
5.注册Parent组件Vponent('
6.最后实例化组件,需要到html元素为id='
container1'
里面去。
Child组件是在Parent组件中注册的,只能在Parent组件中注册的。
如下几种情况都不行的。
4-1以子标签的形式在父组件中使用;
上面调用子组件的方式是无效的,因为在js里面当父组件要需要的html模板template的内容的时候已经决定了需要渲染什么,所以当parent-component运行的时候,在父组件使用自定义的子标签。
运行时会当做html的普通标签来渲染,但是它又不是普通的html标签,因此会被忽略掉。
4-2.在父组件标签外使用子组件。
js代码还是上面的一样,运行完成后,在浏览器下会报错如下:
5.理解组件的语法糖。
我们可以使用更简单的方式来注册组件。
5-1使用Vponent()直接创建和注册组件。
//全局注册
{
helloworld222<
//实例化
varvm1=newVue({
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- vue 文档 重点 学习