Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "what is the template syntax in vue", the content is detailed, the steps are clear, the details are handled properly, I hope this article "what is the template syntax in vue" can help you solve your doubts, the following follows the editor's ideas slowly in depth, together to learn new knowledge.

First, template syntax

Template syntax can be divided into interpolation syntax and instruction syntax.

1. Interpolation syntax

The interpolation syntax is represented by two curly braces to interpret the content of the tag body. The xxx in {{xxx}} must be a js expression, and xxx can automatically read the attributes defined in the instance after it is parsed. (learn video sharing: vuejs tutorial)

Label body: this position is the label body. Take a chestnut.

Interpolation syntax [interpolation syntax is tag body] Hello, {{name}} [Hello, {{name}} is tag body]

Js expression: can produce a value, to give a few examples to understand

Name

1-1

Ok? 'YES': 'NO'

Js code (statement) is a special kind of js code that produces a value js code (statement): give some common examples

If () {}

For () {}

two。 Instruction syntax

Instruction syntax begins with v -, which should be familiar to you, including v-for, v-on, and v-bind.

Its function is to parse tags (including tag attributes, tag body content, and binding events), and the function is very powerful. Let's take a use case of v-bind, which is used to bind attributes, and v-on is used to bind events:

Interpolation syntax Hello, {{name}} instruction syntax click me! {{index+1}}. {{item.toUpperCase ()}} new Vue ({el:'#app', data: {name:' Class 2 in three years', url: "https://www.baidu.com", Student: {name: ["Sam", "Bob", "Alice"]})

The result is shown in the following figure:

Here, href href hrefs = "url". The contents of the double quotes should also be written as an url expression. V-bind binds the href attribute to the url, so that the url attribute https://www.baidu.com in the data can be read correctly.

Note: if you do not add v-bind, write as href= "url", then the contents of the double quotation marks will program the string to assign a value to href.

Second, the relationship between container and instance

The relationship between container and instance is 1:1, that is, only one container can be bound to an instance. The following two situations are not allowed:

1 container with id as app and 2 instances with el as app: after the name in the container is parsed, only the data attribute will be read in the first instance.

Two containers whose id is app and one el is an instance of app: the container at the end of the code snippet will not be parsed

There will be only one Vue instance in the actual development scenario, because the code will be built with components, so the code in the instance will not be particularly complex.

After reading this, the article "what is the template Grammar in vue" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.