Vue Template

• Describe the structure and content of the app
• Created in HTML or JS
• It's the Presentation Layer

<div id="app">
  <h3>My Identicon Generator</h3>

  <div>
    Input
    <input v-on:input="onInput" />
    <!-- v-on:input is a directive -->
  </div>

  <!-- Computed value -->
  <div>Output Svg: {{ identicon }}</div>

  <!-- Computed value display as a html -->
  <div>
    Output Image:
    <div v-html="identicon"></div>
  </div>
</div>

new Vue({
  el: '#app'
  data: { ... }
  methods: { ... }
  computed: { ... }
  template: `
    <div>
      <h3>My Identicon Generator</h3>
      <div>
        Input
        <input v-on:input="onInput" />
      </div>
      <div>Output Svg: {{ identicon }}</div>
      <div>
        Output Image:
        <div v-html="identicon"></div>
      </div>
    </div>
  `
});

Directives

• Directives is a syntax in Vue Template that enhances the behavior of normal HTML code
• E.g., v-on:input="someFunction"
• Vue instance monitors the directives defined in the templated

String interpolation

• Computed functions or State variables can be accessed in the vue template
• For that, the syntax {{ variable-name }} is used
• Javascript logic can be used in interpolated values (but it's good to replace the logic all inside the computed logic)
• E.g., {{ textInput + 'abcd' }}
• E.g., {{ textInput.split('').reverse().join('') }}