Vue.js two study notes, some of the output command Vue.js a study notes

Some output command Vue

{{Field}}, v-text instruction, v-html instructions

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Vue.js学习第二课</title>
    <!--1.导入vue包-->
    <script src="~/Scripts/vue/vue.min.js"></script>
    <style>
        [v-cloak] {
            display:none;
        }
    </style>
</head>
<body>
    <div id="divApp">@
        *
        {{msg}} string out, hide it first before loading is complete* Use V-
        @Cloak flicker problem can be solved interpolation expression, that is, when the network reasons, resulting in the time required to obtain data loading is slow, in order not to show
                msg2: ' <h1> ha ha ha ha, I H! </ h1>
         , ' 
            } 
        })

     </ Script> 
</ body> 
</ HTML>

To sum up, {{}} way of output data are used in most cases, taking into account the flickering problem and needs to spend v-cloak to control the loading pattern before completion better.

{{}} Is the contents of the specified location mode output, and v-text element as a command to control the entire text element, if the content before, will be covered, but will not flicker. Therefore, according to different scenarios and complications splicing contents choose different ways.

v-html instruction is output may Html, for example, in the example <H1> tag, or will be treated as a text output.

 operation result

 

 

Previous

Vue.js study notes a

Guess you like

Origin www.cnblogs.com/luyShare/p/11528424.html