通过上一篇文章,你们感受到了vue的强大之处了吗? 接下来笔者将会谈到关于vue中比较常用的时间处理函数的内容还有处理表单的相关内容,你们的小板凳搬好了吗? are you ready? 奥利给

1-事件

其实无论是原生js还是其他什么封装的第三方类库来说,都有自己的事件对象,说句通俗点来说,换汤不换药而已,而vue中也同样存在,只不过跟其他的大同小异罢了,接下来跟着笔者来领略vue的美好吧哈哈

1.1-事件对象

  1. 无需给事件处理函数传递参数> 在事件处理函数定义的位置, 直接通过形参接收事件对象即可
  1. <input type="text" @keyup="change" />
  1. new Vue({
  2.     el: '#app',
  3.     methods:{
  4.         change(e) {
  5.             console.log(e.target.value);
  6.         }
  7.     }
  8. })
  1. 需要给事件处理函数传递参数> 需要使用系统提供的关键字$event手动传递事件对象
  1. <input type="text" @keyup="change($event,'hello')" />
  1. new Vue({
  2.     el: '#app',
  3.     methods: {
  4.         // 在事件处理函数定义的地方直接通过形参接受事件对象即可
  5.         change(e,msg) {
  6.             console.log(e.target.value,msg);
  7.         }
  8.     }
  9. });

1.2-事件修饰符

  • 作用: 限制事件触发的时机或者条件
  • 语法格式html <div @事件名称.事件修饰符="事件处理函数"></div>

1.2.1-stop

  • 作用: 阻止事件冒泡
  • 书写位置: 子元素事件注册位置```html 
    1. ```javascript
    2. new Vue({
    3.       el: '#app',
    4.       methods: {
    5.           handle1(event){
    6.               // 阻止事件冒泡
    7.               // event.stopPropagation();
    8.               console.log('子标签被点击了');
    9.           },
    10.           handle2(){
    11.               console.log('父标签被点击了');
    12.           }
    13.       }
    14.   });

1.2.2-prevent

  • 作用: 阻止默认行为```html 百度
    1. ```javascript
    2. new Vue({
    3.   el: '#app',
    4.   methods: {
    5.       handle(event){
    6.           // 传统方式阻止默认行为
    7.           // event.preventDefault();
    8.           console.log('a标签被点击了');
    9.       }
    10.   }
    11. });

1.2.3-capture

  • 作用: 修改事件执行顺序, 将事件执行顺序变为捕获模式(由外向内依次触发)
  • 书写位置: 父元素的事件注册位置html <div class="parent" @click.capture="handle2"> <div class="child" @click="handle1"></div> </div>

1.2.4-self

  • 作用: 限制事件只能别自己触发, 不能被冒泡行为触发
  • 书写位置: 父元素事件注册位置```html
    ```

1.2.5-once

  • 作用: 限制事件只能被触发一次```html
    ```

1.3-按键修饰符

  • 作用: 修饰键盘事件, 从而限制键盘事件的触发条件(只有在按下按键修饰符对应的键盘按键的时候, 才执行事件处理函数)
  • 语法格式html <div @键盘事件名称.按键修饰符="事件处理函数"></div>

1.3.1-系统内置的按键修饰符

  • .enter: 回车键
  • .tab: tab键
  • .delete (捕获“删除”和“退格”键)
  • .esc: esc键
  • .space空格键
  • .up: 上
  • .down: 下
  • .left: 左
  • .right: 右

1.3.2-自定义按键修饰符

  • 按键修饰符名字自定义即可
  • 键盘码必须真实有效
  1. // Vue.config.keyCodes.自定义按键修饰符别名 = 按键键盘码
  2. Vue.config.keyCodes.f1 = 112;

2-表单处理(比较重要)

2.0-双向数据绑定

