vue study notes - common commands

v-once

Only render elements and components once. Subsequent re-rendered elements / components and all its child nodes will be treated as static content and skip. This update can be used to optimize performance.

 

v-html

Insert HTML content as ordinary - will not be compiled as a template Vue

Curly brackets will interpret the data as plain text rather than HTML code. In order to output true HTML, you need to use v-html

<div id="app">
    {{msg}}
    <p>Using mustaches: {{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
</div>
<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        rawHtml : '<span style="color:red">this is should be red</span>'

    }
});

效果区别：

Using mustaches: <span style="color:red">this is should be red</span>

this is should be red

 

v-bind

Dynamically bind one or more characteristics, or a prop assembly to the expression.

The binding  class or  style the time characteristic, the value of other types of support, such as an array or an object. Through the tutorial link below for details.

When binding prop, prop must be declared in the sub-assembly. You can specify different types of binding with the modifier.

Without an argument, you can be bound to an object that contains key-value pairs. Note that at this time  class , and  style the binding does not support arrays and objects.

<div id="app">
    <div v-bind:class="color">test...</div>
</div>

<script type="text/javascript">
var vm = new Vue({
    el : "#app",
    data : {
        
    }
});
</script>

<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>

effect:

 

 

 

v-text

Effect is similar to {{aaa}} dynamic switching variable content

<span V-text = " MSG " > </ span> 
<-! same as the following -> 
<span> MSG {{}} </ span>