荣耀头条

Vue全家桶系~1.Vue2基础（兼容）

2023-08-11 17:01 由 鲲逸鹏 发表于 #前端开发

Vue基础学习

HTML+CSS+JS基础文档：https://developer.mozilla.org/zh-CN/docs/Web

Vue3官网文档：https://cn.vuejs.org/ | Vue2文档：https://v2.cn.vuejs.org/v2/guide

个人建议：对于小白和新手，以及只会HTML+CSS+JS基础的人来说，别上来就搞那一套高度封装的开发方式，开发是很方便，调bug也是非常麻烦的。先以这种脚本引入+HTML的混合开发入手，熟悉之后再用组件化开发方式

这样做两个好处：1.原来HTML+JQ的后端开发程序员，用这种开发方式反而更容易入手、2.市面上很多Vue2的项目，不至于直接懵圈

PS：我下面案例只是使用Vue2的脚本引入的方式便捷开发，语法和知识点都是参考最新Vue3最新文档（贴的地址也都是Vue3的文档）

如果有了前端开发基础，比如开发的时候早就抛弃HTML这种老一辈开发方式，已经有TS、Vue之类的基本经验 ==> 【跳过这篇文章，看下篇】

1.环境配置

1.1.IDE配置（必配）

VSCode官方插件：Vue Language Features (Volar)

TypeScript支持：TypeScript Vue Plugin (Volar)

Vue快速开发：Vue VSCode Snippets（输入缩写快速生成代码段）

错误高亮提示：Error Lens

1.2.第一个demo

练手先使用传统的开发方式：把vue当做一个脚本js文件引入，然后再开发（官方也推荐这样入门）

开发的时候可以引用开发版vue.js（更多友好提示），发布的时候替换为vue.mini.js（更轻量级）

首先说下大致流程：

1首先要在HTML文件里面创建一个存放宿主文件的标签（Vue所有DOM操作都是这个里面进行）可以是id，也可以是class

<div id="app"> </div>

2然后引入vuejs（Vue2基础语法和Vue3基本上一样）

 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>

3接着就要在script标签里面实例化vue对象了：

<script>
    // 3.创建一个vue示例
    const app = new Vue({
        el: '#app' // 【必须】指定宿主id或者class
        }
    });
</script>

下面进行案例实战，需求：在HMTL页面里面显示小明的自我介绍（变量赋值），1s后补充下介绍（变量修改）

<!-- 1.创建一个宿主文件 -->
<div id="app"> 自我介绍：{{name}} </div>
<!-- 2.引入vue.js -->
<script src="../assets/vue2.js"></script>
<script>
    // 3.创建一个vue示例
    const app = new Vue({
        el: '#app', // 【必须】指定宿主id或者class
        data() {// 输入vdata可以快速生成
            return {
                name: '大家好，我叫小明'// 变量初始化赋值
            }
        }
    });
    // 4.一秒后修改下文本内容
    setTimeout(() => {
        // 直接变量修改，不用DOM操作了
        app.name = '谢谢大家'; // 变量修改
    }, 1000);
</script>

输出：

自我介绍：大家好，我叫小明（刚开始）
自我介绍：谢谢大家（1s后）

Vue不只是一个模板引擎，它其实是响应式的，数据和DOM已经关联了。要验证也很简单，控制台改变下变量，页面就实时改变了：

2.模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

2.1.文本渲染（文本插值）

数据绑定最常见的形式就是使用“Mustache”语法{{ 变量 }}的文本插值，这种方式分两种：

  1. 当数据改变时，插值文本跟着改变（常用）：
    1. <span>Message: {{ msg }}</span>
  2. 能执行一次性的插值，，当数据改变时，内容不会更新
    1. <span v-once>这个将不会改变: {{ msg }}</span>
    2. 注意：这会影响到该节点上的其它数据绑定

贴一下第一个demo的例子：

<!-- 1.创建一个宿主文件 -->
<div id="app"> <span>{{name}}</span> </div>
<!-- 2.引入vue.js -->
<script src="../assets/vue2.js"></script>
<script>
    // 3.创建一个vue示例
    const app = new Vue({
        el: '#app', // 【必须】指定宿主id或者class
        data() {// 输入vdata可以快速生成
            return {
                name: '大家好，我叫小明'
            }
        }
    });
    // 4.一秒后修改下文本内容
    setTimeout(() => {
        // 直接变量修改，不用DOM操作了
        app.name = '谢谢大家';
    }, 1000);
</script>

如果其他不变，就是把<span>{{name}}</span>改成：<span v-once>{{name}}</span>，你会发现只显示第一次赋值的内容

app.name的变量其实已经修改了，但是页面文本内容因为设置了v-once，不会修改

补充：HTML渲染（v-html）

