Vue——模板语法、数据代理、监听事件相关笔记

文章目录

• 前言
• 一、模板语法
  • 1. 插值语法
  • 2. 指令语法
• 二、使用步骤
  • 1.MVVM 模型 
  • 2.数据代理
  • 3.  vue中的数据代理
• 三、监听事件
  • 3.1 语法格式
  • 3.2 参数传递与默认形参
  • 3.3 事件修饰符
  • 3.4 常用键盘修饰符
  • 3.5  自定义键盘修饰符
• 总结

---

一、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

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

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1. 插值语法

概念: 双大括号形式 ，用于解析标签体内容：{{msg}} msg: 为表达式，也就是说大括号内的内容应该是JS表达式。

举例：

{{hello}}

2. 指令语法

概念：vue中有很多指令，他们用于解析标签属性、解析标签体内容、绑定事件，以v-开头。

2.1  v-html

使用 v-html 指令用于输出 html 代码：

2.2  v-bind

HTML 属性中的值应使用 v-bind 指令,单向绑定(v-bind)：数据只能从data流向页面。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

v-bind 缩写   

   

    跳转到百度哦！

   

    跳转到百度哦！

    修改颜色
    


    

      v-bind:class 指令
    
  
      
  

2.3  v-model 

双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。多用于表单元件

2.4  v-if 

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

  
{{type}}
        沾衣欲湿杏花雨
    
    
    

2.5  v-else 

可以用 v-else 指令给 v-if 添加一个 "else" 块：

 

        

          Sorry
        
        

          Not sorry
        
    
        
    

2.6  v-else-if  

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用

    

      A
    
    

      B
    
    

      C
    
    

      Not A/B/C
    

    

2.7  v-show  

我们也可以使用 v-show 指令来根据条件展示元素：

  
{{type}}
        沾衣欲湿杏花雨
    
    
    

2.8  v-click  

以v-on:事件名称(v-on:click),简写方式：@click。

说明：

1：用methods来配置事件的函数，最终会在VM身上。

2：methods不可用箭头函数，否则this就不是VM。

			   单击事件

二、数据代理

1.MVVM 模型 

概念：M：模型(Model) ：data中的数据 V：视图(View) ：模板代码  VM：视图模型(ViewModel)：Vue实例。

理解：VM用来把数据放到视图上，data中的所有属性都会放到VM上,在视图中都可以使用。

如下图所示，vue中的MVVM模型就可以这样理解

2.数据代理

2.1 什么是数据代理? 

数据代理——通过一个对象代理另一个对象属性的操作（读 / 写）

 2.2 Object.defineproperty( )  方法 

“Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。

可能会有小伙伴好奇，数据代理和这个方法又有什么关系呢？ 其实数据代理其实这样理解：就是在自身追加了所要代理的属性，然后再设置了其他的方法操作属性（具体的方法下文会讲述）此时就可以利用Object.defineproperty（ ）方法实现。

 2.3 Object.defineproperty( )  方法相关参数

参数一： 将要添加属性的对象名。

参数二： 将要代理的属性名。

参数三： 相关配置项。

相关配置项目详解——

  enumerable: true,   //控制该属性是否可以被枚举(遍历),默认为false

  wrtiable: true,    // 控制该属性是否可以被修改，默认为false

  configurable: true,  //控制该属性是否可以被删除，默认为false

 也就是说通过Object.defienproperty（ ）追加的属性默认是不会被遍历的以及修改、删除的，通过上述配置参数可以实现。

举例与思考:

有一名为person的对象，现要求为这个对象追加属性名为 age 值为 20的属性，有多少种方法呢？有聪明的小伙伴可能会想到，直接利用对象追加属性的方法，设置属性名和属性值的方法，直接追加，但如果后续这个追加的属性的值有所改变，这就不得不每次都要修改原码十分不方便，此时就可以在vue中使用数据代理的方式，随后借助vue中的 “响应式”系统就可以实现 data中的数据与页面中的数据实时更新的功能。

实现代码以及代码解释：

// 当有人读取person 的age 属性时，getter方法就会被调用,且返回值就是age 的值。

            get( ){

                return p1.x;

            },

            // 当有人修改person 的age 属性时，setter方法就会被调用，且返回值就是修改的具体值。

            set(value){

                console.log('有人修改了p2的值，是'+value);

            }

     // 数据代理案例
        const  p1 = {x:1};
        const  p2 = {y:2};
        Object.defineProperty(p2,'x',{
            enumerable: true,
            get( ){
                return p1.x;
            },
            set(value){
                console.log('有人修改了p2的值，是'+value);
            }
        })
        Object.defineProperty(p2,'age',{
            value: 24,
            enumerable: true,
            writeable: true,
        })
        let res = Object.keys(p2);
        console.log(res);  
    

3.  vue中的数据代理

3.1 vue数据代理概念

通过vm对象来代理data对象中属性的操作（读/写）

3.2 vue数据代理优势

更加方便的操作data中的数据

3.3 vue数据代理的原理

通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter去操作（读/写）data中对应的属性。

3.4 数据代理图示

如图所示，vm存储data数据的方式是将其赋值了一份，存储在_data，此时还未发生数据代理，所以在此时的vm中需要读取_data中的数据，还需要_data才能够读取，这时候vue又做了一个举动就是将_data中的数据，又分别存放在了vm自身上，这就是为什么data中的数据在 vm身上都能够访问的原因，此时也就完成了数据代理。

也就是说   vm._data == data  ——true

三、监听事件

3.1 语法格式

以v-on:事件名称(v-on:click),简写方式：@click。

        单击事件

说明：

1：用methods来配置事件的函数，最终会在VM身上。

2：methods不可用箭头函数，否则this就不是VM。

3.2 参数传递与默认形参

语法：@click="fun($event,123)",@click="fun"等价于@click="fun($event)"

接收：

3.3 事件修饰符

· prevent : 阻止事件的默认行为

· stop : 停止事件冒泡

单击按钮

· once ：事件只触发一次

单击按钮

·capture：使用事件捕获

·self：只有event.target 是当前做操的元素时才触发事件

    单击按钮

·passive：事件的默认行为立即执行，无需等待事件回调执行完毕

   

• 1
• 2
• 3
• 4

Wheel:鼠标滚轮事件，不加上passive，需要等待事件结束后执行滚动，加上则滚轮不受回调影响

3.4 常用键盘修饰符

·回车 => enter

·删除 => delete (捕获“删除”和“退格”键)

·退出 => esc

·空格 => space

·换行 => tab (特殊，必须配合keydown去使用)

  type="text" v-model="age" @keydown.tab ="fun">

·上 => up

·下 => down

·左 => left

·右 => right

举例：

系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

3.5  自定义键盘修饰符

Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

按下crtl+y 提示。

不推荐

---

总结

今日的分享到此结束，最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐！