Vue - 3（ 15000 字 Vue 入门级教程）

一：初识 Vue

1.1 收集表单数据

收集表单数据在Vue.js中是一个常见且重要的任务，它使得前端交互变得更加灵活和直观。

Vue中，我们通常使用v-model指令来实现表单元素与数据之间的双向绑定，从而实现数据的收集和更新。下面总结了如何收集各类表单数据以及一些常用的v-model修饰符。

1.1.1 收集输入框数据

对于普通的文本输入框，可以通过以下方式收集数据：

<input type="text" v-model="formData.username">

这里的v-model="formData.username"将输入框中的文本与Vue实例中的formData.username属性进行双向绑定。用户输入的内容（value值）会实时更新到formData.username中。

1.1.2 收集单选框数据

单选框需要给不同的选项设置相同的v-model，但是每个选项需要有不同的value值，以便区分用户选择了哪个选项。

<input type="radio" id="male" value="male" v-model="formData.gender">
<label for="male">Male</label><input type="radio" id="female" value="female" v-model="formData.gender">
<label for="female">Female</label>

这样做可以将用户选择的单选框的value值更新到formData.gender属性中。

1.1.3 收集复选框数据

对于单个复选框，可以直接使用v-model来收集其checked状态（布尔值）：

<input type="checkbox" id="agree" v-model="formData.agree">
<label for="agree">Agree to terms</label>

而对于多个复选框，可以将它们绑定到一个数组中，使用v-model来收集其value值：

<input type="checkbox" id="apple" value="apple" v-model="formData.fruits">
<label for="apple">Apple</label><input type="checkbox" id="banana" value="banana" v-model="formData.fruits">
<label for="banana">Banana</label>

这样formData.fruits将会是一个包含用户选择的水果的数组

1.1.4 收集下拉框数据

下拉框的收集也非常简单，使用v-model指令即可：

<select v-model="formData.city"><option value="">Please select a city</option><option value="beijing">Beijing</option><option value="shanghai">Shanghai</option><option value="shenzhen">Shenzhen</option><option value="wuhan">Wuhan</option>
</select>

这里的v-model="formData.city"将选中的城市值更新到formData.city属性中。

1.1.5 收集文本域数据

对于文本域，也可以直接使用v-model指令进行双向绑定：

<textarea v-model="formData.message"></textarea>

用户在文本域中输入的内容会即时更新到formData.message中。

1.1.6 v-model修饰符

v-model指令支持一些有用的修饰符，可以在数据绑定时进行转换或格式化：

  • .lazy：将数据同步延迟到change事件触发时而不是input事件。
  • .number：自动将用户的输入值转为数值类型。
  • .trim：自动过滤用户输入的首尾空格。

例如：

<input type="text" v-model.lazy="formData.username">
<input type="number" v-model.number="formData.age">
<input type="text" v-model.trim="formData.email">

这些修饰符可以根据需要对表单数据进行处理，使数据的收集更加灵活和高效。

1.2 过滤器

在Vue.js中，过滤器是一种非常便捷的数据处理方式，它允许我们对要显示的数据进行特定格式化后再进行展示，通常用于一些简单逻辑的处理。本文将介绍Vue.js中过滤器的定义、语法以及实际运用场景。

过滤器的定义

过滤器允许我们在模板中对要显示的数据进行特定的格式化处理，其定义如下：

  • 全局过滤器： 使用Vue.filter(name, callback)来注册全局过滤器。（可以在任何 Vue 组件的模板中使用）
  • 局部过滤器： 在Vue实例的filters选项中注册过滤器。

过滤器的语法

  1. 使用过滤器可以通过管道符|将数据传递给过滤器，语法如下：
{{ data | 过滤器名 }}

过滤器函数处理完数据后，会返回处理后的结果。这个结果将会替换模板中原始的数据，从而在视图中显示出经过过滤器处理后的数据。

  1. 或者在绑定属性时使用过滤器：
v-bind:属性="data | 过滤器名"

过滤器的特点

  1. 参数传递： 过滤器可以接收额外的参数，用于定制化处理。
  2. 过滤器串联： 多个过滤器可以串联使用，将数据依次传递给每个过滤器。
  3. 数据不变性： 过滤器并不改变原始数据，而是产生新的格式化后的数据。

