VUE学习：vue简介、vue指令

Love The Way You Lie 2023-10-04 19:41 65阅读 0赞

## 一、Vue简介 ##

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

### 1.Vue.js 特点 ###

>  *  **简洁**： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
>  *  **数据驱动**: 自动追踪依赖的模板表达式和计算属性。
>  *  **组件化**： 用解耦、可复用的组件来构造界面。
>  *  **轻量**：~33.46KB min+gzip，无依赖。
>  *  **快速**:精确有效的异步批量 DOM 更新。
>  *  **模块友好**: 通过 NPM 或 Bower 安装，无缝融入你的工作流。

### 2.vue.js下载 ###

> 1.进入到vue.js的官方网站: [Vue.js - 渐进式 JavaScript 框架 | Vue.js][Vue.js - _ JavaScript _ _ Vue.js]
> 
> 2.点击首页的”快速上手”,进入到教程页面,点击”快速上手"
> 
> 3.找到上图中的位置,复制src的网址,重新打开一个页面,访问刚刚复制的网址
> 
> 4.在上面的页面鼠标右键,选择"另存为"保存vue.js
> 
> 5.在页面引入vue.js文件
> 
> **注意: Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。**

## 二.vue.js的入门 ##

### 2.1 入门程序 ###

#### 2.1.1 入门程序\_hello world ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="./js/vue.global.js"></script>
    </head>
    
    <body>
        
        <div id="app">
            <h1>{
       {message}}</h1>
        	<button @click="change">按钮</button>
        </div>  
        <script>
            const { createApp } = Vue
            createApp({
                data() {  //data: 表示需要展示的数据
                    return {  
                        message: 'Hello Vue!'
                    }
                },
                methods:{
                    change(){
                        this.message = 'Hello world';
                    }
                }
            }).mount('#app') //指明数据展示在哪个view里面 挂载点
        </script>
    </body>
    
    </html>

![4d0b0d9578bd47608f81753fdb1c22fd.png][]

**data属性**

> 1.data属性是传入一个函数，并且该函数需要返回一个对象：
> 
> ~在Vue2.x的时候，也可以传入一个对象（虽然官方推荐是一个函数）；
> 
> ~在Vue3.x的时候，必须传入一个函数，否则就会直接在浏览器中报错；
> 
> 2.data中返回的对象会被Vue的响应式系统劫持，之后对该对象的修改或者访问都会在劫持中被处理： 所以我们在template或者app中通过 \{ \{message\}\} 访问message，可以从对象中获取到数据； 所以我们修改message的值时，app中的 \{ \{message\}\}也会发生改变；

**methods属性**

> methods属性是一个对象，通常我们会在这个对象中定义很多的方法：
> 
>  *  这些方法可以被绑定到 模板中；
>  *  在该方法中，我们可以使用this关键字来直接访问到data中返回的对象的属性；

#### 2.1.2 在谷歌浏览器安装vue-devtools插件: ####

![53a6d4f8f7b94dbab4c58296aeb88348.png][]![944e911ff66a45cfbc047009a72c46df.png][]![6e0137f8a8ad4ce39b38ffdf6c50ac9a.png][]![155b6f5c4aec4fc6ae5a88828456a92e.png][]

此时安装成功了,在刷新我们的页面,我们会发现在导航栏有一个Vue选项,而且还能查看vue中的数据,方便我们进行调式

![09ceb9f1436b4fc3bf0ccb27462179c3.png][]

#### 2.1.3 VSCode代码片段 ####

具体的步骤如下：

第一步，复制自己需要生成代码片段的代码；

第二步，[snippet generator][]在该网站中生成代码片段；

![fb0cfc12ecbb425bad5123687c49662b.png][]

第三步，在VSCode中配置代码片段；

![30e62cbb91844cbeb1108aa3fd8ae420.png][]

#### 2.1.4 注意事项 ####

> **注意:**
> 
> 1) 所有的Vue方法和属性都必须在对应挂载根标签的内部使用
> 
> 2) 所有Vue的数据都应该在date函数返回的对象中
> 
> 3) 我们要遵循一个原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了.

