Vue学习（二）-vue基础语法_电脑壁纸-CSDN博客

本文链接：https://blog.csdn.net/ataraxy_/article/details/105329935

本文主要是对于Vue非常浅显的知识进行介绍，并不深入了解，只接触表面，对一些较复杂的内容也不过多描述。如文中有错误之处，望不吝赐教，谢谢~
本文的示例代码是在上一篇Vue学习（一）-简单入门实例的实例上展开的。

（1）插值表达式：{{…}}

vue采用双大括号的形式进行文本插值

（2）监听事件：v-on

v-on:click 点击事件

新建von.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>v-on:click</title>
    <script src="vuejs-2.5.16.js"></script>


</head>

<body>
    <div id="app">
        {{message}}
        //按钮
        <button v-on:click="fun1('v-on')">v-on</button>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                message:"Hello world"
            },
            //方法
            methods:{
                fun1:function(msg){
                    alert("Hello");
                    this.message = msg;
                }
            }
        });
    </script>
</body>

</html>

启动程序后，在浏览器中输入

http://localhost:8080/von.html

可得到如下画面
在这里插入图片描述
点击按钮

keydown 键盘事件
mouseover 鼠标事件

（3）事件修饰符

vue提供事件修饰符来处理DOM事件细节。

stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡，即启动子事件时不会启动父事件。
prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
capture：与事件冒泡的方向相反，事件捕获由外到内
self：只会触发自己范围内的事件，不包含子元素
once：只会触发一次