1.2.1 全局过滤器：

  1. 注册全局过滤器： 使用 Vue.filter(name, callback) 方法来注册全局过滤器。
// 注册全局过滤器
Vue.filter('capitalize', function(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);
});
  1. 在模板中使用过滤器： 在模板中通过 | 符号将过滤器应用到要处理的数据上。
<!-- 在模板中使用过滤器 -->
<div>{{ message | capitalize }}</div>

完整代码示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue Filters</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!-- 使用全局过滤器 --><p>Original message: {{ message }}</p><p>Capitalized message: {{ message | capitalize }}</p></div><script>// 注册全局过滤器Vue.filter('capitalize', function(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value(1);});new Vue({el: '#app',data() {return {message: 'hello world'};}});</script>
</body></html>

1.2.2 局部过滤器：

局部过滤器只能在当前 Vue 实例内部的模板中使用，它们需要在 Vue 实例的 filters 选项中注册。

  1. 在 Vue 实例中注册过滤器： 在 Vue 实例的 filters 选项中注册过滤器。
new Vue({el: '#app',data() {return {message: 'hello world'};},filters: {capitalize(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);}}
});
  1. 在模板中使用过滤器： 在模板中直接调用已注册的过滤器。
<div>{{ message | capitalize }}</div>

完整代码示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue Filters</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><!-- 使用局部过滤器 --><p>Original message: {{ message }}</p><p>Capitalized message: {{ message | capitalize }}</p></div><script>new Vue({el: '#app',data() {return {message: 'hello world'};},filters: {capitalize(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);}}});</script>
</body></html>

过滤器的应用场景：

  • 时间格式化： 将时间戳转换为特定的日期时间格式。
  • 字符串截取： 对长字符串进行截取或裁剪。
  • 数据处理： 对数据进行简单的处理或计算，如小数位截取、数据格式转换等。

1.3 内置指令

Vue.js作为一款流行的前端框架，提供了许多指令来简化开发过程，其中包括v-text、v-html、v-cloak、v-once和v-pre等。这些指令在Vue应用中的使用非常频繁，接着我将详细介绍它们的用法以及示例代码。

1.3.1 v-text

v-text指令用于更新元素的文本内容，它会替换元素的textContent属性。与双花括号插值语法{{ }}相比，v-text指令具有更好的性能，因为它不会受到XSS攻击的影响。

用法：

<span v-text="message"></span>

示例：

new Vue({el: '#app',data: {message: 'Hello, Vue.js!'}
})

在这里插入图片描述

1.3.2 v-html

v-html指令用于更新元素的innerHTML，它会将数据作为HTML插入到元素中。需要注意的是，由于安全性问题，不推荐动态更新包含HTML的内容。

用法：

<div v-html="rawHtml"></div>

示例：

new Vue({el: '#app',data: {rawHtml: '<span style="color: red;">Hello, Vue.js!</span>'}
})

在这里插入图片描述

1.3.3 v-cloak

v-cloak指令用于解决Vue渲染延迟导致的闪烁问题。在Vue实例挂载到目标元素之前，v-cloak指令会保持元素及其子元素隐藏。

v-cloak本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性，使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

用法：

<div v-cloak>{{ message }}
</div>

1.3.4 v-once

v-once指令用于将元素和组件标记为只渲染一次，即使后续数据发生变化，也不会重新渲染。这在静态内容的展示上非常有用。

用法：

<span v-once>{{ staticMessage }}</span>

示例：

new Vue({el: '#app',data: {staticMessage: 'This message will only be rendered once.'}
})

1.3.5 v-pre

v-pre指令用于跳过元素和子元素的编译过程，将其原始内容作为纯文本显示。这对于展示包含Vue模板语法的代码片段非常有用，防止Vue解析其内容。

用法：

<pre v-pre>{{ rawHtml }}</pre>

示例：

new Vue({el: '#app',data: {rawHtml: '<span>{{ message }}</span>'}
})

1.4 自定义指令

