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 中定义了学生的姓名和年龄。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深入浅出 -- 系统架构之负载均衡Nginx反向代理

深入浅出 -- 系统架构之负载均衡Nginx反向代理

一、Nginx反向代理-负载均衡 首先通过SpringBootFreemarker快速搭建一个WEB项目&#xff1a;springboot-web-nginx&#xff0c;然后在该项目中&#xff0c;创建一个IndexNginxController.java文件&#xff0c;逻辑如下&#xff1a; Controller public class IndexNginxControl…
阅读更多...
卷积神经网络实战

卷积神经网络实战

构建卷积神经网络 卷积网络中的输入和层与传统神经网络有些区别&#xff0c;需重新设计&#xff0c;训练模块基本一致 1.首先读取数据 - 分别构建训练集和测试集&#xff08;验证集&#xff09; - DataLoader来迭代取数据 # 定义超参数 input_size 28 #图像的总尺寸28*28…
阅读更多...
优雅强大的前端管理模板——Soybean Admin

优雅强大的前端管理模板——Soybean Admin

公众号&#xff1a;【可乐前端】&#xff0c;每天3分钟学习一个优秀的开源项目&#xff0c;分享web面试与实战知识&#xff0c;也有全栈交流学习摸鱼群&#xff0c;期待您的关注! 每天3分钟开源 hi&#xff0c;这里是每天3分钟开源&#xff0c;很高兴又跟大家见面了&#xff0…
阅读更多...
python 03序列（列表和元组）

python 03序列（列表和元组）

列表 1.创建 x[1,2,3,4,5,6,7,8,9,10] print(x) 或者是 y[a,b,c,d,e,f,g,h] print(y) 2.访问 &#xff08;1&#xff09;取出一个元素 x[0] #取出第0号&#xff0c;即List里第一个元素 &#xff08;2&#xff09;取出多个连续元素 通过两个索引值实现&#xff0c;第一…
阅读更多...
专题【双指针】【学习题】刷题日记

专题【双指针】【学习题】刷题日记

题目列表 11. 盛最多水的容器 42. 接雨水 15. 三数之和 16. 最接近的三数之和 18. 四数之和 26. 删除有序数组中的重复项 27. 移除元素 75. 颜色分类 167. 两数之和 II - 输入有序数组 2024.04.06 11. 盛最多水的容器 题目 给定一个长度为 n 的整数数组 height 。有 n 条垂…
阅读更多...
MATLAB - mpcobj = mpc(model,ts,P,M,W,MV,OV,DV) 函数

MATLAB - mpcobj = mpc(model,ts,P,M,W,MV,OV,DV) 函数

系列文章目录 前言 模型预测控制器使用线性工厂、干扰和噪声模型来估计控制器状态并预测未来的工厂输出。控制器利用预测的设备输出&#xff0c;解决二次规划优化问题&#xff0c;以确定控制动作。 有关模型预测控制器结构的更多信息&#xff0c;请参阅 MPC 预测模型。 一、语法…
阅读更多...
SpringMVC--概述 / 入门

SpringMVC--概述 / 入门

目录 1. SpringMVC简介 2. 配置&入门 2.1. 开发环境 2.2. 创建maven工程 2.3. 手动创建 web.xml 2.4. 配置web.xml 2.4.1. 默认配置方式 2.4.2. 扩展配置方式 2.5. 创建请求控制器 2.6. 创建springMVC的配置文件 2.7. 测试 HelloWorld 2.7.1. 实现对首页的访问…
阅读更多...
OJ在线比赛系统（人员管理、赛题发布、在线提交、题目审核、成绩录入）

OJ在线比赛系统（人员管理、赛题发布、在线提交、题目审核、成绩录入）

系统功能设计 技术栈&#xff1a;springboot&#xff0c;jdk8,vue3,element-plus,mybatis-plus 1.java后端系统 首先需要学生通过前端注册页面和java后端系统将个人信息写入数据库&#xff0c;包含学号、姓名、班级以及需要爬取网站的相关信息&#xff08;例如AtCoder账号信…
阅读更多...
智谱清言 HTTP调用 + postman使用

智谱清言 HTTP调用 + postman使用

官方教程 接口鉴权 非SDK用户鉴权 官方网站 第一步 获取您的 API Key 第二步 使用 JWT 组装 用户端需引入对应 JWT 相关工具类&#xff0c;并按以下方式组装 JWT 中 header、payload 部分 1、header 具体示例 {“alg”:“HS256”,“sign_type”:“SIGN”} alg : 属性表…
阅读更多...
批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用

批量导入svg文件作为图标使用（vue3）vite-plugin-svg-icons插件的具体应用

目录 需求svg使用简述插件使用简述实现安装插件1、配置vite.config.ts2、src/main.ts引入注册脚本3、写个icon组件4、使用组件 需求 在vue3项目中&#xff0c;需要批量导入某个文件夹内数量不确定的svg文件用来作为图标&#xff0c;开发完成后能够通过增减文件夹内的svg文件&a…
阅读更多...
ICLR 2024 | 联邦学习后门攻击的模型关键层

