vue整理笔记（二）

Y1Y2Y3Y4Y5YJL

于 2022-11-14 09:32:24 发布

阅读量202

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_62982672/article/details/127840892

版权

本文详细介绍了如何在Vue.js项目中创建和应用单文件组件。首先通过`vue create`命令初始化项目，然后在`src/components`目录下创建自定义组件`MyTr.vue`。组件包含模板、脚本和样式部分，用于定义组件结构和交互逻辑。在`main.js`中导入并注册组件，实现局部应用。文章以实例展示了Vue组件化的基础操作，适合Vue初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

上次整理到vue的项目创建

这次就来说说vue的单文件组件创建

1、Vue 组件

1.通过命令 vue init webpack 项目名创建一个项目例子： vue create vue2-demo

2.打开src的文件夹打开components 在里面创建一个名为MyTr.vue的组件

app.vue是根组件

3.打开MyTr.vue

写入基本格式

<template>
    <div>
    /* 页面内容组件结构*/
      <h3>你好呀</h3>
    </div>
  </template>

<script>
/*组件的交互代码 */
export default{
    name:'MyTr',
    data(){
        return{

        }
    },
    mounted:{

    },
    methods:{

    }
}
</script>

<style>
/* 组件样式*/
</style>

4.这里进行局部组件应用

编写组件标签：

import Mytr from '@/components/MyTr.vue' //引入组件MyTr.vue

main.js引入App.vue