在 Vue.js 中，除了内置的指令外，我们还可以定义自己的指令，以实现一些定制化的功能，自定义指令是一种可复用的代码片段，用于对 DOM 进行操作。它允许我们通过将特定的行为绑定到 DOM 元素上来扩展 Vue.js 的功能。

1.4.1 局部指令

在 Vue 实例中的 directives 选项中定义指令。每个指令都是一个带有特定钩子函数的对象。

new Vue({directives: {// 自定义指令名称：配置对象'custom-directive': {// 指令与元素成功绑定时调用bind(el,, vnode) {// 指令的初始化逻辑},// 元素插入 DOM 时调用inserted(el, binding, vnode) {// 元素被插入页面后的逻辑},// 元素所在模板结构被重新解析时调用update(el, binding, vnode, oldVnode) {// 模板结构更新时的逻辑}}}
})

1.4.2 全局指令

在全局范围内定义指令，使用 Vue.directive 方法。

Vue.directive('custom-directive', {bind(el, binding, vnode) {// 指令的初始化逻辑},inserted(el, binding, vnode) {// 元素被插入页面后的逻辑},update(el, binding, vnode, oldVnode) {// 模板结构更新时的逻辑}
})

1.5 生命周期

Vue.js 的生命周期是指 Vue 实例从创建、挂载到更新、销毁等一系列过程中，系统自动调用的一些特殊函数。这些函数允许你在特定的阶段执行自定义的逻辑，以便更好地管理应用程序的状态和行为。

常用的生命周期钩子函数

beforeCreate

在 Vue 实例初始化之后、数据观测 (data observation) 和 event/watcher 事件配置之前被调用。在这个阶段，Vue 实例的属性和方法都未被初始化。

created

在 Vue 实例创建完成后立即调用。在这一阶段，Vue 实例已经完成了数据观测 (data observation)，属性和方法的初始化，但是尚未挂载到页面上。

beforeMount

在 Vue 实例挂载到目标元素之前调用。在这一阶段，Vue 实例已经完成了模板的编译，但是尚未将模板渲染成真实的 DOM 元素。

mounted

在 Vue 实例挂载到目标元素之后调用。在这一阶段，Vue 实例已经完成了模板的编译和挂载，已经将模板渲染成了真实的 DOM 元素，并且可以对 DOM 进行操作。

beforeUpdate

在数据更新之前、DOM 重新渲染之前被调用。在这一阶段，Vue 实例已经感知到了数据的变化，但是尚未开始重新渲染 DOM。

updated

在数据更新之后、DOM 重新渲染之后被调用。在这一阶段，Vue 实例已经完成了数据的更新，并且 DOM 已经重新渲染完成。

beforeDestroy

在 Vue 实例销毁之前调用。在这一阶段，Vue 实例尚未被销毁，但是可以执行一些清理工作，如清除定时器、解绑事件等。

destroyed

在 Vue 实例销毁之后调用。在这一阶段，Vue 实例已经被销毁，所有的事件监听器和绑定的数据都已经被清除，可以进行一些收尾工作。

在这里插入图片描述

1.6 非单文件组件

非单文件组件则是将模板、脚本和样式分别写在不同的文件中，然后通过不同的方式引入到项目中。

比如将模板写在 HTML 文件中，脚本写在 JavaScript 文件中，样式写在 CSS 文件中。在非单文件组件的情况下，需要手动将它们组合在一起，通常需要一些构建工具或者预处理器来完成这些任务。

在 Vue.js 中，我们可以使用 Vue.extend() 方法来定义非单文件组件。在组件的定义中，我们需要指定件的模板、数据、方法等内容。

下面是一个示例，演示了如何使用 `Vue.extend 来定义一个非单文件组件：

// 创建一个名为 school 的组件
const school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{ schoolName }}</h2><h2>学校地址：{{ address }}</h2><button @clickshowName">点我提示学校名</button></div>`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。data() {return {schoolName: '尚硅谷',address: '北京昌平'};},methods: {showName() {alert(this.schoolName);}}
});

1.6.1 注册非单文件组件

注册非单文件组件有两种方式：局部注册和全局注册。

1.6.1.1 局部注册

局部注册是指在某个 Vue 实例中注册组件，使该实例可以使用该组件。这通过在 Vue 实例的 components 选项中注册组件来实现。