### 2.2 插值表达式 ###

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。`{ {}}`标签也接收表达式形式的值,表达式可由JavaScript表达式或过滤器构成.过滤器可以没有,可以多个.

表达式是各种数值,变量,运算符的综合体,也可以是JavaScript的一些函数,代码如下:

![40c1820f32c442f9ad43a44de8647eb2.png][]

但是\{ \{\}\}不能包含if/else等复杂的表达式,比如下列表达式是错误的

![afede4268d94427d9f7b0c8ace6ad57f.png][]

### 2.3MVVM模型 ###

Vue虽然没有完全遵循 [MVVM 模型][MVVM]，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑.

M: 模型(Model),对应data中的数据

V: 视图(View): 模板

VM:视图模型(ViewModel): Vue对象实例

![8dbb9aea00cd4127869deb69b9db481e.png][]

#### 2.4VUE的常见指令 ####

Vue.js指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。它扩展了HTML标签的功能.

Vue指令的作用是通过v-属性名,实现对DOM的响应式加载

#### 2.4.1 v-bind ####

v-bind指令用于绑定属性 可以简写成`:`

> 双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 [v-bind 指令][v-bind]：
> 
> 绑定属性我们使用v-bind：
> 
>  *  缩写：`:`
>  *  预期：any (with argument) | Object (without argument)
>  *  参数：attrOrProp (optional)
>  *  修饰符：
>  *  .camel - 将 kebab-case attribute 名转换为 camelCase。
>  *  用法：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

![0f796f47c4f04e068873c6afc5f0c2ac.png][]

**动态绑定多个值**

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

data() {
      return {
        objectOfAttrs: {
          id: 'container',
          class: 'wrapper'
        }
      }
    }

通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上：

#### 2.4.2 class与style绑定 ####

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 `class` 和 `style` 都是 attribute，我们可以和其他 attribute 一样使用 `v-bind` 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 `class` 和 `style` 的 `v-bind` 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

#### 2.4.2.1 class绑定 ####

使用语法:

:class=’xxx’

值的分类:

1. 表达式是字符串:’classA’  **适用场景:样式的类名不确定,需要动态指定**
    2. 表达式是对象: {classA:isA,classB:isB} **适用场景: 个数,类名确定,但是不确定使用**
    3. 表达式是数组:[‘classA’,’classB’] **适用场景:类名不确定,个数也不确定**

<html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .active {
          color: red;
        }
      </style>
    </head>
    <body>
    
      <div id="app">
        
        <h2 :class="classes">Hello World</h2>
    
        
        <button :class=" isActive ? 'active': '' " @click="btnClick">我是按钮</button>
    
        
        <button :class="{ active: isActive }" @click="btnClick">我是按钮</button>
    
        
        <button :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
        
        
        <button class="abc cba" :class="{ active: isActive, why: true, kobe: false }" @click="btnClick">我是按钮</button>
        
        
        <button class="abc cba" :class="getDynamicClasses()" @click="btnClick">我是按钮</button>
    
        
        <h2 :class="['abc', 'cba']">Hello Array</h2>
        <h2 :class="['abc', className]">Hello Array</h2>
        <h2 :class="['abc', className, isActive? 'active': '']">Hello Array</h2>
        <h2 :class="['abc', className, { active: isActive }]">Hello Array</h2>
      </div>
      
      <script src="./js/vue.global.js"></script>
      <script>
        // 1.创建app
        const app = Vue.createApp({
          // data: option api
          data: function() {
            return {
              classes: "abc cba nba",
              isActive: false,
              className: "why"
            }
          },
    
          methods: {
            btnClick: function() {
              this.isActive = !this.isActive
            },
    
            getDynamicClasses: function() {
              return { active: this.isActive, why: true, kobe: false }
            }
          }
        })
    
        // 2.挂载app
        app.mount("#app")
      </script>
    </body>
    </html>

#### 2.4.2.2 style绑定 ####

尽管推荐使用 camelCase，但 `:style` 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：

:style=”{样式属性名1:变量,样式属性名2:变量2,....}”;