双大括号会将数据解释为普通文本，为了输出HTML，可以使用v-html 指令：<span v-html="变量"></span></p>

示例：

<div id="app">
    <!-- 默认是文本 -->
    <p>{{htmlone}}</p>
    <!-- 想渲染html就要这样写 -->
    <p v-html="htmltwo"></p>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                htmlone: '<h2>我是HTML</h2>',
                htmltwo: '<h2>我是HTML</h2>'
            }
        },
    })
</script>

效果：

这个 p 的内容将会被替换成为 property 值 htmltw，直接作为 HTML——会忽略解析 property 值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

2.2.属性绑定（v-bind）

1.常用绑定案例

HTML特性不能用Mustache语法(双大括号)，要使用v-bind指令：v-bind:属性值="变量名"

举个title属性值的例子：<p v-bind:title="title1">鼠标移上去，停顿几秒</p>

Vue还提供了一种简写方式：<p :title="title2">鼠标移上去，停顿几秒</p>

完整案例：

<div id="app">
    <p v-bind:title="title1">
        鼠标移上去，停顿几秒看看
    </p>
    <!-- 可以缩写 -->
    <p :title="title2">
        鼠标移上去，停顿几秒看看
    </p>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                title1: '我是一个标题1',
                title2: '我是一个标题2'
            }
        },
    })
</script>

2.布尔类型属性

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上，如果 btnDisabled 的值是 null、undefined 或 false， disabled attribute直接不会出现在 <button> 中

<button :disabled="btnDisabled">按钮</button>

当btnDisabled为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

3.动态绑定多个值

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

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

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

<div v-bind="objectOfAttrs"></div>

案例：

<div id="app">
    <div v-bind="objectOfAttrs">F12查看我的源码</div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                objectOfAttrs: {
                    id: 'container',
                    class: 'wrapper'
                }
            }
        },
    })
</script>

效果：

扩展：JavaScript 表达式

这边贴一下官方的文档：https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式都会被作为 JavaScript ，以当前组件实例为作用域解析执行。

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

  • 在文本插值中 (双大括号)
  • 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

案例：

<div id="app">{{num + 1}}</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                num: 3
            }
        },
    })
</script>

结果是4

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

下面的例子都是无效的：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

更多参考：https://cn.vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions

2.3.条件渲染（v-if）

  1. v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

  2. v-else 相当于为 v-if 添加一个“else 区块”

    1. 使用 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别

  3. v-else-if 提供的是相应于 v-if 的“else if 区块”

    1. 使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面

举个例子：

<div id="app">
    <div v-if="str === 'A'"> A </div>
    <div v-else-if="str === 'B'"> B </div>
    <div v-else-if="str === 'C'"> C </div>
    <div v-else> other </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                str: 'D'
            }
        },

    });
</script>

输出：other

Vue3新增了v-show：https://cn.vuejs.org/guide/essentials/conditional.html#v-show

v-if 是惰性渲染的：如果在初次渲染时条件值为 false，元素是不存在的。

v-show 是通过css属性display控制元素显示，无论初始条件如何，始终会被渲染。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

2.4.列表渲染（v-for）

同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显（Vue2和Vue3两者优先级恰恰相反）

1.遍历数组

v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用item in items形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名（用item of items迭代遍历也行）【items是一个数组，而不能是一个方法（可以是计算属性）】

eg：<p v-for="item in items"> {{ item }} </p>

示例：

<!-- div#app -->
<div id="app">
    <!--快速生成： ul>li*2 -->
    <ul>
        <!-- vfor -->
        <li v-for="item in items">
            {{ item }}
        </li>
    </ul>
</div>
<!-- script:src -->
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                items: ['狮子头', '韭菜', '鸡腿']
            }
        },
    })
</script>

效果：

2.第二参数

还可以(value，index)的方式遍历：

<!-- div#app -->
<div id="app">
    <ul>
        <li v-for="(value,index) in items">
            {{index}}.{{value}}
        </li>
    </ul>
</div>
<!-- script:src -->
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                items: ['狮子头', '韭菜', '鸡腿'],
            }
        },
    })
</script>

效果：

3.遍历对象

举个遍历小明个人信息的案例：

<div id="app">
    <ul>
        <li v-for="(value,key,index) in items">
            {{index}}.{{key}}：{{value}}
        </li>
    </ul>
</div>
<!-- script:src -->
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                items:{
                    'name':'小明',
                    'age':'32',
                    'gender':'男'
                }
            }
        },
    })
</script>

效果：

如果你直接遍历，则只会输出value值。我们只修改上面代码的html部分：

<div id="app">
    <ul>
        <li v-for="value in items">
            {{value}}
        </li>
    </ul>
</div>

效果：

如果想要获取key和value，可以写2个参数：v-for="(value,key) in items

