认识Vue和修饰符

Vue

一、认识Vue

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue官网

创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

HTML

<div id="app">
  {{ message }}
</div>

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

二、修饰符

1、事件修饰符

<body>
    <div id = 'app'>
        <button v-on:click = "showsome(21, $event)">click me!!!</button>
    </div>
    <script>
        new Vue({
            el : '#app',
            methods : {
                showsome : function(msg, event){
                    alert('show somthing!')
                    console.log(msg)
                }
            }
        })
    </script>
</body>

说明：showsome(21, $event) 中21是函数传递的数字变量，$event是Vue提供的当前事件的事件对象。

两个标签都有相同的函数，则会有事件冒泡。

<div id = 'app'>
    <div v-on:click = 'showsome("div中的click", $event)'>
        <button v-on:click = "showsome('button中的click', $event)">click me!!!</button>
    </div>
</div>
<!-- 打印顺序： button中的click，div中的click -->

阻止事件冒泡，使用事件修饰符。

<!-- 使用stop 阻止默认事件 -->
<button v-on:click.stop = "showsome('button中的click', $event)">click me!!!</button>
<!-- 使用prevent 阻止默认事件 -->
<a href="https://www.baidu.com" v-on:click.prevent = 'showsome'>link me</a>

2.按键修饰符

下面例子，用事件的event去判断是否按的是enter（对应which编码是13）键。

<body>
    <div id = 'app'>
        <input type="text" v-on:keyup = 'keyup'>
    </div>
    <script>
        new Vue({
            el : '#app',
            methods :{
                keyup : function(event){
                    if(event.which == 13){
                        alert('you press enter!')
                    }
                }
            }
        })
    </script>
</body>

可以使用按键修饰符，按enter键才响应函数。

<body>
    <div id = 'app'>
        <input type="text" v-on:keyup.enter = 'keyup'>
    </div>
    <script>
        new Vue({
            el : '#app',
            methods :{
                keyup : function(event){
                    alert('you press enter!')
                }
            }
        })
    </script>
</body>

按键修饰符有：enter,space,esc, 也可以写按键which对应的数字

<input type="text" v-on:keyup.enter = 'keyup'>

等同于<input type="text" v-on:keyup.13= 'keyup'>

事件修饰符可以链式调用<input type="text" v-on:keyup.enter.enter.esc= 'keyup'>意思是按下enter键或者space键或者esc键都可以响应函数。

全部的按键别名：

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

注意：系统修饰键与常规按键不同，单独按没有效果需组合按键。

三、练习

1、一个输入框，输入什么就实时输出什么；

2、一个输入框，输入内容按下回车或者空格才输出输入框中的内容；

3、一个表单的submit按键不跳转。

<body>
    <div id = 'app'>
        <!-- 一个输入框，输入什么就实时输出什么 -->
        <input type="text" v-on:keyup = "changeName">
        output: {{ name }}

        <!-- 一个输入框，输入内容按下回车或者空格才输出输入框中的内容 -->
        <input type="text" v-on:keyup.enter.space = 'name = $event.target.value'>
        output: {{ name }}

        <!-- 一个表单的submit按键不跳转 -->
        <form action="" v-on:click.prevent>
            <input type="submit">
        </form>
    </div>
    <script>
        new Vue({
            el : '#app',
            data : {
                name : 'hello'
            },
            methods :{
                changeName : function(event){
                    this.name = event.target.value;
                } 
            }
        })
    </script>
</body>