Vue3 learning – template syntax

Template syntax

JSX is used in React, so the corresponding code is written with a syntax similar to embedding HTML into JS. After that, Babel will compile JSX into the react. createElement function call.

Vue also supports the JSX development pattern, but for the most part, it uses htML-based template syntax.

In a template, you can declaratively bind the DOM to the data of the underlying component instance (Mustache syntax binds corresponding data in the template)

In the underlying implementation, Vue compiles the template into a virtual DOM rendering function to call

Mustache grammar

If we want to display data to a template, the most used syntax is “Mustache” (double brace) text interpolation

The object returned by data is added to the Vue’s responsive system, so when the data in data changes, the corresponding content is automatically updated.

<! -- 1. Basic usage -->
<h2>{{ msg }}</h2>

<! You can use more than one mustache at the same time.
<h2>{{ msg }} --- {{ msg }}</h2>

<! You can use any legal JS expression with mustache -->
<h2>{{ msg.toUpperCase() }}</h2>
<h2>{{ isLogin ? 'Login Out': 'Login In' }}</h2>

<! You can call functions and use computed properties in Mustache -->
<h2>{{ reverseMsg }}</h2>
<h2>{{ getReverseMsg() }}</h2>
Copy the code

Common instruction

v-once

V-once is used to specify that an element or component is rendered only once

When data changes, the element or component and all its children are treated as static and skipped

This directive can be used for performance optimization

<! -- count does not change -->
<h2 v-once>{{ count }}</h2>

<! -- Elements and their children are no longer re-rendered -->
<div v-once>
  <h2>{{ count }}</h2>
</div>
Copy the code

v-text

<h2>{{ msg }}</h2>

<! -- equivalent to -->
<h2 v-text="msg"></h2>
Copy the code

v-html

When parsing a template, Vue parses the data in data as a string

If the data in data is an HTML tag, Vue still renders it as a string

If you need vUE to render them as HTML tags, you can use V-HTML

However, because this data may have come from a third party, ensure that it is reliable to avoid XSS attacks

<! --<h2>Hello World</h2> -->
<h2>{{ msg }}</h2>

<! -- Hello World -->
<h2 v-html="msg"></h2>
Copy the code

v-pre

The V-pre is used to skip the compilation of the element and its children, displaying the original Mustache tag

V-pre can skip nodes that do not need to be compiled to speed up compilation

<h2 v-pre>{{ msg }}</h2>
<h2>{{ msg }}</h2>
Copy the code

v-bind

V-bind –> Dynamically bind attributes –> dynamically bind one or more attributes, or a component prop, to an expression

<a v-bind:href="link">google</a>

<! -- Short ===> Grammar sugar -->
<a :href="link">google</a>
Copy the code

Use V-bind to bind the class

1. General binding

   <span :class="active">Hello World</span>
   Copy the code

2. Object syntax

   <! -- Object syntax: {style: Boolean value} Boolean is true, style is displayed, false, style is not displayed -->
   <h2 :class="{active: isActive}">Hello World</h2>
   
   <! The key in the object can be a variable.
   <h2 :class="{[active]: isActive}">Hello World</h2>
   
   <! Can also have multiple key-value pairs -->
   <h2 :class="{active: isActive, foo: isFoo}">Hello World</h2>
   
   <! -- Default class combined with dynamic class -->
   <h2 class="foo" :class="{active: isActive}">Hello World</h2>
   
   <! -- Extract to a separate object -->
   <h2 :class="classObj">Hello World</h2>
   
   <! -- Extract to method or compute property -->
   <h2 :class="getClassObj()">Hello World</h2>
   Copy the code

3. Array syntax

   <! Array can be a string or a variable
   <h2 :class="['foo', active]">Hello World</h2>
   
   <! -- can be a ternary operator -->
   <h2 :class="['foo', isActive ? 'active' : '']">Hello World</h2>
   
   <! -- The return value of an item in the array is Boolean, whether true or false, the item is not displayed in the style -->
   <h2 :class="['foo', isActive && 'active']">Hello World</h2>
   
   <! Nested object syntax in array -->
   <h2 :class="['foo', { 'active': isActive }]">Hello World</h2>
   Copy the code

Use v-bind to bind style

You can use V-bind :style to bind some CSS inline styles

CSS property names can be either camelCase or kebab-case delimited (remember to use quotes)

1. Object syntax

   <! Attribute values should be wrapped in strings, otherwise they will be parsed as variables.
   <h2 :style="{color: 'red', backgroundColor: 'gray'}">Hello World</h2>
   
   <! Attribute names can be humped or delimited, or enclosed in quotation marks if they are delimited.
   <h2 :style="{color: 'red', 'background-color': 'gray'}">Hello World</h2>
   Copy the code

2. Array syntax

   <! Each item in the array of objects is a style object, which can be written directly or separated into an object to reference.
   <h2 :style="[{color: 'red'}, {backgroundColor: 'gray'}]">Hello World</h2>
   Copy the code