<div id="app">
    <ul>
        <li v-for="(value,key) in items">
            {{key}}：{{value}}
        </li>
    </ul>
</div>
<!-- script:src -->
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                items: {
                    'name': '小明',
                    'age': '32',
                    'gender': '男'
                }
            }
        },
    })
</script>

效果：

4.对象列表★

来个实际的案例，v-if + v-for：遍历班上的同学，并显示他们的个人信息：

<div id="app">
    <p v-if="models.length==0">该班级没有学生</p>
    <ul v-else>
        <li v-for="model in models" :key="model.id">
            {{ model.id }}.{{model.name}}.{{model.age}}.{{model.gender}}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app', data() {
            return {
                models: [
                    { 'id': 1, 'name': '小明', 'age': '32', 'gender': '男' },
                    { 'id': 2, 'name': '小华', 'age': '22', 'gender': '男' },
                    { 'id': 3, 'name': '小花', 'age': '28', 'gender': '女' }
                ]
            }
        },
    })
</script>

效果：

PS：如果models的数值是空数组，就会显示：该班级没有学生

4.总结扩展

如果遍历的是列表，就两个参数，第1个是value值，第2个是index。

如果遍历的是对象，第1个参数是value值，第2个是key，第3个是index。

为了v-for有更高的渲染性能，需要给 Vue 一个提示，需要为每项提供一个唯一 key 属性（DOM中没有key属性，是给vue用的）eg：

建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

<!-- 当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上： -->
<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

key 并不仅与 v-for 特别关联，它还具有其它用途

key 绑定的值期望是一个基础类型的值，例如字符串或 number类型。不要用对象作为 v-for 的 key

更多用法：https://cn.vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results

key文档：https://cn.vuejs.org/guide/essentials/list.html#maintaining-state-with-key

2.5.事件处理（v-on）

官方文档：https://cn.vuejs.org/guide/essentials/event-handling.htm

1.简单调用

先来个简单案例：单击后调用show方法：v-on:click="show"

完整写法：<div id="app"><button v-on:click="show">点我弹框</button></div>

简写用法：<div id="app"><button @click="show">点我弹框</button></div>

const app = new Vue({
    el: '#app',
    methods: {
        show() {
            alert('v-on test');
        }
    },
});

效果：

2.按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键，Vue 为一些常用的按键提供了别名：

  • .enter
  • .tab
  • .delete (捕获“Delete”和“Backspace”两个按键)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

系统按键修饰符：

系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

  • .ctrl
  • .alt
  • .shift
  • .meta：微软的Windows 键、苹果的Command 键

来个案例：

Alt+Enter键触发事件：@keyup.alt.enter="xxx"，Ctrl+Click按键触发：@click.ctrl="xxx"

<div id="app">
    <input type="text" @keyup.alt.enter="show('Alt + Enter')" value="Alt + Enter 试试？">
    <button @click.ctrl="show('点击 + Ctrl')">Ctrl+单击试试？</button>
    <!-- @keyup.ctrl.click这样写是没用的 -->
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        methods: {
            show(msg) { alert(msg); }
        },
    });
</script>

.exact 修饰符，允许控制触发一个事件所需的确定组合的系统按键修饰符。 ==> 就是只按下了什么键

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

  • .left
  • .right
  • .middle

这些修饰符将处理程序限定为由特定鼠标按键触发的事件

3.事件修饰符（了解）

专注于数据逻辑而不用去处理 DOM 事件的细节，Vue 为 v-on 提供了事件修饰符。

事件修饰符官方文档：https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

修饰符是用 . 表示的指令后缀，包含以下这些：

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。eg：使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

  • .stop
  • .prevent
  • .self
  • .capture
  • .once
  • .passive
<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

2.6.表单绑定（v-model）

可以用 v-model 指令在表单 <input> 、 <textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。

看个简单v-model的案例：（v-model后面的item要先定义下）

<!-- div#app>input -->
<div id="app">
    <input v-model="item" type="text" @keyup.enter="addItem" />
    <button @click="addItem">按钮添加</button>
    <div v-if="items.length==0">
        食堂里暂时没有菜了
    </div>
    <!-- v-if尽量不和v-for嵌套使用 -->
    <div v-else>
        <p v-for="name in items">
            {{ name }}
        </p>
    </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                item: '', // 变量要定义一下
                items: ["狮子头", "韭菜", "鸡腿"]
            }
        },
        methods: {
            addItem() {
                if (this.item == '') { return; }
                this.items.push(this.item); // 数组中加一个值
                this.item = ''; // 清空文本框内容
            }
        },
    })
</script>

效果：在文本框输入内容直接回车，或者按后面的按钮，就可以添加内容

更多可以查看文档：https://cn.vuejs.org/guide/essentials/forms.html

2.7.样式绑定（:class）

