本篇介绍Vue实例与DOM之间的映射。包含四个部分,整个结构的映射,元素节点的映射,文本节点的映射,属性的映射。
1、 整个结构
每个Vue唯一对应一个DOM结构。它的实现方式有三种,
第一种设置组件的template属性,它的值为html字符串,不建议使用。示例如下:
Vue.component('blog-post', { template: '<h3>{{ postTitle }}</h3>' })
第二种设置组件的el属性,类似于Jquery的选择器,通常使用ID选择器。为页面与Vue的混合形式
<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
第三种在编写当个页面时,将整个DOM结构用template标签包裹起来。最常见的形式。纯Vue形式。
<template> <div>This will be pre-compiled</div> </template>
2、文本节点
使用{{ vue.data.prop }}的形式,例如<div id="app"> {{ message }}</div>。message表示Vue对象的属性。
3、元素节点
使用v-html指令,例如<p v-html=”rawHtml”></p>。rawHtml为Vue的属性,是不可修改的html字符串。
4、属性
使用v-bind指令,或缩写形式。例如v-bind:attr=”prop”,prop为Vue的属性。缩写形式去掉v-bind。
5、slot
不限定内容,可以是任意的DOM结构。它的知识点有四部分。使用slot,设置默认值,给slot命名。slot作用域
5.1 使用
在子组件的DOM结构添加<slot><slot>之后,在父组件中可以自定义组件的内容。
示例如下:
// 子组件 Vue.component('random-div',{ // 随意的div结构 template:'<div><slot></slot></div>' }) // 父组件 <random-div> <template v-slot> <!-- 自定义内容 --> </template> </random-div>
5.2 默认值
在子组件<slot></slot>中添加的内容为组件的默认值。
// 子组件 Vue.component('random-div',{ // 随意的div结构 template:'<div><slot>默认值</slot></div>' })
当父组件中存在自定义内容时,会被替换。
5.3 作用域
父组件中只能使用父组件的属性,子组件只能使用子组件的属性。自定义内容中若引用子组件中的属性会抛错。
若想在父组件中使用子组件的属性,需要经过两个步骤
第一步,将子组件的属性绑定为slot的属性,示例中将子组件的childCompProp绑定为slot的slotProps属性。绑定多个时,可以将其封装为对象。
第二步,在父组件中,在自定义内容中使用slot的属性。
// 其中childCompProp表示子组件的属性 // slotProps为自定义的slot属性名 <slot v-bind:childCompProp="slotProps"> </slot> // 其中slotData为自定义名称,它表示slot的所有属性 // slotProps必须与子组件的名称相同,这里引用子组件中的slotProps <random-div> <template v-slot:default="slotData"> {{ slotData.slotProps}} </template> </random-div>
5.4 命名
当存在多个slot时,可以使用name属性为slot命名。
// 子组件 Vue.component('random-div',{ // 随意的div结构 template:'<div><slot>默认值</slot></div>' })
name的默认值为”default”。v-slot:name的形式可以缩写为#name。没有name时可以缩写为#。