• Vue基础_Vue2

    文章目录

    一、Vue是什么？

    一套构建用户界面的渐进式JavaScript框架

    渐进式：我们可以由浅入深，由简单到复杂方式去使用的Js框架

    当我们只需要做一个简单应用时：只需要引入一个轻量小巧的核心库
    当我们需要做一个复杂应用时：可以映入各式各样的Vue插件

    二、Vue的特点

    1. 采用组件化模式，提高代码重复率，且让代码的更好维护
    2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
    3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

    三、Vue的安装

    1.在Vue官网下载Vue.js文件安装

    该方法在官网中已经打不开了
    在这里插入图片描述

    2.CDN

    通过< script >引入Vue进行安装

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

    • 1

    3.NPM方法（推荐）

    我这里使用Vite去创建
    具体可以参考vite官网

    pnpm create vite

    • 1

    在这里插入图片描述
    在这里插入图片描述

    四、初识Vue

    1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
    2. Root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法Vue模板语法
    3. Root容器里的代码被称为Vue模板
    4. Vue容器和实例是一对一的关系
    5. 在开发中只有一个Vue实例，且会配合着组件一起使用
    6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中所有的属性
    7. 一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>

<!--准备一个容器-->
<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //禁止Vue在启动时产生生产提升
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data中用于存储数据，数据供el所指定的容器去使用
            name: '发财'
        }
    })
