0
点赞
收藏
分享

微信扫一扫

Flask基础学习3

爱做梦的夏夏 02-29 14:30 阅读 2

在这里插入图片描述

<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
  }
});

这种写法会在 Vue 实例创建时自动调用,并注册MyComponent组件供该实例使用。

总的来说,无论是全局注册还是局部注册,以及单文件组件的写法,当 Vue 实例化时,注册的组件都会在合适的时机被调用和注册,从而可以在模板中使用。

后续再更新!

举报

相关推荐

flask基础

flask 杂记3

flask 基础语法

Flask学习

flask基础使用

0 条评论