模板语法

插值表达式

<h1 class="title">{{ title }}</h1>

{{ title }} -> 是插值表达式

mustache

地址

https://github.com/janl/mustache.js

安装

npm install mustache --save

使用

import Mustache from 'mustache';

var data = {
  title: 'This is my TITLE for MUSTACHE'
};

var html = Mustache.render(
  '<h1 class="title">{{ title }}</h1>',
  data
);

document.getElementById('app').innerHTML = html;

Vue的模板语法

template写法

const App = {
  data() {
    return {
      title: 'This is my TITLE for MUSTACHE',
      author: 'Lance',
      dateTime: new Date(),
      content: 'This is my CONTENT',
    }
  },
  template: `
    <div>
      <h1 class="title">{{ title }}</h1>
      <p>
        <span class="author">{{ author }}</span> - {{ dateTime }}
      </p>
      <p v-bind:title="content">{{ content }}</p>
    </div>
  `
}

Vue.createApp(App).mount('#app');

h函数写法

• 参数一：标签
• 参数二：属性集合
• 参数三：子元素

import { h } from 'vue';

const App = {
  data() {
    return {
      title: 'This is my TITLE for MUSTACHE',
      author: 'Lance',
      dateTime: new Date(),
      content: 'This is my CONTENT',
    }
  },
  // template: `
  //   <div>
  //     <h1 class="title">{{ title }}</h1>
  //     <p>
  //       <span class="author">{{ author }}</span> - {{ dateTime }}
  //     </p>
  //     <p v-bind:title="content">{{ content }}</p>
  //   </div>
  // `,
  render() {
    // h函数参数：
    // 1. 目标标签，2. 属性集合 3. 子元素
    return h(
      'div',
      {},
      [
        h(
          'h1',
          {
            class: 'title'
          },
          this.title
        ),
        h(
          'p',
          {},
          [
            h(
              'span',
              {
                class: 'author',
              },
              this.author
            ),
            ` - ${this.dateTime}`
          ]
        ),
        h(
          'p',
          {
            title: this.title
          },
          this.content
        )
      ]
    )
  }
}

Vue.createApp(App).mount('#app');

template 到真实节点