.vue文件怎么使用组件?

.vue文件怎么使用组件?

在vue中组件以.vue结尾,一个.vue文件就是一个组件。

下面介绍下在组件中使用其他组件的方法。

(相关课程推荐:Vue.js教程

1、首先创建一个组件MyTest.vue

<template>
    <div class="my-test">
        <ul>
            <li>导航01</li>
            <li>导航02</li>
            <li>导航03</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name: 'MyTest',
        props: {

        }
    }
</script>

<style scoped>
.my-test ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.my-test ul li{
    padding: 8px;
}
</style>

2、然后在App.vue中导入并使用

1. 使用import导入MyTest.vue组件

2. 在components中注册组件

3. 在template中调用组件

<template>
  <div id="app">
    <MyTest/>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'

export default {
  name: 'app',
  components: {
    MyTest
  }
}
</script>

<style>
</style>

效果:

Snipaste_2019-12-25_17-19-19.jpg

Image placeholder
前端答疑
未设置
  79人点赞

没有讨论,发表一下自己的看法吧

推荐文章
.vue文件怎么请求api

.vue文件怎么请求api1、首先我们安装axios网络请求库cdtest//进入项目根目录 npmiaxios-S//执行安装2、在需要使用请求的vue组件内,引入axios 请求示例 //引

.vue文件怎么引入本地图片

.vue文件怎么引入本地图片.vue文件引入本地图片,需要先将本地图片复制到项目的src\assets目录中,否则不能使用。然后在template标签中,使用img标签引用图片即可。本地图片路径:在.

.vue文件怎么写css样式

.vue文件怎么写css样式.vue文件由结构——行为——样式三部分构成,分别对应template、script、style标签,css样式就写在style标签中。一、直接在Test.vue中写css

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

.vue文件对代码缩进有要求吗?

.vue文件对代码缩进有要求吗?.vue文件对代码缩进没有要求,可以按照自己的喜好或者项目规定进行缩进,编译后生成的文件也相同,没有任何影响。为什么没有要求呢,这是因为一个.vue文件,自上而下,依次

.vue文件中如何写注释?

.vue文件中如何写注释?.vue文件中,每个代码块内,注释的时候,需要使用各自语言的注释语法去注释(HTML、CSS、JavaScript、Jade等)。在文件最顶部注释的时候用HTML的注释语法:

.vue文件不写js可以吗?

.vue文件不写js可以吗?.vue文件可以不写js,也可以不写css和html。也就是说一个空的vue文件也能正常使用而不报错。正常情况下,一个.vue文件结构如下: exportdefa

.vue文件中可以写less吗?

.vue文件中可以写less吗?可以写less,但是前提是安装了less和less-loader。下面就简单介绍下载.vue中使用less的方法吧。1、首先使用npm下载依赖;npminstall--

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

Flutter高内聚组件怎么做?闲鱼打造开源高效方案!

fish_redux是闲鱼技术团队打造的开源flutter应用开发框架,旨在解决页面内组件间的高内聚、低耦合问题。开源地址:https://github.com/alibaba/fish-redux从

怎么使用npm下载vue.js?

课程推荐:前端开发工程师--学习猿地精品课程 一、安装node.js node.js是一个安装包资源管理器。可以在里面下载安装包。不是一门语言/库/框架。也就是说,和vue.js不是同一类东西。(vu

css格式文件怎么打开

css格式文件怎么打开css文件可以使用系统自带的记事本打开,也可以使用专业的代码编辑器打开,如sublimetext、vscode、Dreamweaver。css文件是指css代码放到一个单独的文件

html找不到css文件怎么解决

html找不到css文件怎么解决如果你在引用css文件时,使用了错误的文件路径,就会导致引用失效。解决方法就是填写正确的css文件路径。下面我们学习下HTML填写路径的两种方法。(推荐学习:HTML视

nginx找不到js css文件怎么办

nginx找不到jscss文件怎么办js、css都算静态资源,之所以请求不到是因为nginx做代理后的虚拟路径和静态资源的请求路径不一致导致的。只需要更改root的配置就可以了。设置location如

css文件怎么用?

css文件怎么用?css文件使用有两种方式,一种是通过link标签引入,一个是使用@import进行导入。1、通过link使用css文件将下面代码放在head标签中(相关课程推荐:css视频教程)2、

css文件怎么打开

css文件怎么打开?css文件可以使用记事本、vim、sublimetext、vscode打开。实际上,只要是一款文本编辑器,都能打开css文件,因为css文件本质上就是一个文本文件。1、vscode

app.vue是什么文件?

app.vue是vue页面资源的首加载项,是主组件,页面入口文件,所有页面都是在App.vue下进行切换的;也是整个项目的关键,app.vue负责构建定义及页面组件归集。 exportde

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

使用vue实现一个电子签名组件

使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在

使用vue实现一个电子签名组件

在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名。今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签,在之前的文章里我们使用canva

怎么查看css文件?

怎么查看css文件?如何利用浏览器查看网站源代码和css样式1、首先打开浏览器。2、打开自己想要查看html和css代码的网站,这里我就打开百度首页。3、之后按下键盘的F12。4、之后会弹出一个格式工

为什么使用div css布局?

提起DIV+CSS组合,还要从XHTML说起。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。为什么

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名