通过elementUI学习vue

news2024/11/21 2:32:54

在这里插入图片描述

<template>
  <el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>
</template>

<script>
  export default {
    data () {
      return {
        radio: '1'
      };
    }
  }
</script>

1.代码讲解
这段代码是一个简单的 Vue 单文件组件，实现了一个包含两个单选框（radio）的功能。下面解释一下代码的功能和逻辑：

模板部分（Template）：
    使用了 Element UI（饿了么团队开发的 Vue 组件库）中的<el-radio>组件来生成单选框。
    两个<el-radio>标签分别表示两个备选项，通过label属性指定了单选框的值。
    使用了v-model指令将radio数据属性与单选框的选中状态进行双向绑定，保证了选中状态的同步。

脚本部分（Script）：
    在data函数中定义了一个名为radio的数据属性，初始值为'1'，表示默认选中第一个备选项。
    通过export default导出了一个 Vue 组件对象，其中包含了组件的逻辑代码。

总体来说，这段代码实现了一个简单的单选框功能，用户可以在两个备选项中选择一个。选中的值会被存储在radio数据属性中，供后续逻辑使用。

问题：看上面代码发现并没有地方调用 default方法，这个script是什么时候调用的？

在一个 Vue 单文件组件中，

具体来说：

当使用该组件时（比如在父组件中引入并使用），Vue 会根据组件定义创建一个实例。
在创建实例的过程中，会执行<script>中的内容，包括数据初始化、生命周期钩子函数等。
数据初始化完成后，会根据模板中的内容进行渲染，将数据和模板结合起来呈现在页面上。

因此，虽然在代码中没有显式调用default方法，但是在 Vue 的组件化开发中，default中的内容会在适当的时机被 Vue 自动调用执行。这样设计的目的是为了让开发者更专注于组件的逻辑和数据处理，而不必过多关注调用时机。

组件被实例化方法，出示例代码：

在 Vue 中，组件被实例化的方法主要有两种：全局注册和局部注册。
全局注册

全局注册是指通过Vue.component方法将组件注册为全局组件，这样在任何 Vue 实例的模板中都可以使用该组件。

示例代码如下：

// 定义一个名为 my-component 的组件
Vue.component('my-component', {
  // 组件的选项
});

// 在模板中使用 my-component 组件
<my-component></my-component>

局部注册

局部注册是指在一个 Vue 实例的组件选项中注册组件，使得该组件仅在当前 Vue 实例中可用。

示例代码如下：

// 在一个 Vue 实例的组件选项中注册 my-component 组件
new Vue({
  components: {
    'my-component': {
      // 组件的选项
    }
  }
});

除了以上两种注册方法以外，还有一种基于 ES6 的单文件组件写法。在这种写法中，可以不使用export default，而是使用export和Vue.component结合的方式来注册组件。

示例代码如下：

// MyComponent.vue
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, I am a component!'
    };
  }
}

// 在另一个文件中导入并注册 MyComponent.vue
import MyComponent from './MyComponent.vue';

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  }
});