1. Getting started

Three instructions

v-cloak

Using the v-cloak can solve the problem of flicker interpolation expression, that is, when the network is not good and is not fully loaded when the interface may be displayed as {{msg}}.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-cloak>{{msg}}</p>
    </div>
<script>
    var s=new Vue({
        el:"#app",
        data:{
            msg:"哈哈哈"
        }
    })
</script>
</body>
</html>

v-text

Meaning that you can use to display data directly, in the absence of data acquisition, data can be displayed in the label

<p v-text="msg"></p>

v-html

html can be escaped, that is to say, if the data is a piece of html code, he can execute the html code segment

    <div id="app">
        <p v-html="msg2"></p>
    </div>
<script>
    var s=new Vue({
        el:"#app",
        data:{
            msg2:"<h1>我是H1标签，我很大</h1>"
        }
    })

v-bind

Vue instructions is provided for binding properties, binding properties is the so-called variable values may be obtained corresponding to the property, rather than a variable property is bound as a string

<div id="app">
    <span>
        <input type="button" value="按钮" v-bind:title="mytitle">
    </span>
</div>
<script>
    var app1=new Vue({
        el:"#app",
        data:{
            mytitle:"这是我们自己定义的一个Title"
        }
    })
</script>

v-bind:value="mytitle"

It may also be a process variable, such as string concatenation

v-bind:title="mytitle+‘123’"

Such a string may be displayed on a variable +, it corresponds to the string concatenation js

Short form of v-bind ":"

v-on

Is the mechanism used to bind an event

<div id="app">
    <button v-on:click="btn" >按钮</button>
</div>
<script>
    var app=new Vue({
        el:"#app",
        methods:{
            btn:function () {
                alert("hello!!!")
            }
        }
    })
</script>

note! ! !

This place methods, pay attention to the back of the s, pay attention to the back of the s, s attention back

There are other events, such as the mouse over the event: mouseover and so on, you can use the same method

Abbreviations is "@"

How to define a basic code structure Vue
Interpolation expressions and v-text
v-cloak
v-html
v-bind：
v-on @

important point

The difference between v-text and the v-cloak

The default former no flicker problem
The latter can be spliced numerical data and needs, but the former replaces the data in the tag so as to cover the contents of the original label