主要是Class和Style，平时class用的比较多，Style如果要用可以直接绑定到一个样式对象（比较直观）

代码：:class="{类名:bool}、

1.简单案例

先来个简单案例：首先列出学生列表，然后点到哪个学生，哪个学生名字变红

  • :class="{active:selectedStudent==name}：设置一个类active，当变量selectedStudent和当前name相同的时候生效

  • @click="selectedStudent=name：当li被单击的时候，把name赋值给selectedStudent

<div id="app">
    <div v-if="students.length==0">这个班级还没有学生</div>
    <div v-else>
        <ul>
            <li v-for="name in students" :key="name" :class="{active:selectedStudent==name}"
                @click="selectedStudent=name">
                {{ name }}
            </li>
        </ul>
    </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                student: '', // v-model的变量
                selectedStudent: '',// 初始化
                students: ['张三', '李四', '王二', '赵五', '老六']
            }
        },
    })
</script>

点了老六一下的效果：

2.多个class值

你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。eg：

<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>

如果isActive是true，hasError是false，最后显示出来就是这样的：

<div class="static active"></div>

3.Sytle案例

列出学生列表，然后点到哪个学生，哪个学生背景变黄

background-color这种有-的在js中容易有问题，所以需要'xx'引号包裹，或者写成backgroundColor驼峰命名的样子，然后Vue会帮我们转换

<div id="app">
    <div v-if="students.length==0">这个班级还没有学生</div>
    <div v-else>
        <ul>
            <!-- background-color这种有-的在js中容易有问题，所以需要引号包裹，或者写成backgroundColor驼峰命名的样子，然后Vue会帮我们转换 -->
            <!-- @click="selectedStudent=name：当li被单击的时候，把name赋值给selectedStudent -->
            <li v-for="name in students" :key="name" 
                :style="{'background-color':selectedStudent==name?'yellow':'transparent'}" 
                @click="selectedStudent=name">
                {{ name }}
            </li>
        </ul>
    </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                student: '', // v-model的变量
                selectedStudent: '',// 一定要先初始化
                students: ['张三', '李四', '王二', '赵五', '老六']
            }
        },
    })
</script>

更多参考官方文档：https://cn.vuejs.org/guide/essentials/class-and-style.html

2.8.计算属性（computed）

对于任何复杂逻辑，你都应当使用计算属性

1.表达式实现

先看一个简单案例引入一下：现在有个数组，里面数据有点错乱，需要处理后显示

这个案例没有使用计算属性，是表达式的方法实现的

  • split(',')：以,进行字符串分割，结果返回一个数组
  • reverse()：把分割后的数组翻转下
  • join('-')：把翻转后的数组重新以-连接为一个字符串
<div id="app">
    <ul>
        <li v-for="str in students" :key="str">
            {{ str.split(',').reverse().join('-') }}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ['男,23,张三,1', '男,22,李四,2', '女,30,王二,3']
            }
        },
    });
</script>

效果：

2.计算属性改写★

这种明显就违背了Vue的初衷，表达式明显过于复杂，而且这样效率也低（数据量大的时候还会有性能瓶颈）下面改写一下：

<div id="app">
    <ul>
        <li v-for="str in updateStudents" :key="str">
            {{ str }}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ['男,23,张三,1', '男,22,李四,2', '女,30,王二,3']
            }
        },
        computed: {
            updateStudents() {
                return this.students.map(s => s.split(',').reverse().join('-'));
            }
        },
    });
</script>

在Vue.js中，计算属性的使用方式是像数据属性一样使用，而不是作为函数调用

PS：不能通过{{ newStr(str) }}的方式来调用计算属性

3.计算属性 vs 方法

计算属性在数据不变的情况下，是有缓存的，能够提升效率。上面方法也可以用函数改写，但是更推荐计算属性的方式：

两者逻辑类似，就是少了缓存（计算属性值会基于其响应式依赖被缓存，它仅会在其响应式依赖更新时才重新计算）

<div id="app">
    <ul>
        <li v-for="str in students" :key="str">
            {{ newStr(str) }}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ['男,23,张三,1', '男,22,李四,2', '女,30,王二,3']
            }
        },
        methods: {
            newStr(str) {
                return str.split(',').reverse().join('-');
            }
        },
    });
</script>

更多计算属性可以参考官方文档：https://cn.vuejs.org/guide/essentials/computed.html

2.9.侦听器（watch）

我们用一个案例来看下watch的一些特性：

PS：真实使用的时候{{studentCount}}不会通过这种方式实现，直接写{{students.length}}即可实时更新

1.watch不立刻执行的特性

