VUE，vue

您所在的位置：网站首页 › 山东最新审车政策 › VUE，vue

VUE，vue

#VUE，vue| 来源: 网络整理| 查看: 265

一、项目结构：

初始化一个vue-cli之后，我们可以在目录中看到以下结构。在这里插入图片描述

app.vue

src下的app.vue是项目的根组件，可以包含其他的子组件。在项目运行时进入的首页即为app.vue。子组件写在src文件夹下的components内。根组件和子组件组成组件树。在这里插入图片描述

main.js

在这里插入图片描述

mian.js是vue应用的入口文件，可以创建一个新的vue实例并挂载再根节点下。Vue插件也从这里引入。

二、添加引入新模块

1.在components文件夹下新建一个vue文件在这里插入图片描述模块内基本组件：

template，在里面添加模块可视内容script,使用export default将模块导出style,控制组件样式，建议在后面加一个scoped避免样式影响到其他组件

例子：创建student.vue

student list {{ item }} export default { name: "student", //定义子组件的name data() { return { students: [ { id: 1, name: "lisi", age: 12, }, { id: 2, name: "xiaohong", age: 11, }, { id: 1, name: "zhangsan", age: 13, }, ], }; }, methods: {}, };

2.载入模块回到根组件app.vue内使用import导入创建的子组件

import student from './components/student.vue'

在export default的components中添加子组件名称在这里插入图片描述 - npm run serve启动项目，可以看到我们自己添加的子组件以及在页面上

【本文地址】

VUE，vue

VUE，vue

今日新闻

推荐新闻