您的位置：首页 > Web前端 > Vue.js

5.vue事件修饰符

2018-10-23 15:06 435 查看

1.js文件：
    //在使用vue之前必须实例化vue对象
new Vue({
    /*el:指element  需要获取的元素，一定是html中根容器元素
        以后所有的操作均是在这个根容器中进行操作
    */
    el:"#vue-app",
    /*
    data:用于数据的存储，用来写属性
        以key-value的值进行存储
    */
    data:{
       age:30,
       x:0,
       y:0,
    },
    /**
     * 使用method来存储方法，
     * 使用greet来进行调用
     * 使用this获取当前容器的内容
    * this.age：就是指先找到当前容器的data然后在找到name对应的属性
     */
    methods: {
        updateXY: function (event) {
           this.x=event.offsetX;
            this.y = event.offsetY;
        },
        alert: function () {
        alert("aaaaaaaaaa");
        }
    }
})
2.html文件：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index.html</title>
    <!-- 用于在线引用vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引用css文件 -->
    <link rel="stylesheet" href="../css/style.css">
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<body>
   
    <!--vue-app就是我们的根容器，vue均是对vue操作-->
    <div id="vue-app">
    <div  v-on:mousemove="updateXY">
        {{x}},{{y}}
        <!--鼠标放在此处就不会被识别-->
        <span v-on:mousemove.stop="">stopMoving</span>
    </div>
    <!--注：鼠标的点击事件是click-->
    <!--先触发点击事件在跳转-->
    <a @click="alert()" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png" >
    aaaaa
    </a><br/>
    <!--先触发点击事件,但是由于有prevent所以他不会在跳转-->
    <a @click.prevent="alert()" href="https://www.google.com/images/branding/googlelogo/2x/googlelogo_light_color_272x92dp.png">
        bbbbbbbbb
    </a>
    </div>
    <script src="../js/app.js"></script>
</body>
</html>

阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航