<div id="app">
    <input v-model="student" type="text" @keyup.enter="addStudent" />
    <p>{{studentCount}}</p>
    <ul>
        <li v-for="(item,index) in students" :key="index">
            {{index+1}}.{{ item }}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                student: '', // v-model初始化
                studentCount: 0, // 初始化
                students: ['张三', '李四', '露西', '王五']
            }
        },
        methods: {
            addStudent() {
                this.students.push(this.student);
                this.student = '';
            }
        },
        watch: {
            // 不加特殊声明，变化之后才会执行
            students(newValue, oldValue) {
                this.studentCount = newValue.length;
            }
        },
    });
</script>

你会发现刚运行的时候并没有统计学生数量

这是因为watch不特殊处理的话只会在数据改变的时候触发回调函数，现在我们新增一个学生看下效果：

数据一改变，立马就更新了

2.让watch立刻执行

如果你想立刻执行，就用watch-option的方式来指定一下immediate:true，代码和上面一样，就watch变下：

watch: {
    students: {
        immediate: true,
            // deep: true, // 一般不启用，影响性能（特殊情况可以使用）
            handler(newValue, oldValue) {
            this.studentCount = newValue.length;
        }
    }
},

这样一打开就自动计算好了：

3.深层侦听器

深度侦听需要遍历被侦听对象中的所有嵌套的属性，当用于大型数据结构时，开销很大。因此请只在必要时才使用它，并且要留意性能。

用watch-option的方式来指定一下deep: true(数据嵌套太深默认的watch是检测不到的，这时候你如果要侦听就开下，要考虑性能)

更多参考官方文档：https://cn.vuejs.org/guide/essentials/watchers.html

★ 计算属性 VS 侦听器 ★

  1. 计算属性场景：多个值的改变影响一个值

    1. 能用computed实现的，全部使用computed，不去使用watch

  2. 侦听器的场景：一个值的改变影响多个值

    1. 侦听器提供了通用方法，适合执行异步操作、较大开销的操作

举一个官方的侦听器案例：

<div id="watch-example">
    <p>
        提出一个问题，回答 yes or no
        <input v-model="question">
    </p>
    <!-- 提示语 -->
    <p>{{ answer }}</p>
</div>
<script src="../assets/vue2.js"></script>
<script src="../assets/axios.1.3.6.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script> -->
<script>
    var watchExampleVM = new Vue({
        el: '#watch-example',
        data: {
            question: '',
            answer: '提出一个问题，以英文的问号结尾'
        },
        watch: {
            // 如果 `question` 发生改变，这个函数就会运行
            question: function (newQuestion, oldQuestion) {
                this.answer = '稍等，我去问下，不要打字了哈~';
                this.getAnswer();
            }
        },
        methods: {
            getAnswer: function () {
                if (this.question.indexOf('?') == -1) {
                    this.answer = '请在最后加一个英文的?';
                    return
                }
                this.answer = '思考ing...'
                console.log(this);
                var vm = this;
                // axios里面的this就不是vm了
                axios.get('https://yesno.wtf/api')
                    .then(function (response) {
                    console.log(response.data)
                    console.log(this);
                    vm.answer = response.data.answer;
                })
                    .catch(function (error) {
                    vm.answer = '没法访问API，错误信息：' + error;
                })
            }
        }
    })
</script>

2.10.生命周期

Vue2和Vue3生命周期的钩子其实是有变化的，但是我们经常使用的没什么变换，这边贴一下Vu3的生命周期

Vue2和Vue3这块是大体一样的：beforeCreate > created > beforeMount > mounted > beforeUpdate > updated（销毁有些变化）

跑个测试案例看下：

<div id="app">
    {{testData}}
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                testData: '初始化数据', // 初始化
            }
        },
        beforeCreate() { console.log('beforeCreate'); },
        // 【常用】组件实例已创建，尚未挂载，dom不存在
        created() { console.log('created ' + this.$el); },
        beforeMount() { console.log('beforeMount'); },
        // 【常用】挂载结束，dom已经存在
        mounted() {
            console.log('mounted ' + this.$el);
            setTimeout(() => {
                this.testData = '我被修改了';
            }, 2000);
        },
        beforeUpdate() { console.log('beforeUpdate'); },
        updated() { console.log('updated'); }
    });
</script>

执行效果：created的时候没有dom，mounted的时候已经有dom了

如果不进行数据更新，下面两个方法是不会执行的：这个模拟了一个2s延迟的更新，于是就触发了

应用场景

  • beforecreate // 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
  • created // 组件初始化完毕，各种数据可以使用，常用于异步数据获取
  • beforeMounted // 未执行染、更新，dom未创建
  • mounted // 初始化（挂载）结束，dom已创建，可用于获取访问数据和dom元素
  • beforeupdate // 更新前，可用于获取更新前各种状态
  • updated // 更新后，所有状态已是最新
  • BeforeUnmount // 销毁前，可用于一些定时器或订阅的取消（组件还在）
  • Unmounted // 组件已销毁，作用同上（组件不在了）

