Vue基础教程(七) - 博客详情

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为。

例如：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document Title</title>
</head>

<body>
    <div id="app">
        <!-- 修饰符用于指出一个指令应该以特殊方式绑定。
      这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
      即阻止表单提交的默认行为 -->
        <form action="save" v-on:submit.prevent="onSubmit">
            <label for="username">
                <input type="text" id="username" v-model="user.username">
                <!--注意：这里点击的提交按钮,也并不执行save动作,而是执行了onSubmit方法。-->
                <button type="submit">保存</button>
            </label>
        </form>
    </div>
    <!-- 引入开发环境的vue.js版本，包含了有帮助的命令行警告 ,这样使用的也是最新版本-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       // 创建一个vue对象
       let vm = new Vue({
            el: '#app',//绑定vue作用的范围,el是element的简写。
            data: {//定义页面中显示的模型数据或者说为属性
                user: {}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表单，用户名是：'+this.user.username)
                    } else {
                        alert('请输入用户名')
                    }
                }
            }
        })
    </script>
</body>
</html>

运行效果：