Vue event binding (described in code)

V-on instruction: V-on: can also be abbreviated as @:

<div id="app">
{{num}}
<button v-on:click="add()">num+1</button>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
        add:function(){//this corresponds to the large object //data is this attribute this.num++}}})Copy the code

Some event handling about V-ON:

<div id="app">
<p @click="fn1()">
<span @click.stop="fn2()">hello world</span>
</p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        num:1
    },
    methods:{
        fn1:function(){
        console.log(1)
        },
        fn2:function(){
            console.log(2)
        }
        
    }
})
</script>
Copy the code

V-text and V-HTML directives:

<div id="app">
    <p v-text="mes"<p v-html= <p v-html="mes"></p> </div> <script> var vm=new Vue({el:"#app",
    data:{
      mes:"<a>hello world</a>"
    },
})
</script>
Copy the code

V-bind :(binding attribute adds single class name)

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="x">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     x:"classA",
    },
})
</script>
Copy the code

V-bind :(add multiple class names)

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[x,y]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     x:"classA",
     y:"classB"
    },
})
</script>
Copy the code

V-bind dynamically controls the addition and removal of individual class names:

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[{classA:i}]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     i:true,
    },
})
</script>
Copy the code

V-bind dynamically adds and removes multiple class names:

<style>
.classA{
    color:red;
}
.classB{
    font-size:50px;
}
</style>
<div id="app">
 <p v-bind:class="[{classA:i},{classB:i}]">
    hello world
 </p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
     i:true,
     t:true
    },
})
</script>
Copy the code

V-bind Image attribute binding:

<div id="app">
 <img src="webUrl" alt="">
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    webUrl:"Picture path"
    },
})
</script>
Copy the code

V-bind style binding:

<div id="app">
<p :style="{color:x,fontSize:size+"px"}"></p>
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
   obj:{
       color:"red",
       fontSize:"40px"
   }
    },
    x:"green",
    size:20
})
</script>
Copy the code

V-model: two-way data binding (often used for binding form elements)

<div id="app">
<input type="text" v-model="mes">
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    mes:{
        hello world
    }
    },

})
</script>
Copy the code

V-model is used for checkbox cases

<div id="app">
<input type="checkbox" v-model="t">
<p  :class="[{x:t}]"></p>
{{mes}}
{{t}}
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
    mes:"hello world",
    t:rue,
    },

})
</script>
Copy the code

V-if and X-show determine element show hiding based on variables

V-if: Switches the structure directly

<div id="app">
<button @click="chaange()"<p v-if= <p v-if="t">hello world</p> <p v-else> hello world</p> </div> <script> var vm=new Vue({el:"#app",
    data:{
        t:true}, methods:{change:function(){ this.t=! this.t } } }) </script>Copy the code

V-show toggles display hide without V-else with display: None

<div id="app">
<button @click="chaange()"<p v-show= <p v-show="t">hello world</p>
 
</div>
<script>
var vm=new Vue({
    el:"#app",
    data:{
        t:true}, methods:{change:function(){ this.t=! This.t}}}) </script> v-if vs v-show: v-if performs better when first loaded; The performance of v-show switchover is betterCopy the code

V – for:

<ul>
<li v:for="{item,index} in arr" :key="index">
{{index}}
{{item}}
</li>
</ul>
<script>
var vm=new Vue({
    el:"#app",
    data:{
      arr:["hello"."NIHAO"."Hello",]
    }
   

})
</script>
Copy the code