更多参考官方文档：https://cn.vuejs.org/guide/essentials/lifecycle.html

生命周期钩子：https://cn.vuejs.org/api/composition-api-lifecycle.html

2.11.组件基础

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：

全局注册组件：Vue.component(name, options)

Vue.component('my-component-name', {
// ... options ...
})

1.子组件中的局部变量案例

我们先写个普通的功能：点击按钮数字+1

<div id="app">
    <div>
        {{count}}
        <button @click="count++">点我+1</button>
    </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                count: 0
            }
        },
    })
</script>

效果：单击一下数字就会+1

下面把这个案例改写成组件的方式（count这个变量主要是在组件中使用，那就可以单独封装在组件里面）

<div id="app">
    <my-button></my-button>
</div>
<script src="../assets/vue2.js"></script>
<script>
    // 组件的名称最好是这种中划线的方式Vue（开头大写）
    Vue.component('my-button', {
        data() {
            return {
                count: 0 // 这个变量和该组件强关联，定义在组件里面比较合适
            }
        },
        // template里面的模板最外面用个单独的div比较好
        template: `
<div>
{{count}}
<button @click="count++">点我+1</button>
    </div>
`
    }
                 );
    // 组件定义后再实例化，如果在前面实例化，页面会不正常
    const app = new Vue({ el: '#app' });
</script>

几个注意事项：

  1. 组件的名称最好是中划线的方式
    1. Vue.component（V开头大写，c开头小写）
  2. template里面的模板字符串，最外层要加个父标签/根标签，比如用个单独的div

效果：单击一下数字就会+1

如果你页面放好几个组件，也是可以的，而且相互不干扰：

<div id="app">
    <my-button></my-button>
    <my-button></my-button>
    <my-button></my-button>
</div>

任意点击后效果：

2.父组件传递数据给子组件

一个展示学生列表的案例，这个是改成组件之前的代码：

<div id="app">
    <li v-for="name in students" :key="name">
        {{ name }}
    </li>
</div>
<script src="../assets/vue2.js"></script>
<script>
    // 组件定义后再实例化，如果在前面实例化，页面会不正常
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ["张三", "李四", "王二"]
            }
        }
    });
</script>

输出：

改成组件的方式（把students的数据传递到组件里面）

<div id="app">
    <!-- 两个变量名不一定要完全一样，这边只是方便理解 -->
    <my-list :students="students"></my-list>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('my-list', {
        props: { // 对传过来的students进行约束和默认值设置（也可以直接props:['students']）
            students: {
                type: Array, // 设置students的数据类型是数组
                default: [] // 默认值是空列表
            },
        },
        template:
        `<ul>
            <li v-for="name in students" :key="name">
            {{ name }}
            </li>
    	</ul>`
    })
    // 组件定义后再实例化，如果在前面实例化，页面会不正常
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ["张三", "李四", "王二"]
            }
        },
    })
</script>

输出效果和上面一样：

3.子组件传递数据给父组件

比如现在要输入一个学生名称（子组件中的变量）然后数据（students）是在父组件中的，那就需要把每次新增的student传递给父组件

案例改组件前的实现：两块内容，一个是文本框用来新增学生名、另一个是列表来列举学生

<div id="app">
    <input v-model="student" type="text" @keyup.enter="addStudent" />
    <ul>
        <li v-for="name in students" :key="name">
            {{ name }}
        </li>
    </ul>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                student: '',
                students: ['张三', '李四', '王二']
            }
        },
        methods: {
            addStudent() {
                this.students.push(this.student);
                this.student = '';
            }
        },
    });
</script>

改成组件的方式：

$emit：触发当前实例上的事件（附加参数都会传给监听器回调）【记不得可以想提交是submit，事件提交就是emit】

list部分和上面一样，重点说下input的事件监听：如果不传参可以不自定义事件，传参就可以这样写：

<!-- `add-student`是自定义事件，当触发就会调用父容器中的`addStudent`方法 -->
<enter-input @add-student="addStudent"></enter-input>

自定义组件：

Vue.component('enter-input', {
    data() {
        return {
            student: ''
        }
    },
    methods: {
        addStudent() {
            // 注意：事件名称定义时不要有大写字母出现
            // add-student是自定义事件，this.student是传给父容器addStudent的值
            this.$emit('add-student', this.student);
            this.student = ''; // 清空当前姓名
        }
    },
    template:
        `<input v-model="student" type="text" @keyup.enter="addStudent" />`
})

完整代码：