> > **注意:**
> > 
> > 1.  推荐把样式属性名要把-改成小驼峰的写法, 比如有一个样式属性名为font-size,那在:style中就要写成fontSize. 但 `:style` 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)，例如：
> > 
> >     <div :style="{ 'font-size': fSize + 'px' }"></div>
> > 
> > 2.样式表达式与样式表达式之间使用逗号分割

#### 2.4.3 v-text ####

v-text指令: 更新元素的 textContent,注意v-text对于内容是包含HTML标签的,不会进行HTML解析,只是作为普通字符串.

![de0d093eb17b4c9cb50af9806af8c9a3.png][]

#### 2.4.4 v-html ####

v-html: 数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令

![ffa9443975104ed9a5225dfab092a41b.png][]

#### 2.4.5 v-if ####

v-if 指令 条件渲染,可以根据表达式的值在DOM中生成或移除一个元素,如果v-if表达式为true,那么对应元素的一个克隆将被重新插入DOM中,否则从DOM移除

![1152cbe22bcf444a84479fff066b2681.png][]

如果想切换多个元素,则可以使用<template>元素当作包装元素,在<template>元素上使用v-if, 就可以进行多个元素的切换.

![ef1e29b4e389460489f6989e3ec1d007.png][]

v-else 指令: 表示 v-if 的“else 块”：

![2c9936f8095c40e7b4e4901e90364e08.png][]

v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次

![07bd1c6d201045a1be71f6c72e6f3f15.png][]

> 注意:
> 
> v-else,v-else-if必须紧跟在v-if或者v-else-if元素的后面

#### 2.4.6 v-show ####

v-show指令: 根据表达式的值来显示或隐藏HTML元素,当v-show表达式的值为false时,元素将被隐藏,查看DOM时,会发现元素上多了一个行内样式style=”display:none”.

v-if与v-show的比较:

>  **首先，在用法上的区别：**
> 
>  *  v-show是不支持template；
>  *  v-show不可以和v-else一起使用；
>  *  **其次，本质的区别：**
>  *  v-show元素无论是否需要显示到浏览器上，它的DOM实际都是有存在的，只是通过CSS的display属性来进行切换；
>  *  v-if当条件为false时，其对应的原生压根不会被渲染到DOM中；
> 
> 1.  **开发中如何进行选择呢？**
> 
>  *  如果我们的元素需要在显示和隐藏之间频繁的切换，那么使用v-show；
>  *  如果不会频繁的发生切换，那么使用v-if；

#### 2.4.7 v-for ####