其实对于原生js来说也可以实现数据双向绑定,其实对于vue的v-model来说,它也是基于js做的相关底层处理,对于表单元素来说,用户所输入的内容将会以value的形式与服务端进行交互,所以在vue中,我们只需要关注数据层的变化,而视图层将会根据数据层的变化,来完成页面的更新.这也是vue中比较大的亮点.

2.1-v-model指令

  • 作用: 将用户通过表单元素输入或者选择的内容同步到数据层
  • 注意: v-model这个指令主要用在表单元素与组件双向数据绑定上.
  • 对于v-model来说,其实就是v-bind:value和v-on:input的语法糖,
  • 原理: v-bind:value=”something” v-on:input=”something=$event.target.value”

    2.2-常见表单元素双向数据绑定

    1. <div id="app">
    2.    <div>
    3.        用户名: <input v-model="info.username" type="text" />
    4.    </div>
    5.    <div>
    6.        性别: <input  v-model="info.sex" type="radio" value="男"/>男
    7.        <input  v-model="info.sex" type="radio" value="女"/>女
    8.    </div>
    9.    <div>
    10.        爱好: <input v-model="info.hobby" type="checkbox" value="下象棋"/> 下象棋
    11.        <input v-model="info.hobby" type="checkbox" value="下围棋"/> 下围棋
    12.        <input v-model="info.hobby" type="checkbox" value="五子棋"/> 五子棋
    13.    </div>
    14.    <div>
    15.        编程语言: 
    16.        <select v-model="info.langs">
    17.            <option value="java">java</option>
    18.            <option value="C语言">C语言</option>
    19.            <option value="python">python</option>
    20.        </select>
    21.    </div>
    22.    <div>
    23.        个人简介: <textarea v-model="info.introduce" cols="30" rows="10"></textarea>
    24.    </div>
    25.    <div>
    26.        <button @click="submit">立即提交</button>
    27.    </div>
    28. </div>
  1. new Vue({
  2.     el:'#app',
  3.     data:{
  4.         // 和表单元素进行绑定
  5.         info:{
  6.             username:'admin',
  7.             sex:'男',
  8.             hobby:['下象棋'],
  9.             langs:'java',
  10.             introduce:''
  11.         }
  12.     },
  13.     methods:{
  14.         submit(){
  15.             console.log(this.info);
  16.         }
  17.     }
  18. });

2.2-表单修饰符

  • 作用: 对v-model指令所收集到的表单内容进行处理,

    2.2.1-书写位置

    1. v-model.表单修饰符="数据"

2.2.2-系统表单修饰符

  • trim
    • 作用: 去除表单元素内容首位的空格
  • number
    • 作用: 对表单元素的内容进行数据类型的转换, 将表单内容转换成数值类型
    • 特点:
      • 当表单内容可以被转换成数值类型的时候, 会自动转换
      • 当表单内容无法转换成数值类型的时候, 则不会做处理

  • lazy

    • 作用: 延迟v-model同步数据的时机, 失去焦点的时候, 再进行数据同步

      3-vm.$set

      对于$set来说,是vue中内置的系统方法,该方法会实时监听数组或者对象的变化.

      3.1-作用

  • 动态给数组添加元素

  • 动态给对象添加属性

    3.2-语法

    1. vm.$set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)

3.3-别名

  1. Vue.set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)

4-vue核心原理

4.1-响应式数据

  • 数据劫持
  • Object.defineProperty(): 一种定义变量的方式, 通过这种方式定义的数据的读取和操作可以被监听到数据的变化.```javascript // Object.defineProperty(数据所属对象,数据名称,{get(){},set(){}}) Object.defineProperty(window,’msg’,{ // 当读取变量的时候, 会自动触发 get(){
    1.   // 必须有返回值, 变量的值是由get方法的返回值来决定
    2.   console.log('get');
    3.   return 'hello'
    }, // 当对变量进行重新赋值的时候, set方法会自动触发, 并且可以通过形参接收用户的赋值 set(value){
    1.   console.log('set');
    2.   console.log(value);
    3.   // 通知视图进行更新
    } }); // 读取数据 console.log(msg); // 设置数据 msg=’你好’; ```