<div id="app">
    <!-- 监听组件事件 -->
    <enter-input @add-student="addStudent"></enter-input>
    <my-list :students="students"></my-list>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('enter-input', {
        data() {
            return {
                student: ''
            }
        },
        methods: {
            addStudent() {
                // 注意：事件名称定义时不要有大写字母出现
                // add-student是自定义事件，this.student是传给addStudent的值
                this.$emit('add-student', this.student);
                this.student = ''; // 清空当前姓名
            }
        },
        template:
        `<input v-model="student" type="text" @keyup.enter="addStudent" />`
    })
    Vue.component('my-list', {
        props: {
            students: {
                type: Array,
                default: []
            },
        },
        template:
        `<ul>
<li v-for="name in students" :key="name">
{{ name }}
    </li>
    </ul>`
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                students: ['张三', '李四', '王二']
            }
        },
        methods: {
            addStudent(student) {
                this.students.push(student);
            }
        },
    });
</script>

4.自定义组件使用v-model

先回顾下vue的v-model怎么使用的：

<div id="app">
    <div><input v-model="name" type="text" /></div>
    <div>{{name}}</div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                name: '小明'
            }
        },
    })
</script>

当改变文本框内容时，文本内容立刻改变：

双向绑定的这个v-model其实只是一个语法糖，背后相当于这样的：

PS：为什么event要加个$ ==> 你不加他到底是字符串，还是vdata中的变量呢？vue就不知道了

<input type="text" value="name" @input="name=$event.target.value">

如果我们自定义的组件，在绑定v-model的时候是不会双向绑定的，需要自己处理下（value和input）

  1. 自定义组件可以直接写v-model="name"

  2. 在自定义组件时设置下props: ['name']

  3. 方法里面添加一个变量修改的返回方法：this.$emit('input', e.target.value);

  4. template里面代码：<input :value="name" @input="onInput" type="text" />

完整代码示意：

<div id="app">
    <my-input v-model="name"></my-input>
    <div>{{name}}</div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('my-input',
    {
        props: ['name'],
        methods: {
            onInput(e) {
                this.$emit('input', e.target.value);
            }
        },
        template:
        `<div>
			<input :value="name" @input="onInput" type="text" />
    	 </div>`
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                name: '小明'
            }
        },
    })
</script>

当改变文本框内容时，文本内容立刻改变：

5.插槽分发内容（含多个）

对于插槽分发，vue提供了 <slot> 元素来给组件便捷的传递内容

这个类比弹框提示，弹框这个组件是子组件封装好的，内容是由父组件传过来的（父组件内容显示在子组件中）

5.1.封装前的弹框

先写一个弹框显示和关闭的案例：

.message-box {
    width: 300px;
    padding: 10px 20px;
    color: white;
    background: rgb(2, 214, 133);
}
.message-box-close {
    float: right;
    color: white;
}

代码部分：

<div id="app">
    <div class="message-box" v-show="isShow">
        {{msg}}
        <span class="message-box-close" @click="isShow=false">X</span>
    </div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true, // 是否显示弹框
                msg: '操作成功！' // 弹框提示内容
            }
        },
    })
</script>

打开后弹框默认是显示的，点击X后就关闭：

5.2.子组件版弹框

下面我们进行改写下：

PS：不能直接在子组件里面这样写：<span class="message-box-close" @click="show=false">X</span>这样容易导致父子组件show变量不一致，控制台也会警告提示：只要父组件重新渲染，该值就会被覆盖，所以还是要让父组件修改

子组件中的$emit('close',false)是触发自定义事件close，并把false传递给事件调用的函数。之前我们是一个单独的函数然后用参数接收的，这边父组件可以通过$event来接收传递的值

<div id="app">
    <message-box :show="isShow" @close="isShow=$event">{{msg}}</message-box>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('message-box', {
        props: ['show'],
        template: `
    <div class="message-box" v-show="show">
        <!-- 相当于占位符 -->
        <slot></slot>
        <span class="message-box-close" @click="$emit('close',false)">X</span>
    </div>`
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true, // 是否显示弹框
                msg: '操作成功！' // 弹框提示内容
            }
        },
    })
</script>

结果和上面一样，默认是显示的，点击X后就关闭：

5.3.精简具名插槽

Vue提供了一种简化的方式:xxx.sync来实现（相当于帮你写了自定义事件，事件的名称是固定的 @update:xxx）

子组件只需要微调：<message-box :show.sync="isShow">{{msg}}</message-box>

Template也微调下：@click="$emit('update:show',false)"

完整代码如下：

<div id="app">
    <message-box :show.sync="isShow">{{msg}}</message-box>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('message-box', {
        props: ['show'],
        template: `
<div class="message-box" v-show="show">
<!-- 相当于占位符 -->
<slot></slot>
<span class="message-box-close" @click="$emit('update:show',false)">X</span>
    </div>`
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true, // 是否显示弹框
                msg: '操作成功！' // 弹框提示内容
            }
        },
    })
</script>
5.4.多位插槽案例