new Vue({el: '#root',// 局部注册组件components: {school,// 另一个组件的定义...}
});
1.6.1.2 全局注册

全局注册是指在全局范围内注册组件，使任何 Vue 实例都可以使用该组件。这通过调用 Vue.component() 方法来实现。

// 全局注册组件
Vue.component('school', school);

1.6.2 使用非单文件组件

使用非单文件组件就像使用内置组件一样简单，只需在模板中编写组件标签即可。

<!-- 在模板中使用组件 -->
<div id="root"><school></school>
</div>

1.6.3 完整示例代码

以下是一个完整的示例代码，演示了如何定义、注册和使用非单文件组件：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>非单文件组件示例</title><script type="text/javascript" src="vue.js"></script>
</head>
<body><div id="root"><school></school></div><script type="text/javascript">Vue.config.productionTip = false;// 创建 school 组件const school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{ schoolName }}</h2><h2>学校地址：{{ address }}</h2><button @click="showName">点我提示学校名</button></div>`,data() {return {schoolName: '尚硅谷',address: '北京昌平'};},methods: {showName() {alert(this.schoolName);}}});// 注册 school 组件Vue.component('school', school);new Vue({el: '#root'});</script>
</body>
</html>

1.6.4 几个注意的点

1. 关于组件命名

在Vue.js中，组件命名有一些规范和注意事项，这些规范和注意事项可以帮助我们更好地组织和管理组件。

  • 单词组成的组件名：

    • 第一种写法（首字母小写）：school
    • 第二种写法（首字母大写）：School

  • 多个单词组的组件名：

    • 第一种写法（kebab-case命名）：my-school
    • 第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

注意：

  1. 组件名尽可能避免使用HTML中已有的元素名称，例如：h2、H2都不推荐使用。
  2. 可以使用name配置项指定组件在开发者工具中的显示名字。

2. 关于组件标签

在HTML中使用Vue.js创建的组件需要注意组件标签的书写方式，以确保组件能够正确渲染。

  • 第一种写法：<school></school>
  • 第二种写法：<school/>

备注：

  • 不使用脚手架时，推荐使用<school></school>这种完整的标签形式，避免使用<school/>会导致后续组件无法渲染。

3. 简写方式

Vue.js还提供了一种简写方式来定义组件：

const school = Vue.extend(options);
// 可简写为
const school = options;

这种简写方式可以更加简洁地定义组件，提高开发效率。

1.6.5 组件嵌套

Vue中的组件嵌套是一种将页面分解为可重用、独立的组件的方法，使得代码更易于维护和管理。

组件可以包含其他组件，形成层级结构，这种嵌套结构可以让你构建复杂的用户界面。

  1. 创建子组件：

首先，你需要创建子组件。子组件可以是单文件组件或者普通的 Vue 组件，它包含了自己的模板、脚本和样式。

例如，我们创建一个简单的子组件 ChildComponent：

<!-- ChildComponent.vue -->
<template><div><h2>This is the Child Component</h2></>
</template><script>
export default {name: 'ChildComponent'
};
</script><style   /* 样式 */
</style>
  1. 在父组件中引入并使用子组件：

在父组件的模板中引入子组件，并在组件配置中注册子组件，接着通过在父组件的模板中使用子组件标签来引入子组件。Vue 在编译模板时会将子组件替换为实际的子组件内容。

