4 vue-cli 新建组件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了4 vue-cli 新建组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2040字，纯文字阅读大概需要3分钟。

内容图文

1 新建home组件替代HelloWorld组件

<template>
  <div>
    主页组件
    <div style="width: 100%;height: 400px;background: aquamarine;">
      数据区域
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
}
</script>

<style scoped>

</style>

 

2 根路径设置为home组件（修改index.js路径文件）

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";

Vue.use(Router)

export default new Router({
  routes: [
    {path: '/', name: 'Home', component: Home}
  ]
})

3 新建user组件

• user组件

<template>
  <div>
    用户组件
  </div>
</template>

<script>
export default {
  name: "Home"
}
</script>

<style scoped>

</style>

• index.js配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from "../components/Home";
import User from "../components/User";

Vue.use(Router)

export default new Router({
  routes: [
    // 访问根路径时，重定向到home
    {path: '/', redirect:"/home"},
    {path: '/home', name: 'Home', component: Home},
    {path: '/user', name: 'User', component: User},
  ]
})

4 组件中引入footer

• 引入footer
• 注册footer
• 使用footer

--home组件加入footer
<template>
  <div>
    主页组件
    <div style="width: 100%;height: 400px;background: aquamarine;">
      数据区域
    </div>
    <div>
      <!--  使用组件  -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "./Footer";  // 引入组件
export default {
  name: "Home",
  components: {
    Footer, // 注册组件
  }
}
</script>

<style scoped>

</style>

-- user组件加入footer
<template>
  <div>
    用户组件<br>
    <!--  引入图片  -->
    <img src="../assets/logo.png">
    <div>
      <table border="1" >
        <tr>
          <th>id</th>
          <th>name</th>
          <th>opt</th>
        </tr>
        <tr v-for="user in users">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>
            <a href="">编辑</a>
            <a href="">删除</a>
          </td>
        </tr>
      </table>
    </div>
    <div>
      <!--  使用组件  -->
      <Footer></Footer>
    </div>
  </div>
</template>

<script>
import Footer from "./Footer";
export default {
  name: "Home",
  data() {
    return{
      users:[
        {id:1, name:"张飞"},
        {id:2, name:"关羽"},
      ]
    }
  },
  components: {
    Footer,
  },
  created() { // 发送axios请求
  }
}
</script>

<style scoped>

</style>

 

?5?总结

组件分类：
1 路由组件（在index.js配置路由用到的组件）
2 普通组件（在路由组件中调用）

 

内容总结

以上是互联网集市为您收集整理的4 vue-cli 新建组件全部内容，希望文章能够帮你解决4 vue-cli 新建组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---