如果一个组件中需要占位多个坑位，可以在一个 <template> 元素上使用 v-slot 指令

PS：一个不带 name 的 <slot> 默认的名字是default

还是上面的例子，如果我们现在除了提示语外，还要有个提示的标题，封装前写法如下：

<div id="app">
    <div class="message-box" v-show="isShow">
        {{msgTitle}}
        <strong>{{msgContent}}</strong>
        <span class="message-box-close" @click="isShow=false">X</span>
    </div>
</div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true,
                msgTitle: '温馨提示：',
                msgContent: '操作成功'
            }
        },
    })
</script>

样式微调如下：

.message-box {
    width: 300px;
    padding: 10px 20px;
    color: white;
    background: rgb(2, 214, 133);
}
.message-box-close {
    float: right;
    color: white;
}

打开页面进行提示，单击x则被关闭

封装成子组件则和上面有些不同，子组件里面要这样写：template v-slot:名字

PS：要为具名插槽传入内容，我们需要使用一个含 v-slot 指令的 <template> 元素，并将目标插槽的名字传给该指令

<message-box :show.sync="isShow">
    <template v-slot:title>{{msgTitle}}</template>
    <template v-slot:content>{{msgContent}}</template>
</message-box>

也可以简写：v-slot 有对应的简写 #，因此 <template v-slot:title>可以简写为 <template #title>

<message-box :show.sync="isShow">
    <template #title>{{msgTitle}}</template>
    <template #content>{{msgContent}}</template>
</message-box>

然后Template里面是这样的：

<div class="message-box" v-show="show">
    <slot name="title"></slot>
    <strong>
        <slot name="content"></slot>
    </strong>
    <span class="message-box-close" @click="$emit('update:show',false)">X</span>
</div>

代码如下：

<div id="app">
    <message-box :show.sync="isShow">
        <template v-slot:title>{{msgTitle}}</template>
        <template v-slot:content>{{msgContent}}</template>
    </message-box>
</div>
</div>
<script src="../assets/vue2.js"></script>
<script>
    Vue.component('message-box', {
        props: ['show'],
        template:
        `<div class="message-box" v-show="show">
<slot name="title"></slot>
<strong>
<slot name="content"></slot>
    </strong>
<span class="message-box-close" @click="$emit('update:show',false)">X</span>
    </div>`
    })
    const app = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true,
                msgTitle: '温馨提示：',
                msgContent: '操作成功'
            }
        },
    })
</script>

6.组件知识概述

Q：谈一下你对Vue组件化的理解？

A：组件化是Vue的精髓，Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多，可以从以下几点进行阐述：

  1. 组件定义：组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue

  2. 组件优点：组件化可以增加代码的复用性、可维护性和可测试性

  3. 使用场景：

    1. 通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等
    2. 业务组件：它们完成具体业务，具有一定的复用性，例如登录组件、轮播图组件
    3. 页面组件：组织应用各部分独立内容，需要时在不同页面组件间切换，例如列表页、详情页组件

  4. 组件应用：

    1. 定义：Vue.component()，components选项，sfc
    2. 分类：有状态组件，functional，abstract
    3. 通信：props，$emit()/$on()，provide/inject
      1. 不考虑耦合性可以使用：$children/$parent/$root/$attrs/$listeners
    4. 内容分发：<slot>，<template>，v-slot
    5. 使用及优化：is，keep-alive，异步组件

  5. 组件本质：组件的本质是产生虚拟DOM

    1. Vue中的组件经历如下过程：组件配置 => VueComponent实例 => render()转换为方法 => Virtual DOM=> DOM

3.一个vue3的案例

如果还是这种混合开发的风格，Vu3和Vue2差不多，就是引用的JS变成了Vue3的，然后创建语句变成了下面这个：

const app = Vue.createApp({}) // 创建app

app.mount('#app') // 挂载

来个案例：通过两个按钮来控制count数值的加和减

<div id="app">
    <h3>计数：{{count}}</h3>
    <button @click="addCount">++</button>&nbsp;
    <button @click="subCount">--</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- <script src="../assets/vue3.js"></script> -->
<script>
    const app = Vue.createApp({ // 创建app对象
        data() {
            return {
                count: 0
            }
        },
        methods: {
            addCount() {
                this.count++;
            },
            subCount() {
                this.count--;
            }
        },
    })
    app.mount('#app') // 挂载
</script>

Vue基础部分先到这，后面就不是这种传统的混合开发了，以上内容只是为了之前混合开发的朋友做过渡所写，Vue3内容请看下篇（完）

出处：https://www.cnblogs.com/dotnetcrazy
打赏：18i4JpL6g54yAPAefdtgqwRrZ43YJwAV5z
本文版权归作者和博客园共有。欢迎转载，但必须保留此段声明，且在文章页面明显位置给出原文连接！