侧边栏壁纸
博主头像
liuyiwuqing博主等级

心在哪里收获就在哪里

  • 累计撰写 20 篇文章
  • 累计创建 22 个标签
  • 累计收到 30 条评论

目 录CONTENT

文章目录

vue2学习笔记

liuyiwuqing
2023-05-30 / 0 评论 / 2 点赞 / 295 阅读 / 1,504 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-06-13,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

01、初识 Vue

  1. 想让 Vue 工作,就必须创建一个 Vue 实例,且传入一个配置对象;
  2. root 容器里面的代码依然符合 html 语法,只不过混入了一些特殊的语法;
  3. root 容器里面的代码被称为【Vue 模板】;
  4. 容器和 vue 实例一对一关系 ;
  5. 真实开发中只有一个 vue 实例,并且会配合组件一起使用;
  6. {{xxx}}中要写 js 表达式,且 xxx 可以自动读取到 data 中的所有属性;
  7. 一旦 data 中的数据发生改变,页面中 使用该数据的地方也会改变。

02、Vue 模板语法

vue 模板语法有两大类:

  1. 插值语法:

    功能:用于解析标签体内容;

    写法:{{xxx}},xxx 是 js 表达式,且可以直接读取到 data 中的所有属性;

  2. 指令写法:

    功能:用于解析标签等(包括:标签属性、标签体内容、绑定事件…);

    举例:v-bind:href=“xxx” 或 简写为 :href=“xxx” 同样 xxx 要写 js 表达式,且可以直接读取到 data 中的所有属性;

    备注:vue 中有很多的指令,且形式都是:v-???,此处我们只拿 v-bind 举个例子

03、数据绑定

Vue 中有两种数据绑定的方式:

  1. 单向绑定(v-bind):数据只能从 data 流向页面;

  2. 双向绑定(v-model) :数据不仅能从 data 流向页面,还可以从页面流向 data;

备注:

  1. 双向绑定一般都应用在表单类元素上(如:input、select 等);
  2. v-model:value 可以简写为 v-model,因为 v-model 默认收集的就是 value 值。

04、el 与 data 的两种写法

  1. el 有两种写法

    1. new Vue 时候配置 el 属性;
    2. 先创建 Vue 实例,然后通过 vm.$mount(‘#root’)指定 el 的值;
  2. data 有两种写法

    1. 对象式

    2. 函数式

    使用组件时,data 必须使用函数式,否则会报错。

    注意:由 Vue 管理的函数,一定不要写箭头函数,一旦写了箭头函数,this 就不再是 Vue 实例了。

05、MVVM模型

MVVM模型:

  1. M:模型(Model):data中的数据
  2. V:视图(View):模板代码
  3. VM:视图模型(ViewModel):Vue实例

备注:

  1. data中所有的属性,最后都出现在vm身上;
  2. vm身上所有的属性及Vue原型上所有的属性,在Vue模板中都可以直接使用。

06、数据代理

回顾Object.defineProperty方法

Object.defineProperty(person, 'age', {
    // value: '18',
    // enumerable: true, //控制属性是否可以枚举,默认值是false
    // writable: true, //控制属性是否可以被修改,默认值是false
    // configurable: true //控制属性是否可以被删除,默认值是false

    // 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
    get() {
        console.log('有人读取age属性');
        return number;
    },

    // 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
    set(value) {
        console.log('有人修改age属性');
        number = value;
    }
})

何为数据代理

let obj = { x: 100 }
let obj2 = { y: 200 }

// 数据代理:通过一个对象代理对另一个对象中属性的操作(读 / 写)
Object.defineProperty(obj2, 'x', {
    get() {
        return obj.x;
    },
    set(value) {
        obj.x = value
    }
})

Vue中的数据代理

  1. Vue中的数据代理:

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

  2. Vue中数据代理的好处:

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

  3. 基本原理:

    通过Object.defineProperty()把data对象中所有属性添加到vm上。

    为每一个添加到vm上的属性,都指定一个getter/setter。

    在getter/setter内部去操作(读/写)data中对应的属性。

07事件处理

事件的基本使用

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

事件修饰符

  1. prevent:阻止默认事件(常用);
  2. stop:阻止事件冒泡(常用);
  3. once:事件只触发一次(常 用);
  4. capture:使用事件的捕获模式;
  5. self:只有event.target是当前操作的元素时才触发事件;
  6. passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

键盘事件

  1. Vue中常用的按键别名:

    回车 => enter

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

    退出 => esc

    空格 => space

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

    上 => up

    下 => down

    左 => left

    右 => right

  2. Vue未提供别名的按键,可以使用按键原始的key值去绑定,但主要要转为kebab-case(短横线命名)

  3. 系统修饰键(用法特殊):ctrl、alt、shift、meta

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

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

  4. 也可以使用keyCode去指定具体的按键 (不推荐)

  5. Vue.config.keyCodes.自定义键名=键码,也可以去定制按键别名

2
广告 广告

评论区