4.2-模板编译

  • 模板编译的核心原理: 正则替换```javascript class Vue{ // 构造器方法:系统方法, 会自动执行; 作用: 进行属性初始化 constructor(props){
    1.   // 将data中的数据解构之后, 挂载到this上
    2.   for(let key in props.data){
    3.       this[key]=props.data[key];
    4.   }
    5.   // 将methods中的方法解构之后, 挂载到this上
    6.   for(let key in props.methods){
    7.       this[key]=props.methods[key];
    8.   }
    9.   // 将el挂载到this上
    10.   this.$el=props.el;
    11.   // 调用渲染方法, 对模板进行编译
    12.   this.render();
    } // 渲染方法
    render(){
    1.  // 1-获取模板内容   
    2.  const html=document.querySelector(this.$el).innerHTML; 
    3.  const reg=/\{\{(\w+)\}\}/g; 
    4.  // 2-实现正则替换
    5.  // a:完整的正则表达式匹配到的内容
    6.  // b:子表达式匹配到的内容    
    7.  const newHtml=html.replace(reg,(a,b)=>{
    8.       // 使用return的结果, 替换完整正则表达式匹配到的内容
    9.       return this[b];
    10.  });
    11.  // 3-更新视图
    12.  document.querySelector(this.$el).innerHTML=newHtml;
    } } ```

5-生命周期

  • vue在创建, 运行, 销毁阶段的不同时间点, 自动触发的一系列函数, 统称为生命周期钩子函数,每个vue实例在被创建之前都要经历一系列的初始化过程,这个过程就是vue的生命周期.大家看看官方给的图解或许就会有所明白了.具体请查阅 vue官网

life.png

5.1-创建阶段

5.1.1-特点 : 只执行1次,并且只会在实例化vue对象后才能被创建.

5.1.2-钩子函数

  • beforeCreate: 创建之前(创建数据和方法还没有创建完毕),该阶段会判断是否存在el选项,如果有将会继续向下编译,如若没有,停止编译,但是会继续调用mounted这个钩子函数里面执行的代码.
    • 不能调用数据和方法
  • created: 创建之后(完成数据和方法的创建)
    • 调用数据和方法
  • beforeMount: 挂载前
    • 还没有完成视图的渲染
  • mounted: 挂载后
    • 已经完成了视图的渲染

00.png

5.2-运行阶段

当vue发现data中的数据发生了改变,会触发对应组件的相应渲染,然后就会调用beforeUpdate和update钩子函数.

5.2.1-钩子函数
  • beforeUpdate: 更新之前
    • 已经完成了数据更新, 但是还没有完成视图的更新

  • updated: 更新之后

    • 已经完成了数据更新, 并且完成了视图的更新

      5.3-销毁阶段

      5.3.1-特点: 只执行1次,并且对于不同的组件或者页面都只会执行一次.

      5.3.2-钩子函数

  • beforeDestroy: 该钩子函数将会在实例被销毁之前调用,此时,实例仍然完全可用

  • destroyed: 在实例销毁后调用,此时,挂载在实例上的所有数据和方法都无法使用,所有的事件监听器都会被移除,所有的子实例也会被销毁.

其实对于vue的生命周期,并不是很难理解,唯一就是在特定的钩子函数中要处理的事件不同.那么它们存在的意义就会有所变化.就像刚出生的婴儿成为一位有妻室的人的过程,每个阶段都有自己该做的事一样,哈哈 笔者这个比喻可还恰当呢? 好了 我们下期见~~

6-结尾

如果觉得本篇文章对您有用的话，可以麻烦您给笔者点亮那个点赞按钮,对于慕筱佳来说,真的真的非常有用,你们的点赞就是笔者最大的动力,我们下期文章见.