Dynamically bound properties

If the attribute name is not fixed, we can define it using the format :[attribute name]= “value”

This way of binding is called dynamically binding properties

<! Property names are either all lowercase or underlined. HTML is case-insensitive, so property names are converted to all lowercase (propertyName -> propertyName). If the attribute name is key, the key will be used by vue as a special attribute when the element is updated, so it will not be rendered on the element's attribute. Attribute values use V-bind, so if the binding is a value, it needs to be quoted manually, otherwise it will be treated as a variable for parsing -->
<h2 :[name] ="'propertyValue'">Hello World</h2>
Copy the code

Bind an object

If we want to bind all the properties of an object to an element, we can bind an object directly. Vue expands the object before passing it, which is very helpful for passing props.

<! -- <h2 name="Klaus" age="23">Hello World</h2> -->
<h2 v-bind="userInfo">Hello World</h2>

<! -- Short -- Grammar sugar -->
<h2 :="userInfo">Hello World</h2>
Copy the code

v-on

In front end development, we need to constantly interact with users in a variety of ways

How can you listen for events in Vue without using the V-ON directive

<button v-on:click="handleClick">click me</button>

<! - short - >
<button @click="handleClick">click me</button>
Copy the code

<! - v - on the attribute value can be a function of | inline statement | object - >

<! -- function -->
<button v-on:click="handleClick">click me</button>

<! -- inline statement -->
<button v-on:click="count++">{{ count }}</button>

<! -- object -- bind multiple events at the same time -->
<button v-on="{ click: handleClick, mouseup: handleMouseUp }">click me</button>
Copy the code

Parameter passing

<! If the function does not have any arguments, vue will give the event handler an argument by default.
<button v-on:click="handleClick">click me</button>

methods: {
  handleClick(e) {
    console.log(e)
  }
}
Copy the code

<! $event = event; $event = event; $event = event;
<button v-on:click="handleClick('msg', $event)">click me</button>

methods: {
    handleClick(msg, e) {
      console.log(e, msg)
    }
}
Copy the code

Event modifier

V-on supports modifiers, which are equivalent to some special handling of events

<div @click="handleDIVClick">
  <button @click.stop="handleBtnClick">click me</button>
</div>
Copy the code

String emulation and DOM templates

String template

A string template is a template defined in a template written in vUE

• Vue’s single-file component template
• The template for the value of the template property when defining the component (when not extracted)

String templates do not participate in page rendering during page initialization, but are parsed and compiled by vUE before being rendered by the browser, so they are not subject to the case-insensitive effects of HTML.

Vue.component('Cpn', {// MyComponent is defined in template and is parsed by vue before rendering, so its name is not limited to HTML's case-insensitive template: '<div MyId="123"><MyComponent>hello, world</MyComponent></div>'})<div id="app">
  <Cpn />
</div>
Copy the code

Dom template

Dom templates (also known as Html templates)

Dom templates are written in HTML files that are parsed and rendered by browsers as soon as they are opened, i.e. parsed by browsers before being parsed by Vue

Because HTML is case insensitive, things like myComponent will be converted by the browser to myComponent, which will cause problems when handed to vue for parsing

<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Component</title>
  </head>
  <body>
    <div id="app"> 
      Hello Vue
      <MyComponent></MyComponent>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script >
      // MyComponent is resolved to MyComponent, so vue can't find MyComponent and will report an error
      Vue.component('MyComponent', {
        template: '
       

         Component class capacity 
       
'
      });
      new Vue ({
        el: '#app'
      });
    </script>
  </body>
</html>
Copy the code

Therefore, Vue recommends using underlined components (such as my-Component) rather than humped components (such as MyComponent).

extension

There are a few attributes in HTML that are specifically defined by a camel (such as the viewBox attribute in an SVG tag), so there are no problems with using them in camel form

<svg style="width:150px; height:300px" viewBox="0 0 400 400">
  <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>
Copy the code

But for uniformity, sometimes we want it to be defined with a dash like any other attribute. For normal parsing of such tags, Vue provides the Camel modifier

The. Camel modifier allows the V-bind property name camel when using DOM templates,

There is no need to use.camel when using string templates or compiling with vue-Loader, as vUE will take care of it for us at this point.

<! -- : viewBox. Camel will compile to viewBox ps: Use camel modifier, must be in the case of v - bind: the view - box. Camel = = = > viewBox if not combined with v - bind, will be resolved as the view - box. Camel = = = > view - box. Camel - >
<svg style="width:150px; height:300px" :view-box.camel="'0 0 400 400'">
  <circle cx="200" cy="200" r="200" fill="#fdd" stroke="none"></circle>
</svg>
Copy the code

<! Camel :data-property.camel: dataProperty. camel :data-property.camel: dataProperty -->
<div :data-property.camel="'value'">Hello Vue</div>
Copy the code