Vue.js (5) Learn value insertion (data binding)

The article directories

1. Text binding (value insertion)

The code is as follows:

<! DOCTYPEhtml>
<html>

<head>

    <meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <p>{{MSG}}</p>
        <p>Modify all data:<span v-once>Data: {{MSG}}</span></p>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1'.data: {
            msg: '1'}})// Change it, but this time, the v-once will not change.
    test1.msg = "Change 2"
</script>
Copy the code

Effect:

The name of the introduce
Text: normal interpolation The most common form of data binding is using “Mustache” syntax (double curly braces)
Text: Interpolate once By using the V-once instruction, the interpolation is performed once, and the contents of the interpolation are not updated when the data changes.

2. Raw HTML

<! DOCTYPEhtml>
<html>

<head>

    <meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <p>{{MSG}}</p>
        <p>Display data:<span v-html="msg"></span></p>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1'.data: {
            msg: ' I'm text with 'HTML tags '< /span>'}})</script>
Copy the code

Effect:

The name of the introduce
Raw HTML: Normal interpolation Use v-HTML instructions

PS: Arbitrary HTML rendered dynamically on a site can be very dangerous because it can easily lead to XSS attacks. Use HTML interpolation only for trusted content, never for user-supplied content.

3, the Attribute

<! DOCTYPEhtml>
<html>

<head>

    <meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <div v-bind:id="myId"></div>
        <button v-bind:disabled="button1disabled">Button 1</button>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1'.data: {
            button1disabled: "disabled".myId: 1}})</script>
Copy the code

Effect:



Mustache syntax (the syntax with curly braces “{{MSG}}”) doesn’t work in HTML tags, and you should use V-bind in this case

The name of the introduce
Attribute: Insert value Use v – bind

(PS: If isButtonDisabled is null, undefined, or false, the disabled attribute is not even included in the rendered element.)

4. Use JavaScript expressions

<! DOCTYPEhtml>
<html>

<head>

    <meta name="viewport" content="Initial - scale = 1.0, the maximum - scale = 1, the user - scalable = no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="test1">
        <div>Original: {{num}}</div>
        <div>{{num+1}}</div>
    </div>
</body>

</html>
<script>
    var test1 = new Vue({
        el: '#test1'.data: {
            button1disabled: "disabled".myId: 1.num: 1}})</script>
Copy the code

Effect:

When inserting expressions, note: 1) Each binding can contain only one expression; 2) template expressions are sandboxed and can access only a whitelist of global variables