Vue组件基础操作介绍

目录
  • 一、组件
  • 二、组件的创建
  • 三、组件中的data
  • 四、组件中的methods

一、组件

组件是vue的重要的特征之一，可以扩展html的功能，也可以封装代码实现重复使用。

二、组件的创建

1. 非脚手架方式下创建

​ 第一步：使用Vue.extend创建组件

​ 第二步：使用Vue.component注册组件

​ 第三步：在html页面中使用组件

 <div id="app">
        <my-com></my-com>  <!-- 使用组件：名称之间用'-'连接  -->
    </div>
    <script>
        //第一步：使用Vue.extend创建组件
        var mycom = Vue.extend({
            template:'<h2>白桦林</h2>'   //template：指定页面中要展示的html结构
        })
        //第二步：使用Vue.component注册组件
        Vue.component('myCom',mycom)  //'myCom'是注册的组件名，在注册时采用驼峰命名
        new Vue({
            el:'#app'
        })
    </script>

2. 使用template创建组件

​ 第一步：使用template创建html页面模板，并给template定义id属性

​ 第二步：使用template的id属性值进行注册

强调：在Vue实例外部通过Vue.component创建或注册的组件称为全局组件

局部组件：创建方式和全局组件的创建方式一样，注册时必须放在Vue实例内部通过components完成

3. 在WebStorm中使用脚手架创建组件：

创建Vue component，组件命名采用驼峰命名法

  <template>
      //必须有一个html的标签作为模板的根标签
  </template>

三、组件中的data

1. 每个组件都有自己的数据：即每个组件都有自己的data

2. vue实例的data和组件的data的区别

​ 1）vue实例的data是一个对象

​ 2）组件的data必须是一个方法，该方法必须返回一个对象

3）vue实例中的data和组件中data在使用方法上是一样的

四、组件中的methods

组件中的methods和vue实例中的methods用法相同

练习：定义一个Vue组件，组件的名称是StudentInfo，在该组件中显示3条学生信息(编号、姓名、性别、地址)

<template>
<div>
  <table border="1" align="center">
    <thead>
    <tr>
      <th width="100">编号</th>
      <th width="100">姓名</th>
      <th width="100">年龄</th>
      <th width="100">性别</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(info,index) in info" :key="index">
      <td>{{ info.id}}</td>
      <td>{{ info.name}}</td>
      <td>{{ info.age}}</td>
      <td>{{ info.sex}}</td>
    </tr>
    </tbody>
  </table>
</div>
</template>
<script>
export default {
  name: "StudentInfo",
  data(){
    return {
      info:[
        {id:1001,name:'黄忠',age:44,sex:'男'},
        {id:1001,name:'小乔',age:19,sex:'女'},
        {id:1001,name:'周瑜',age:22,sex:'男'},
        {id:1001,name:'刘备',age:34,sex:'男'},
      ]
    }
  }
}
</script>
<style scoped>
</style>

到此这篇关于Vue组件基础操作介绍的文章就介绍到这了,更多相关Vue组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue组件的实现原理详细分析

    目录 渲染组件 组件更新 父子组件 setup函数 emit 实现 渲染组件 一个组件内部必须要使用 render 进行渲染,且返回虚拟 DOM 这是一个最简组件实例 const MyComponent = { // 组件名称,可选 name: "MyComponent", // 组件的渲染函数,其返回值必须为虚拟 DOM render() { // 返回虚拟 DOM return { type: "div", children: `我是文本内容`, }; }, }

  • Vue组件基础操作介绍

    目录 一.组件 二.组件的创建 三.组件中的data 四.组件中的methods 一.组件 组件是vue的重要的特征之一,可以扩展html的功能,也可以封装代码实现重复使用. 二.组件的创建 1. 非脚手架方式下创建 ​ 第一步:使用Vue.extend创建组件 ​ 第二步:使用Vue.component注册组件 ​ 第三步:在html页面中使用组件 <div id="app"> <my-com></my-com> <!-- 使用组件:名称之间

  • vue 组件基础知识总结

    组件基础 1 组件的复用 组件是可复用的Vue实例. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <

  • React过渡动画组件基础使用介绍

    React过渡动画组件基础使用介绍

    目录 1. 基础使用 2. 将animate.css集成到csstranistion中 3. 列表过渡 4. switchTransition动画 5. 路由切换过渡 6. 高阶组件实现路由切换过渡 1. 基础使用 介绍: 在项目中可能会给一些组件的显示或隐藏添加某种过渡动画,这样可以很好的增加用户的使用体验, react-transition-group 是 react 的第三方模块,借助这个模块可以实现动画切换效果. 安装: yarn add react-transition-group 使

  • 详解vue组件基础

    什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

  • Vue组件基础用法详解

    Vue组件概述 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦. 在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符

  • 测试平台开发vue组件化重构前端代码

    测试平台开发vue组件化重构前端代码

    目录 基于 springboot+vue 的测试平台开发 一.为什么重构 二.如何拆分 1. 补充对应知识 2. 合理拆分 三.关于项目 基于 springboot+vue 的测试平台开发 继续更新(人在魔都 T_T). 这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点. 目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下. 一.为什么重构 目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题.

  • 学习Vue组件实例

    Vue实例 项目启动过程 看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)? 你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化). 接着,应该是执行了entry.js(因为打包是webpack打包的,你配置的入口文件就这一个). entry.js干了什么,是的,创建了一个Vue实例对象,然后这个对象管理的区域根据el属性知道,应

  • Vue组件的使用及个人理解与介绍

    组件的基本使用 注册组件 注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置. Vue.component('mycomponent',{ template: `<div>这是一个自定义组件</div>`, data () { return { message: 'hello world' } } }) 如上方式,就已经创建了一个自定义组件,然后就可以在Vue实例挂在的DOM元素中使用它. <div id="app

  • vue项目常用组件和框架结构介绍

    vue项目基础结构 一个vue的项目,我觉得最小的子集其实就是{vue,vue-router,component},vue作为基础库,为我们提供双向绑定等功能.vue-router连接不同的"页面",component作为样式或者行为输出,你可以通过这三个东西来实现最基本的静态SPA网站.当然我在这里不谈vue全家桶这样宽泛的概念,我会如数家珍的把主要的技术点一一列举. 1.vue-cli:搭建基本的vue项目骨架,脚手架工具 2.sass-loader&node-sass:我

  • Vue 组件复用多次自定义参数操作

    场景: 当项目中多处出现相同的模块时,此时的正常考虑是将其做成公共组建,通过传参不同,实现多处复用 具体: 背景:项目使用的技术是VUE+ElementUI 此处,多处出现的模块是select选择框,封装成组件后,传给它option的值,代码如下: <!--组件文件 比如说这个组件叫 vSelect 下面会用--> <template> <el-select @change="handleChange" v-model="value"

随机推荐