V-on指令的使用

一.V-on指令

(一) .1. v-on 的作用

用来给元素注册点击事件的

2.v-on 的语法

  (1).v_on:事件名 ="事件函数"

 (2).v-on:click 可以简写 @click

 (3).v-on:mouseenter 可以简写 @mouseenter

3.v-on的注意点

  (1).注册事件需要一个事件的函数

  (2).创建vue实例的时候，data是用来给vue实例提供的属性（数据），不应该提供方法

（二）.案例：

代码部分如下:

<div id="app">

        <h1>{{msg}}</h1>

        <button v-on:click="clickFn">点我!</button>

        <button @click="clickFn">点我!</button>  </div>

    <script src="vue.js"></script>

    <script>

        const vm = new Vue({

            //指定视图

            el: '#app',

            //指定数据（属性）

            data:{  msg:'hello'  },

            //methods 指定vue中需要使用到的方法

            methods:{

                clickFn(){

                    alert('嘻嘻嘻')

                }        }      })

    </script>

效果如图:

注明：点击按钮会弹出提示内容：嘻嘻嘻。

二.案例-翻转字符串

（一）.翻转msg

js基础

 1.字符串没有reverse方法

 2.数组有reverse方法

 3.字符串有一个方法split()  切割一个字符串变成数量

 4.数组有个reverse方法, 可以翻转

 5.数组有个join方法，可以拼成字符串

（二）.代码如下：

   <div id="app">

       <button @click="reverse">翻转</button>

    <p>{{msg}}</p>

   </div>

<script src="vue.js"></script>

<script>

    const vm = new Vue({

        el:'#app',

        data:{

            msg:'hello vue!'

        },

        methods:{

            // methods中的所有的方法内部的this都指向vm

            // vue源码内部  reverse.bind(vm)

            reverse(){

                //console.log(this.msg)

              this.msg= this.msg.split('').reverse().join('')

            }

        }

    })

</script>

效果图：

1.没有点击翻转时状态如图:

2.已点击翻转效果图:

注：再次点击会再次翻转