ICLR 2024 | 联邦学习后门攻击的模型关键层

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了免费的人工智能中文站https://ai.weoknow.com 新建了收费的人工智能中文站https://ai.hzytsoft.cn/ 更多资源欢迎关注 联邦学习使多个参与方可以在数据隐私得到保护的情况下训练机器学习模型。但是由于服务器无法…
阅读更多...
论文阅读——MVDiffusion

论文阅读——MVDiffusion

MVDiffusion: Enabling Holistic Multi-view Image Generation with Correspondence-Aware Diffusion 文生图模型 用于根据给定像素到像素对应关系的文本提示生成一致的多视图图像。 MVDiffusion 会在给定任意每个视图文本的情况下合成高分辨率真实感全景图像&#xff0c;或将…
阅读更多...
亚信安慧AntDB：开启数据洞察的新视野

亚信安慧AntDB：开启数据洞察的新视野

AntDB一直秉承着“技术生态”的理念&#xff0c;不断进行技术创新和功能增强&#xff0c;以保持与先进数据库系统的竞争力。作为一款致力于提升数据库处理性能和稳定性的系统&#xff0c;AntDB在技术上始终保持敏锐的洞察力&#xff0c;不断汲取国内外先进技术的精华&#xff0…
阅读更多...
Scala大数据开发

Scala大数据开发

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Scala简述 在此&#xff0c;简要介绍 Scala 的基本信息和情况。 Scala释义 Scala 源自于英语单词scalable&#xff0c;表示可伸缩的、可扩展的含义。 Scala作者 Scala编…
阅读更多...
tomcat 结构目录

tomcat 结构目录

bin 启动&#xff0c;关闭和其他脚本。这些 .sh文件&#xff08;对于Unix系统&#xff09;是这些.bat文件的功能副本&#xff08;对于Windows系统&#xff09;。由于Win32命令行缺少某些功能&#xff0c;因此此处包含一些其他文件。比如说&#xff1a;windows下启动tomcat用的是…
阅读更多...
基于开源IM即时通讯框架MobileIMSDK：RainbowChat-iOS端v9.0版已发布

基于开源IM即时通讯框架MobileIMSDK：RainbowChat-iOS端v9.0版已发布

关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架&#xff0c;超轻量级、高度提炼&#xff0c;一套API优雅支持 UDP 、TCP 、WebSocket 三种协议&#xff0c;支持 iOS、Android、H5、标准Java、小程序、Uniapp&#xff0c;服务端基于Netty编写。 工程…
阅读更多...
如何不编程用 ChatGPT 爬取网站数据？

如何不编程用 ChatGPT 爬取网站数据？

敢于大胆设想&#xff0c;才能在 AI 时代提出好问题。 需求 很多小伙伴&#xff0c;都需要为研究获取数据。从网上爬取数据&#xff0c;是其中关键一环。以往&#xff0c;这都需要编程来实现。 可最近&#xff0c;一位星友在知识星球提问&#xff1a; 这里涉及到一些个人隐私&a…
阅读更多...
【VMware Workstation】启动虚拟机报错“此主机支持 AMD-V，但 AMD-V 处于禁用状态”

【VMware Workstation】启动虚拟机报错“此主机支持 AMD-V，但 AMD-V 处于禁用状态”

问题出现步骤&#xff1a; 打开虚拟机&#xff1a; 然后报错&#xff1a; “此主机支持 AMD-V&#xff0c;但 AMD-V 处于禁用状态。 如果已在 BIOS/固件设置中禁用 AMD-V&#xff0c;或主机自更改此设置后从未重新启动&#xff0c;则 AMD-V 可能被禁用。 (1) 确认 BIOS/固件设…
阅读更多...
吴恩达2022机器学习专项课程(一） 第二周课程实验：多元线性回归（Lab_02）

吴恩达2022机器学习专项课程(一） 第二周课程实验：多元线性回归（Lab_02）

1.训练集 使用Numpy数组存储数据集。 2.打印数组 打印两个数组的形状和数据。 3.初始化w&#xff0c;b 为了演示&#xff0c;w&#xff0c;b预设出接近最优解的值。w是一个一维数组&#xff0c;w个数对应特征个数。 4.非向量化计算多元线性回归函数 使用for循环&…
阅读更多...
泰迪·南通师范大数据智能工作室挂牌签约仪式圆满结束

泰迪·南通师范大数据智能工作室挂牌签约仪式圆满结束

为促进毕业生高质量就业&#xff0c;拓宽就业渠道&#xff0c;加强校企合作&#xff0c;4月2日&#xff0c;泰迪智能科技股份有限公司上海分公司总经理彭艳昆一行来校出席南通师范高等专科学校“泰迪科技南通师范大数据智能工作室”签约揭牌仪式。学校党委副书记陈玉君、科技处…
阅读更多...
最新文章

Copyright @ 2022~2023