<!-- ParentComponent.vue -->
<template><div><h1>This is the Parent Component</h1><child-component></child-component> <!-- 使用子组件 --></div>
</template><script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件export default {name: 'ParentComponent',components: {ChildComponent // 注册子组件}
};
</script><style>
/* 样式 */
</style>

这样，就完成了在 Vue 中定义嵌套的组件的全流程。父组件引入子组件后，可以像普通 HTML 元素一样使用子组件，子组件会被渲染在父组件的相应位置上。通过这种方式，可以实现复杂的页面结构和功能，使代码更加模块化和可维护。

1.6.6 VueComponent

VueComponent本质上是通过调用Vue.extend方法生成的。

这意味着每次调用Vue.extend都会返回一个全新的VueComponent实例。VueComponent的生成不由程序员手动创建，而是由Vue.js框架在解析组件时隐式创建。

组件的使用

一旦定义了组件，我们可以在模板中直接使用组件的标签形式，例如 <school/> 或 <school></school>。当Vue.js解析模板时，会自动帮助我们创建组件的实例对象，实质上是通过执行 new VueComponent(options) 来完成的。

注意事项

特别需要注意的是，每次调用Vue.extend方法都会生成一个新的VueComponent实例。这意味着不同的组件实例是相互独立的，它们之间不会共享状态。

关于this指向

  1. 在组件的配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this指向组件的实例对象（VueComponent）。
  2. .而在new Vue(options)配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是Vue实例对象（vm）。

简称约定

为了便于阅读和理解，本文将VueComponent的实例对象简称为vc（组件实例对象），将Vue的实例对象简称为vm。

1.6.7 prototype和__proto__

在 JavaScript 中，prototype 和 __proto__ 是两个与对象原型相关的重要概念，它们有着不同的作用和用法。

1. prototype

  • 作用：

    • 每个函数（包括构造函数）都有一个 prototype 属性，这个属性指向一个对象。这个对象被称为该函数的原型对象。
    • 在使用构造函数创建对象时，新创建的对象会继承构造函数的 prototype 上定义的属性和方法。

  • 用法示例：

    function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log(`Hello, my name is ${this.name}`);
};const john = new Person('John');
john.sayHello(); // 输出: Hello, my name is John

2. __proto__

  • 作用：

    • __proto__ 是实例对象上的一个属性，它指向该对象的原型（即创建该实例对象的构造函数的 prototype）。
    • 通过 __proto__ 可以访问到对象原型上的属性和方法，实现了原型链的查找。

  • 用法示例：

    function Animal(type) {this.type = type;
}Animal.prototype.sound = function() {console.log('Making sound...');
};const dog = new Animal('dog');
console.log(dog.__proto__ === Animal.prototype); // 输出: true
dog.sound(); // 输出: Making sound...

区别和联系

  1. 作用对象：

    • prototype 属性是函数特有的，用于定义构造函数的原型对象。
    • __proto__ 属性是实例对象特有的，用于指向该实例对象的原型。

  2. 作范围：

    • prototype 定义了构造函数的原型，影响通过该构造函数创建的所有实例对象。
    • __proto__ 是实例对象上的属性，只影响该实例对象自身的原型链查找。

  3. 使用方式：

    • 在构造函数中使用 prototype 定义原型对象的属性和方法。
    • 在实例对象上可以直接访问 __proto__ 属性，但一般不推荐直接操作 __proto__，

  4. 联系：

    • prototype 定义了构造函数的原型，通过 new 关键字创建的实例对象会继承这个原型。
    • __proto__ 指向实例对象的原型，实现了原型链的查找机制。

在实际开发中，更推荐使用 prototype 来定义原型，而不是直接操作 __proto__。

1.6.8 一个重要的内置关系

VueComponent.prototype.proto === Vue.prototype

在这里插入图片描述
VueComponent是 Vue 中用于创建组件的基类，而 Vue 则是 Vue 应用的根实例。在 Vue 的源码中，通过 Vue.extend 方法创建组件时，实际上是创建了一个继承自 Vue 的子类，这个子类就是 VueComponent。所以 VueComponent.prototype.__proto__ === Vue.prototype 这个关系是成立的。

这种设计的意义在于，通过让 VueComponent.prototype 的原型指向 Vue.prototype，使得在组件中可以访问到 Vue 实例的属性和方法，同时也可以保证组件实例能够继承 Vue 实例的特性，比如响应式数据、生命周期钩子等。这样设计可以让组件开发更加灵活，同时也符合面向对象的思想，使得组件和根实例之有一种更加紧密的关联。

1.7 单文件组件

在 Vue 中，单文件组件（Single File Component，SFC）是一种组织 Vue 应用程序的方式，它将组件的模板、样式和逻辑都封装在一个单独的文件中，通常以 .vue 扩展名结尾。一个典型的单文件组件包含三个部分：模板、脚本和样式，它们分别用 <template>、<script> 和 <style> 标签包裹。

1. App.vue文件：

<template><div><School></School><Student></Student></div>
</template><script>//引入组件import School from './School.vue'import Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script>

