Vue's template syntax

 HTML-based templating syntax is used in Vue.js, which allows developers to declaratively bind the DOM to the underlying data of a Vue instance. So all Vue.js templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles templates into virtual DOM render functions. Combined with a reactive system, Vue can intelligently calculate the minimum number of component re-renders to minimize the number of operations on the DOM.Template syntax in Vue is divided into two categories: interpolation syntax and directive syntax.

Interpolation syntax:

• Function: used to parse the content of the tag body;

• Writing: {{? }},? It is a js expression and can directly read all attributes in data.

for example:

        <div id="box1">

            <p>{{hobby}}</p>

        </div>

        <script>

            Vue.config.devtools = true;

            Vue.config.productionTip=false;

            const x=new Vue({

                el:"#box1",

                data:{

                    hobby:"swim"

                },

            })

Command syntax:

• Function: used to parse tags (including: tag attributes, tag body content, binding events, etc.);

• Usage example: v-bind: attribute = "xxx" or abbreviated as : attribute = "xxx", xxx is a js expression.

for example:

        <div id="box1">

            <p>{{hobby}}</p>

            <p v-bind:arr="hobby">111</p>

        </div>

        <script>

            Vue.config.devtools = true;

            Vue.config.productionTip=false;

            const x=new Vue({

                el:"#box1",

                data:{

                    hobby:"swim"

                },

            })

v-model (two-way binding): data can flow not only from data to page, but also from page to data.

• Two-way binding is generally applied to form elements (such as: input, select...)

        <div id="box1">

            <p>{{hobby}}</p>

            <p v-bind:arr="hobby">111</p>

            <input type="text" v-model:value="Inputvalue">

            <input type="text"  v-bind:value="Inputvalue">

        </div>

        <script>

            Vue.config.devtools = true;

            Vue.config.productionTip=false;

            const x=new Vue({

                el:"#box1",

                data:{

                    hobby:"swim",

                    Inputvalue:"666"

                },

            })