前端——框架——Vue——DOM

　　本篇介绍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时可以缩写为#。