</script>
</body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    五、Vue模板语法

    Vue模板语法有两大类

    1. 插值语法
      功能：用于解析标签体内容
      写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

    2. 指令语法：
      功能：用于解析标签（包括：属性标签、标签体内容，绑定事件…）
      举例：v-bind:href=‘xxx’ 或 简写为 :href=‘xxx’,xxx同样要写js表达式，且可以直接读取到data中所有的属性
      在这里插入图片描述

    六、Vue的数据绑定

    Vue中有两种数据绑定方式

    1. 单向数据绑定（v-bind）：数据只能从data流向页面
    2. 双向绑定（v-bind）：数据不仅能从data流向页面，也可以从页面流向data
    1. 双向绑定, 只能绑定文本框,单选按钮,复选框,文本域,下拉列表等
    2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
    3. 单个复选框, 绑定的是boolean类型
    4. 多个复选框, 绑定的是数组
    5. select单选对应字符串，多选对应也是数组

    在这里插入图片描述

    七、data和el的两种写法

    el的两种写法

    1. new Vue时配置el属性
      在这里插入图片描述

    2. 先创建vue实例，在通过vm.$mount(’#root‘)指定el的值
      在这里插入图片描述

    data的两种写法

    1. 对象式
      在这里插入图片描述2. 函数式
      该方法通常用于组件封装
      在这里插入图片描述

    注意：函数式写法支持多种函数写法，但要注意的是 箭头函数会改变this的指向，使this指向windows

    八、MVVM

    Vue在设计出来时，在一定程度上参考了MVVM模型
    在这里插入图片描述
    M：模型（Model）：对应data中的数据
    V：视图（view）：模板
    VM：视图模型（ViewModel）:Vue实例对象
    在这里插入图片描述

    经过观察发现，在Vue中：

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

    MVVM优点：

    1. 双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化，很好做到数据的一致性。不用担心在模块的这一块数据是这个值，在另一块就是另一个值了。

    2. view的功能进一步得到强化，具有控制的部分功能，若想无线增强它的功能，甚至控制器的功能几乎都可以迁移到各个view上（不推荐，这样的话view就干了不属于它职责范围的事情了）。view可以像控制器一样具有自己的View-Model

    3. 由于控制器的功能大都移动到View上处理，大大的对控制器进行了瘦身。不用再为看到庞大的控制器逻辑而发愁了。

    4. 可以对View或ViewController的数据处理部分抽象出来一个函数处理model。这样它们专职页面布局和页面跳转，它们必然更一步的简化。

    MVVM缺点：

    1. 数据绑定使得 Bug 很难被调试。你看到界面异常了，有可能是你 View 的代码有 Bug，也可能是 Model 的代码有问题。数据绑定使得一个位置的 Bug 被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

    2. 一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存。

    3. 数据双向绑定不利于代码重用。客户端开发最常用的重用是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同模块的model都不同。那就不能简单重用View了。

    该优缺点部分是我在其他地方摘抄的，只是用于学习，如果侵权了就删了

    九、数据代理

    描述：通过一个对象代理另一个对象中属性的操作（读/写）

    vue中数据代理的好处：
    更加方便的操作data中的数据

    基本原理：

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

    Object.defineProperty()

    描述：Object.defineProperty（） 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

    语法：Object.defineProperty(obj, prop, descriptor)

    参数：obj：要定义的属性；
    prop：要定义或修改的属性的名称或Symbol；
    descriptor：要定义或修改的属性描述符

    在这里插入图片描述
    在这里插入图片描述
    默认情况下，该方法定义的属性不能直接进行遍历或者删除修改等操作，但允许修改默认的额外选项或配置

    简单的数据代理

    通过操作obj2去对obj进行操作
    在这里插入图片描述

    十、事件处理

    事件的基本使用：

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

<!--准备一个容器-->
<div id="root">
    <h1>{{name}}</h1>
    <button @click="btn">提示</button>
    <button @click="btn2($event,88)">提示2</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'发财'
        },
        methods:{
            btn(event){
                alert('发财')
            },
            btn2(event,number){
                alert('发财'+number)
            }
        }
    })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    事件修饰符

    Vue中的事件修饰符

    1. prevent：阻止默认事件
    2. stop：阻止事件冒泡
    3. once：事件只触发一次
    4. capture：使用事件的捕获模式
    5. self：只有event.target是当前操作的元素时才触发事件
    6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
        <style>
        *{
            margin-top:20px;
        }
        .demo{
            background-color: aqua;
        }
        .demo2{
            padding: 10px;
            background-color: aquamarine;
        }
        .demo3{
            background-color: bisque;
        }
    </style>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <h1>{{name}}</h1>
    <button @click="btn">提示</button>
    <!--    prevent阻止默认事件-->
    <button @click.prevent="btn">提示2</button>
    <!--    stop阻止事件冒泡-->
    <div class="demo" @click="btn">
        <button @click.stop="btn">提示3</button>
    </div>
    <!--    once事件只触发一次-->
    <button @click.once="btn">提示4</button>
    <!--    capture使用事件的捕获模式  使事件在捕获阶段就执行-->
    <div class="demo2" @click.capture="btn2($event,5)">提示5
        <div class="demo3" @click="btn2($event,6)">提示6</div>
    </div>
    <!--    capture使用事件的捕获模式-->
    <div class="demo2" @click.self="btn2($event,7)">提示7
        <div class="demo3" @click="btn2($event,8)">提示8</div>
    </div>
    <!--    passive-->
    <div class="demo2" @click.self="btn2($event,7)">提示7
        <div class="demo3" @click="btn2($event,8)">提示8</div>
    </div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            name: '发财'
        },
        methods: {
            btn(event) {
                alert('发财')
            },
            btn2(event,number){
                alert(number)
            }
        }
    })
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60

    键盘事件

  • 相关阅读:
    IEEE COMMUNICATIONS LETTERS (ICL) 投稿状态记录
    进程互斥的软硬件实现方法
    Vue3源码reactive和readonly对象嵌套转换，及实现shallowReadonly
    【数据结构】线性表（七）堆栈：链式栈及其基本操作（初始化、判空、入栈、出栈、存取栈顶元素、清空栈）；顺序栈与链式栈之比较
    某村庄供水工程设计（设计报告+cad图纸+预算工程量清单）
    【C进阶】——预处理详解
    【大模型应用极简开发入门（1）】LLM概述：LLM在AI中所处位置、NLP技术的演变、Transformer与GPT、以及GPT模型文本生成逻辑
    计网第四章（网络层）（八）（最短路径优先协议OSPF）
    YOLO系列之yolov2解读（2）
    电源管理芯片直入电子设备心脏，让七大产业推动疫情的来临
  • 原文地址：https://blog.csdn.net/qq_45578388/article/details/126068916