App.vue 是一个单文件组件，它扮演着项目中的根组件的角色。在 Vue.js 应用中，通常会有一个根组件来管理其他组件的加载和交互。这个文件的作用是定义根组件的结构和行为。

  • 模板（Template）： 这里定义了 App 组件的模板，包含了两个子组件 <School></School> 和 <Student></Student> 的引入。

  • 脚本（Script）： 这部分是 App 组件的 JavaScript 逻辑。它通过 import 引入了 School.vue 和 Student.vue 两个子组件，并在 components 中注册了这两个子组件，使得它们可以在 App 中被使用。

2. index.html 文件：

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>练习一下单文件组件的语法</title></head><body><!-- 准备一个容器 --><div id="root"></div><!-- <script type="text/javascript" src="../js/vue.js"></script> --><!-- <script type="text/javascript" src="./main.js"></script> --></body>
</html>

index.html 文件是整个应用的入口文件，它包含了应用的基本结构和引入的 JavaScript 文件。在这个文件中，我们可以看到一个空的容器 <div id="root"></div>，这个容器会被 Vue.js 的实例所挂载，作为整个应用的根节点。

3. main.js 文件：

import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App},
})

main.js 是 Vue.js 应用的主入口文件，它创建了 Vue.js 的根实例，并且将根组件 App 挂载到了 HTML 中的 <div id="root"></div> 容器上。

  • 创建 Vue 实例： 使用 new Vue() 创建了 Vue 实例。

  • 挂载根组件： 通过 el 选项指定了挂载的目标元素，这里指定为 #root，即 index.html 中的容器元素。template 选项指定了根组件的模板为 <App></App>，也可以直接使用 render 方法。

  • 注册根组件： 通过 components 选项注册了根组件 App。

4. School.vue 文件：

<template><div class="demo"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>
</template><script>export default {name:'School',data(){return {name:'尚硅谷',address:'北京昌平'}},methods: {showName(){alert(this.name)}},}
</script><style>.demo{background-color: orange;}
</style>

School.vue 是一个单文件组件，用于显示学校相关的信息。

  • 模板（Template）： 定义了学校组件的结构，包含了学校名称、地址和一个按钮。

  • 脚本（Script）： 包含了学校组件的逻辑，定义了组件的名称为 School，以及 data 数据和 methods 方法。在 data 中定义了学校的名称和地址，在 methods 中定义了一个 showName 方法，点击按钮时弹出学校的名称。

  • 样式（Style）： 包含了学校组件的样式，设置了背景颜色为橙色。

5. Student.vue 文件：

<template><div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>
</template><script>export default {name:'Student',data(){return {name:'张三',age:18}}}
</script>

Student.vue 同样是一个单文件组件，用于显示学生相关的信息。

  • 模板（Template）： 定义了学生组件的结构，包含了学生的姓名和年龄。

  • 脚本（Script）： 包含了学生组件的逻辑，定义了组件的名称为 Student，以及 data 数据。在 data 中定义了学生的姓名和年龄。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/796900.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java Spring IoCDI :探索Java Spring中控制反转和依赖注入的威力,增强灵活性和可维护性

Java Spring IoCDI :探索Java Spring中控制反转和依赖注入的威力,增强灵活性和可维护性

&#x1f493; 博客主页&#xff1a;从零开始的-CodeNinja之路 ⏩ 收录文章&#xff1a;Java Spring IoC&DI :探索Java Spring中控制反转和依赖注入的威力,增强灵活性和可维护性 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 前提小知识:高内…
阅读更多...
LeetCode-78. 子集【位运算 数组 回溯】

LeetCode-78. 子集【位运算 数组 回溯】

LeetCode-78. 子集【位运算 数组 回溯】 题目描述&#xff1a;解题思路一&#xff1a;回溯&#xff0c;回溯三部曲解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的 子…
阅读更多...
【SpringCloud】Nacos 注册中心

【SpringCloud】Nacos 注册中心