`v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令的值需要使用 `item in items` 形式的特殊语法，也就是循环指令.其中 `items` 是源数据的数组，而 `item` 是迭代项的**别名**：

data() {
      return {
        names:["lily","lucy","hanmeimei","lilei"]
      }
    }

![b954834a9abb48f09acae5e64a182e03.png][]

如果想获取数组中的下标, ()的顺序是: 数组的元素, 数组的下标

![236a5c3ed21548da8a3a02db642dbb86.png][]

遍历的是一个json对象: ()的顺序是: json对象的属性值,对象的属性名,下标

data() {
      return {
        names:["lily","lucy","hanmeimei","lilei"],
        json:{a:"dog",b:"cat",c:"peg"}   
      }
    }

<ul>
        
        <li v-for="(value,key,index) in json">
            {
       {value}} ==>{
       {key}} ==>{
       {index}} 
        </li>
    </ul>

![6a63fe1b9b244c33879714ce6a81e1b6.png][]

对于多层嵌套的 `v-for`，作用域的工作方式和函数的作用域很类似。每个 `v-for` 作用域都可以访问到父级作用域：

![daec91650387423ca81ccb5ac88d7dc4.png][]

你也可以使用 `of` 作为分隔符来替代 `in`，这更接近 JavaScript 的迭代器语法：

`v-for` 可以直接接受一个整数值。在这种用例中，会将该模板基于 `1...n` 的取值范围重复多次。

> **v-for中通过key管理状态**
> 
> Vue 默认按照“就地更新”的策略来更新通过 `v-for` 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。
> 
> 为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 `key`
> 
>     <div v-for="item in items" :key="item.id">
>     
>     </div>
> 
> **推荐**:在任何可行的时候为 `v-for` 提供一个 `key` attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。
> 
> `key` 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 `v-for` 的 key

#### 2.4.8 v-model ####

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

>  *  比如用户在登录、注册时需要提交账号密码；
>  *  比如用户在检索、创建、更新信息时，需要提交一些数据；

这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成：v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；

它会根据控件类型自动选取正确的方法来更新元素；尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="./js/vue.global.js"></script>
    	<script type="text/javascript">
    	window.onload = function(){
    		const {createApp} = Vue
            createApp({
                data(){
                    return {
                       msg:'helloworld'
                    }
                }
            }).mount("#box")
    	};
    	</script>
    </head>
    <body>
    	
    	<div id="box">
    		<input type="text" v-model='msg'>
    		<hr/>
    		{
       {msg}}
    	</div>
    </body>
    </html>

![f185d482db0e46a18068b43a70f046c1.png][]

**注意：使用v-model指令的标签也必须位于Vue控制的标签内部。**

> `v-model` 还可以用于各种不同类型的输入，`<textarea>`、`<select>` 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：
> 
>  *  文本类型的 `<input>` 和 `<textarea>` 元素会绑定 `value` property 并侦听 `input` 事件；
> 
> 绑定`textarea`
> 
> ![7ee93e5e890c4f4495983d9afe731097.png][]
> 
> `<input type="checkbox">` 和 `<input type="radio">` 会绑定 `checked` property 并侦听 `change` 事件；
> 
> **v-model绑定checkbox：单个勾选框和多个勾选框**
> 
> 单个勾选框：
> 
>  *  v-model即为布尔值。
>  *  此时input的value属性并不影响v-model的值。
> 
> ![9390bbbc960e434d98f62707ad1aa4df.png][]
> 
> 多个复选框：
> 
>  *  当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
>  *  当选中某一个时，就会将input的value添加到数组中。
> 
> ![62e688ab9c74453f8d104e0cb678b198.png][]
> 
> **v-model绑定radio，用于选择其中一项；**
> 
> ![83b8f3f403a340cf8980db0860c16152.png][]
> 
> 多选：可以选中多个值
> 
> v-model绑定的是一个数组；
> 
> 当选中多个值时，就会将选中的option对应的value添加到数组fruit中
> 
> ![f9447ef066ed4499a7387755fee3718a.png][]
> 
> `v-model` 会忽略任何表单元素上初始的 `value`、`checked` 或 `selected` 属性。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用`data` 选项来声明该初始值。

> 修饰符
> 
> `1.lazy`\- 取代 input 监听 change 事件
> 
> 在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
> 
> ![4da029ab87b14c549c2ff5fe13de40a7.png][]
> 
> 如果不加.lazy时,你修改了文本框的值,对应\{ \{msg\}\}会同步的变化,但是如果添加了.lazy修饰符时,你在修改文本框的值时,\{ \{msg\}\}的值不会同步的变化,而是当该文本框失去焦点时,才去改变\{ \{msg\}\}的值.
> 
> `2.number`\- 输入字符串转为数字
> 
> 如果你想让用户输入自动转换为数字，你可以在 `v-model` 后添加 `.number` 修饰符来管理输入：
> 
> 我们先来看一下v-model绑定后的值是什么类型的：
> 
> ![35c7ef87c4da46939de3fb70bf79636a.png][]
> 
> 如果我们希望转换为数字类型，那么可以使用 .number 修饰符：
> 
> ![1ab0cced9d1e4fc5abb6fd364a89885f.png][]
> 
> `3.trim` \- 输入首尾空格过滤
> 
> 如果你想要默认自动去除用户输入内容中两端的空格，你可以在 `v-model` 后添加 `.trim` 修饰符：
> 
> ![a1793584b01c427e9612a3caaff1bd0b.png][]

#### 2.4.9 v-on ####

可以使用 `v-on` 指令 (简写为 `@`) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：`v-on:click="methodName"` 或 `@click="handler"`。

> 事件处理器的值可以是：
> 
> 1.  **内联事件处理器**：事件被触发时执行的内联 JavaScript 语句 (与 `onclick` 类似)。
> 2.  **方法事件处理器**：一个指向组件上定义的方法的属性名或是路径。

**内联事件处理器:**

内联事件处理器通常用于简单场景，例如：

![5c62967464014eedbc779e3799826ff8.png][]

**方法事件处理器:**

许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。

`v-on:click=”函数名”`注意函数必须是定义在createApp中的methods中.

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="./js/vue.global.js"></script>
    	<script type="text/javascript">
    	window.onload = function(){
    		const {createApp} = Vue
            createApp({
                data(){
                    return {
                        names:['zhangsan','lisi','wangwu'],
    				    count:0,
                    }
                },
                methods:{
                    add(){
                        this.names.push('zhaoliu');
                    }
                }
            }).mount("#box")
    	};
    	</script>
    </head>
    <body>
    	<div id="box">
    		<button v-on:click='count++'>点击加1</button>
    		你点击了{
       {count}}次
    		<br/>
    		<button v-on:click='add'>添加一个名字</button>
    	</div>
    </body>
    </html>

**注意:v-on可以简写成@**

![be96b4fcb0d74a269cd2908c7418e2b6.png][]

1. 在内联事件处理器中访问事件参数

> 事件对象(event): 有时我们需要在内联事件处理器中访问原生 DOM 事件。
> 
> > 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。 但是注意：如果方法本身没有一个参数，那么会默认将原生事件event参数传递进去
> > 
> > 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。
> 
> ![9a9a19e342be426385fe3d530b197a13.png][]

2. 事件修饰符

在处理事件时调用 `event.preventDefault()阻止默认行为` 或 `event.stopPropagation()阻止事件冒泡` 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 `v-on` 提供了**事件修饰符**。修饰符是用 `.` 表示的指令后缀，包含以下这些：

>  *  `.stop` 表示阻止默认事件冒泡
>  *  `.prevent` 表示阻止默认行为
>  *  `.self` 表示事件只在该元素触发,
>  *  `.capture`表示使用事件捕获模式: 由外而内触发。
>  *  `.once`表示事件只会触发一次
>  *  `.passive` 主要用在移动端的scroll事件，来提高浏览器响应速度，提升用户体验
>  *  `.left` 只当点击鼠标左键时触发。
>  *  `.right` 只当点击鼠标右键时触发。
>  *  `.middle` 只当点击鼠标中键时触发。

> 1.事件冒泡:
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     <head>
>     	<meta charset="UTF-8">
>     	<title>Document</title>
>     <style>
>       .pox{
>           width: 300px;
>           height: 300px;
>           background-color: #abcdef;
>       }
>     </style>
>     	<script src="./js/vue.global.js"></script>
>     	<script type="text/javascript">
>     	window.onload = function(){
>     		const {createApp} = Vue
>       createApp({
>           data(){
>               return {
>                   
>               }
>           },
>           methods:{
>               fun1(){
>                   alert(1);
>               },
>               fun2(event){
>                   alert(2);
>               }
>           }
>       }).mount("#box")
>     	};
>     	</script>
>     </head>
>     <body>
>     	<div id="box">
>       <div  @click="fun1()" class="pox">
>     		    <button v-on:click='fun2($event)'>按钮</button>
>       </div>
>     	</div>
>     </body>
>     </html>
> 
> 如上代码,当点击按钮时,首先触发了按钮的点击事件,并执行show()函数,但是,同时也会触发按钮的父级元素div的点击事件,执行show2()方法,这就叫做事件冒泡,怎么阻止事件冒泡呢? 那就需要使用到事件对象中的方法和属性.
> 
> 1.使用原生事件对象的属性或方法:
> 
>     fun2(event){
>     alert(2);
>     //阻止事件冒泡
>     //使用事件对象的cancelBubble属性
>     event.cancelBubble=true;
>     }
>     
>     或者
>     
>     fun2(event){
>     alert(2);
>     //阻止事件冒泡
>     //使用事件对象的cancelBubble属性
>     //event.cancelBubble=true;
>     //调用阻止事件冒泡函数
>     event.stopPropagation();
>     }
>     
>     可以使用vue提供的修饰符 .stop
>     
>     <div id="box">
>     <div  @click="fun1()" class="pox">
>     	<button v-on:click.stop='fun2($event)'>按钮</button>
>     </div>
>     </div>

3.按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 `v-on` 或 `@` 监听按键事件时添加按键修饰符。

键盘的修饰符

![8842955b0eab4dbb858dfa5ae9681b52.png][]

![a9d4b1ea192b421e9eb23c3b2165c219.png][]

1.键盘的事件 keydown :监听键盘的键按下时触发:, keyup :监听键盘的键弹起时触发:

**获取按下键的键码:**

*  可以使用原生的事件对象的keyCode

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script src="./js/vue.global.js"></script>
    	<script type="text/javascript">
    	window.onload = function(){
    		const {createApp} = Vue
      createApp({
          data(){
              return {
                  
              }
          },
          methods:{
              show(event){
                  console.log(event.keyCode)
              }
          }
      }).mount("#box")
    	};
    	</script>
    </head>
    <body>
    	<div id="box">
      <input type="text" @keydown="show($event)"/>
    	</div>
    </body>
    </html>

> 事件使用的注意事项：
> 
> 1.  使用v-on:xxx 或者@xxx绑定事件
> 2.  事件的回调函数需要配置在methods对象中,最终会在vm上
> 3.  methods中配置的函数,不要使用箭头函数,否则this就不是vm对象
> 4.  methods中配置的函数,都是被Vue所管理的函数,this指向vm或者组件实例对象
> 5.  @xxx=”函数名”和@xxx=”函数名($event)”效果一样,但后者可以传参数

[Vue.js - _ JavaScript _ _ Vue.js]: https://cn.vuejs.org/
[4d0b0d9578bd47608f81753fdb1c22fd.png]: https://img-blog.csdnimg.cn/4d0b0d9578bd47608f81753fdb1c22fd.png
[53a6d4f8f7b94dbab4c58296aeb88348.png]: https://img-blog.csdnimg.cn/53a6d4f8f7b94dbab4c58296aeb88348.png
[944e911ff66a45cfbc047009a72c46df.png]: https://img-blog.csdnimg.cn/944e911ff66a45cfbc047009a72c46df.png
[6e0137f8a8ad4ce39b38ffdf6c50ac9a.png]: https://img-blog.csdnimg.cn/6e0137f8a8ad4ce39b38ffdf6c50ac9a.png
[155b6f5c4aec4fc6ae5a88828456a92e.png]: https://img-blog.csdnimg.cn/155b6f5c4aec4fc6ae5a88828456a92e.png
[09ceb9f1436b4fc3bf0ccb27462179c3.png]: https://img-blog.csdnimg.cn/09ceb9f1436b4fc3bf0ccb27462179c3.png
[snippet generator]: https://snippet-generator.app/
[fb0cfc12ecbb425bad5123687c49662b.png]: https://img-blog.csdnimg.cn/fb0cfc12ecbb425bad5123687c49662b.png
[30e62cbb91844cbeb1108aa3fd8ae420.png]: https://img-blog.csdnimg.cn/30e62cbb91844cbeb1108aa3fd8ae420.png
[40c1820f32c442f9ad43a44de8647eb2.png]: https://img-blog.csdnimg.cn/40c1820f32c442f9ad43a44de8647eb2.png
[afede4268d94427d9f7b0c8ace6ad57f.png]: https://img-blog.csdnimg.cn/afede4268d94427d9f7b0c8ace6ad57f.png
[MVVM]: https://zh.wikipedia.org/wiki/MVVM
[8dbb9aea00cd4127869deb69b9db481e.png]: https://img-blog.csdnimg.cn/8dbb9aea00cd4127869deb69b9db481e.png
[v-bind]: https://cn.vuejs.org/api/built-in-directives.html#v-bind
[0f796f47c4f04e068873c6afc5f0c2ac.png]: https://img-blog.csdnimg.cn/0f796f47c4f04e068873c6afc5f0c2ac.png
[de0d093eb17b4c9cb50af9806af8c9a3.png]: https://img-blog.csdnimg.cn/de0d093eb17b4c9cb50af9806af8c9a3.png
[ffa9443975104ed9a5225dfab092a41b.png]: https://img-blog.csdnimg.cn/ffa9443975104ed9a5225dfab092a41b.png
[1152cbe22bcf444a84479fff066b2681.png]: https://img-blog.csdnimg.cn/1152cbe22bcf444a84479fff066b2681.png
[ef1e29b4e389460489f6989e3ec1d007.png]: https://img-blog.csdnimg.cn/ef1e29b4e389460489f6989e3ec1d007.png
[2c9936f8095c40e7b4e4901e90364e08.png]: https://img-blog.csdnimg.cn/2c9936f8095c40e7b4e4901e90364e08.png
[07bd1c6d201045a1be71f6c72e6f3f15.png]: https://img-blog.csdnimg.cn/07bd1c6d201045a1be71f6c72e6f3f15.png
[b954834a9abb48f09acae5e64a182e03.png]: https://img-blog.csdnimg.cn/b954834a9abb48f09acae5e64a182e03.png
[236a5c3ed21548da8a3a02db642dbb86.png]: https://img-blog.csdnimg.cn/236a5c3ed21548da8a3a02db642dbb86.png
[6a63fe1b9b244c33879714ce6a81e1b6.png]: https://img-blog.csdnimg.cn/6a63fe1b9b244c33879714ce6a81e1b6.png
[daec91650387423ca81ccb5ac88d7dc4.png]: https://img-blog.csdnimg.cn/daec91650387423ca81ccb5ac88d7dc4.png
[f185d482db0e46a18068b43a70f046c1.png]: https://img-blog.csdnimg.cn/f185d482db0e46a18068b43a70f046c1.png
[7ee93e5e890c4f4495983d9afe731097.png]: https://img-blog.csdnimg.cn/7ee93e5e890c4f4495983d9afe731097.png
[9390bbbc960e434d98f62707ad1aa4df.png]: https://img-blog.csdnimg.cn/9390bbbc960e434d98f62707ad1aa4df.png
[62e688ab9c74453f8d104e0cb678b198.png]: https://img-blog.csdnimg.cn/62e688ab9c74453f8d104e0cb678b198.png
[83b8f3f403a340cf8980db0860c16152.png]: https://img-blog.csdnimg.cn/83b8f3f403a340cf8980db0860c16152.png
[f9447ef066ed4499a7387755fee3718a.png]: https://img-blog.csdnimg.cn/f9447ef066ed4499a7387755fee3718a.png
[4da029ab87b14c549c2ff5fe13de40a7.png]: https://img-blog.csdnimg.cn/4da029ab87b14c549c2ff5fe13de40a7.png
[35c7ef87c4da46939de3fb70bf79636a.png]: https://img-blog.csdnimg.cn/35c7ef87c4da46939de3fb70bf79636a.png
[1ab0cced9d1e4fc5abb6fd364a89885f.png]: https://img-blog.csdnimg.cn/1ab0cced9d1e4fc5abb6fd364a89885f.png
[a1793584b01c427e9612a3caaff1bd0b.png]: https://img-blog.csdnimg.cn/a1793584b01c427e9612a3caaff1bd0b.png
[5c62967464014eedbc779e3799826ff8.png]: https://img-blog.csdnimg.cn/5c62967464014eedbc779e3799826ff8.png
[be96b4fcb0d74a269cd2908c7418e2b6.png]: https://img-blog.csdnimg.cn/be96b4fcb0d74a269cd2908c7418e2b6.png
[9a9a19e342be426385fe3d530b197a13.png]: https://img-blog.csdnimg.cn/9a9a19e342be426385fe3d530b197a13.png
[8842955b0eab4dbb858dfa5ae9681b52.png]: https://img-blog.csdnimg.cn/8842955b0eab4dbb858dfa5ae9681b52.png
[a9d4b1ea192b421e9eb23c3b2165c219.png]: https://img-blog.csdnimg.cn/a9d4b1ea192b421e9eb23c3b2165c219.png