preface

Start learning Vue3 again this month, from understanding basic usage to simulation implementation!

Related articles in this series are as follows:

The base class

  1. Understand the application examples and component instance | relearn Vue3

Handwriting implementation class

  1. Simulate the Vue3 initialization process
  2. Simulate implementation of all Vue3 responsive APIS (1)

This is the fourth article on Vue’s template syntax

The basic directory is as follows:

Basic introduction

Mainly talk about the following three points:

1. Vue’s template syntax is based on HTML

On the one hand, developers can declaratively bind the DOM to the data of the underlying component instance, and on the other hand, both can be parsed by canonical browsers and HTML parsers

2. In the underlying implementation, Vue compiles templates into virtual DOM rendering functions

In fact, in our previous handwriting, this point still needs to be perfected, as follows:

compile(template) {
    return function render() {
        const h1 = document.createElement('h1')
        h1.textContent = this.count
        returnh1; }}Copy the code

In a real implementation, compile would take a template and turn it into a virtual DOM through the render function, rather than returning the real DOM as described above. This will be improved in future handwriting

3. Prefer native, write render functions directly, using optional JSX syntax

Such as:

import Xxx from './Xxx.vue'

new Vue({
  el: '#demo'.render() {
    return (
      <Xxx>
        <span>Hello</span> world!
      </Xxx>)}})Copy the code

As you can see, this approach is closer to the syntax of the template

The interpolation

This punishment has four points:

1. Text interpolation

Textual interpolation is accomplished using Mustache syntax, which is double braces, again using the Vue3 project created by Vite:

//components/HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>
  <button @click="count++">count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>
Copy the code

In the above code, MSG and count are essentially text interpolations that automatically look for the corresponding properties in the component instance

Note that the double braces interpret the data as plain text, not HTML code

Such as:

<template>
  <h1>{{ myHTML }}</h1>
</template>

<script>
export default {
  name: "HelloWorld".data() {
    return {
      myHTML: "
 I am a paragraph 
"}; }};</script>
Copy the code

The results are as follows

You can see it’s being processed as text

Normally, the user interface will be updated as the data changes, but we can use v-once to interpolate once, meaning that it will not be updated after that. Take helloWorld.vue as an example

<template>
  <h1>{{ myHTML }}</h1>
  <h1>{{ msg }}</h1>
  <button @click="count++" v-once>count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,},data() {
    return {
      count: 0.myHTML: "
 I am a paragraph 
"}; }};</script>
Copy the code

When the button is clicked, the count value does not change, which is the concept of one-shot interpolation

2. Raw HTML

In the example above, the attribute myHTML is treated as text, but we want to parse it as HTML. What if?

Vue provides v-HTML directives to output real HTML, as shown below

//components/HelloWorld.vue
<template>
  <h1 v-html="myHTML"></h1>
  <h1>{{ msg }}</h1>
  <button @click="count++" v-once>count is: {{ count }}</button>
  <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,},data() {
    return {
      count: 0.myHTML: "
 I am a paragraph 
"}; }};</script>
Copy the code

The results are as follows

You can see that it has successfully parsed into HTML. However, the use of V-HTML to dynamically render HTML is very dangerous and prone to XSS attacks, so it needs to be used with caution

3. Attribute interpolation

Interpolation of attributes in templates can be easily achieved by V-bind

<button v-bind:disabled="isButtonDisabled">button</button>
Copy the code

The state of a button is determined by the value of isButtonDisabled

Support for JavaScript expressions

Vue provides full JavaScript expression support for all data bindings

But each binding can only contain a single expression, so statements cannot be used

{{ var a = 1 }}// Invalid
Copy the code

instruction

This punishment has four points:

1. Introduction

Vue directives are essentially special properties prefixed with V -, such as:

 v-bind:disabled="isButtonDisabled"
Copy the code

As mentioned above, the value of most directives is a single JavaScript expression

In plain English, the directive’s job is to affect the DOM in a responsive way when the value of an expression changes

Parameters of 2.

Some specific instructions can take specific arguments, separated by colons, such as

v-bind:href="xxx"
Copy the code

3. Dynamic parameters

Directive arguments can use JS expressions, which are enclosed in square brackets []

4. The modifier

The modifier starts with a full stop. A specified suffix, as:

v-on:submit.prevent="xxx"
Copy the code

The prevent modifier means to prevent default events

Instruction abbreviation

There are two points here

Vue provides shorthand for some frequently used instructions

1. Common abbreviations

V-bind is omitted

V minus on, or at sign

2. Precautions

Conventions for dynamic parameter values

  • Dynamic parameters are expected to result in a string, with an exception value ofnull
  • Any other value that is not a string will trigger a warning

Expression conventions for dynamic parameters

  • Certain characters, such as Spaces and quotes, are placed inHTML attributeIt’s invalid in the first name, soVueThere are some syntactic constraints on dynamic parameter expressions
  • You can use expressions without Spaces or quotes, or replace some complex expressions with evaluated attributes

JS expression

  • Template expressions are sandboxed and can only access a whitelist of global variables, such asMath andDate
  • You should not attempt to access user-defined global variables in a template expression

conclusion

To make it easier to view, I’ve distilled everything into one image

PS: The picture suggests using a large screen device

END~

That’s all for template syntax

If you have any questions, please leave a message. Thank you