目 录 一.认识和安装 Nacos1.Windows安装1. 下载安装包2. 解压3. 端口配置4. 启动5. 访问 2.Linux安装1. 安装JDK2. 上传安装包3. 解压4. 端口配置5. 启动 二.服务注册到 nacos1. 引入依赖2. 配置 nacos 地址3. 重启 三.服务分级存储模型1. 给 user-service 配置集群2. 同集群优…
阅读更多...
JavaWeb前端基础（HTML CSS JavaScript）

JavaWeb前端基础（HTML CSS JavaScript）

本文用于检验学习效果&#xff0c;忘记知识就去文末的链接复习 1. HTML 1.1 HTML基础 结构 头<head>身体<body> 内容 图片<img>段落<p>图标<link> 标签 单标签双标签 常用标签 div&#xff1a;分割块span&#xff1a;只占需要的大小p&…
阅读更多...
从三个维度看，你的企业是否需要引入精益管理咨询？

从三个维度看，你的企业是否需要引入精益管理咨询？

在快速变化的商业环境中&#xff0c;企业不断寻求提升自身运营效率和竞争力的方法。其中&#xff0c;精益管理作为一种追求卓越、消除浪费的管理理念&#xff0c;被越来越多的企业所认可。但是&#xff0c;如何判断自己的组织是否需要进行精益企业管理咨询呢&#xff1f;天行健…
阅读更多...
【漏洞复现】通天星CMSV6车载视频监控平台FTP匿名访问

【漏洞复现】通天星CMSV6车载视频监控平台FTP匿名访问

Nx01 产品简介 通天星车载视频监控平台软件拥有多种语言版本&#xff0c;应用于公交车车载视频监控、校车车载视频监控、大巴车车载视频监控、物流车载监控、油品运输车载监控等公共交通上。 Nx02 漏洞描述 通天星车载视频监控平台安装完毕后会默认开放端口2121作为ftp服务使用…
阅读更多...
多语言婚恋交友APP开发的关键成功因素

多语言婚恋交友APP开发的关键成功因素

随着移动互联网的快速发展&#xff0c;多语言婚恋交友APP的需求和发展逐渐成为了一个备受关注的话题。在全球范围内&#xff0c;人们希望通过移动应用来寻找爱情、建立关系和拓展社交圈子&#xff0c;因此开发一款具有全球影响力的多语言婚恋交友APP成为了许多开发者的目标。针…
阅读更多...
Java实现Excel百万级数据的导入(约30s完成)

Java实现Excel百万级数据的导入(约30s完成)

前言 在遇到大数据量excel&#xff0c;50MB大小或数百万级别的数据读取时&#xff0c;使用常用的POI容易导致读取时内存溢出或者cpu飙升。 本文讨论的是针对xlsx格式的excel文件上传&#xff0c;采用com.monitorjbl.xlsx.StreamingReader 。 什么是StreamReader? StreamReader…
阅读更多...
开源低代码平台概况和说明推荐

开源低代码平台概况和说明推荐

开源低代码平台是一类允许开发者通过图形化界面和预构建的代码块&#xff0c;而非传统的手动编程方式&#xff0c;来创建应用程序的工具。这些平台通常提供了丰富的功能和特性&#xff0c;帮助开发者更加高效地进行应用开发。 开源低代码平台的概况可以总结为以下几点&#xf…
阅读更多...
【C++】背包问题

【C++】背包问题

目录 背包问题01 背包背包不装满问题背包必须满问题 完全背包 背包问题 背包问题属于动态规划的一类题型 01 背包 背包不装满问题 背包必须满问题 #include <iostream> using namespace std; const int N 1010; #include <vector> int main() {int n , V;int v[…
阅读更多...
【Ambari】Ansible自动化部署大数据集群

【Ambari】Ansible自动化部署大数据集群

目录 一&#xff0e;版本说明和介绍信息 1.1 大数据组件版本 1.2 Apache Components 1.3 Databases支持版本 二&#xff0e;安装包上传和说明 三&#xff0e;服务器基础环境配置 3.1global配置修改 3.2主机名映射配置 3.3免密用户名密码配置 3.4 ansible安装 四. 安…
阅读更多...
2024.4.1-[作业记录]-day06-认识 CSS(三大特性、引入方式)

2024.4.1-[作业记录]-day06-认识 CSS(三大特性、引入方式)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; day06-认识 CSS(三大特性、引入方式) 文章目录 day06-认识 CSS(三大特性、引入方式)作业…
阅读更多...
实践笔记-03 docker buildx 使用

实践笔记-03 docker buildx 使用

docker buildx 使用 1.启用docker buildx2.启用 binfmt_misc3.从默认的构建器切换到多平台构建器3.1创建buildkitd.toml文件&#xff08;私有仓库是http没有证书的情况下&#xff0c;需要配置&#xff09;3.2创建构建器并使用新创建的构建器 4.构建多架构镜像并推送至harbor仓库…
阅读更多...
JVM—对象的创建流程与内存分配

JVM—对象的创建流程与内存分配

JVM—对象的创建流程与内存分配 创建流程 对象创建的流程图如下&#xff1a; 对象的内存分配方式 内存分配的方式有两种&#xff1a; 指针碰撞&#xff08;Bump the Pointer&#xff09;空闲列表&#xff08;Free List&#xff09; 分配方式说明收集器指针碰撞&#xff08…
阅读更多...
三防笔记本丨加固笔记本丨三防笔记本电脑赋能车辆检修

三防笔记本丨加固笔记本丨三防笔记本电脑赋能车辆检修

随着汽车数量的不断增加和交通运输行业的发展&#xff0c;车辆检修行业成为了保障交通安全和延长车辆寿命的重要领域。在车辆检修过程中&#xff0c;需要使用各种工具和设备来进行检测、维修和保养&#xff0c;而信息化技术的应用正逐渐渗透到这一行业中&#xff0c;为检修工作…
阅读更多...
51单片机实验03-定时器T0来实现流水灯从左到右再从右到左

51单片机实验03-定时器T0来实现流水灯从左到右再从右到左

目录 一、实验目的 二、实验说明 1、51单片机有两个16位内部计数器/定时器&#xff08;C/T&#xff0c; Counter/Timer&#xff09;。 2、模式寄存器TMOD 1) M1M0工作模式控制位&#xff1b; 2) C/T定时器或计数器选择位&#xff1a; 3&#xff09;GATE定时器/计数器运行…
阅读更多...
超声波清洗机哪家强？超声波清洗机排行榜！最强超声波清洗机推荐

超声波清洗机哪家强？超声波清洗机排行榜！最强超声波清洗机推荐

眼镜作为日常生活中不可或缺的用品&#xff0c;对于很多人来说是必备的。然而&#xff0c;随着使用时间的增长&#xff0c;眼镜表面往往会沾染灰尘、污垢等&#xff0c;这不仅影响了镜片的透光性&#xff0c;也可能影响到使用者的视力和舒适度。因此&#xff0c;清洁眼镜成了一…
阅读更多...
2_6.Linux高级存储管理

2_6.Linux高级存储管理

##1.逻辑卷## pv ##物理卷 被处理过的物理分区 pe ##物理扩展 设定存储最小单元 vg ##物理卷组 捆绑pv到一个组中 lv ##逻辑卷 分配最终的使用设备 监控建立过程&#xff1a; watch -n 1 "pvs;echo ;vgs;echo ;lvs;echo ;df -h /weixindata" &#xff08;1&#xf…
阅读更多...
wheeltec轮趣ROS教育机器人的网络连接

wheeltec轮趣ROS教育机器人的网络连接

一、术语解析 宿主机&#xff1a;宿主机是指物理主机&#xff0c;比如用于开发测试的笔记本电脑和台式机电脑。 虚拟机&#xff1a;虚拟机是指安装在宿主机的VMware&#xff0c;推荐在宿主机上安装虚拟机&#xff0c;官方提供虚拟机的镜像以及配套的开发环境。 ROS主机&…
阅读更多...
DC/DC1A30V高效同步降压转换器H4010

DC/DC1A30V高效同步降压转换器H4010

DC/DC 1A30V高效同步降压转换器是一种高频、同步、整流、降压、开关模式转换器&#xff0c;内置功率MOSFET。它可以在宽输入电源范围内实现1.5A峰值输出电流&#xff0c;并具有出色的负载和线路调节性能。此外&#xff0c;该转换器需要最少数量的现成外部元件&#xff0c;并采用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023