07 Vue组件化:创建组件、访问组件

导读:本篇文章讲解 07 Vue组件化:创建组件、访问组件,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

1、使用WebStorm创建一个Vue项目

2、使用命令行加载相关依赖

cnpm install

3、查看创建好的项目src目录结构

07 Vue组件化:创建组件、访问组件

如上图所示,WebStorm已经在src目录下生成了一个 /asserts 静态资源目录、一个 /components 组件目录、一个 /router 路由配置目录;其中 /components/HelloWrold.vue 文件就是一个Vue的组件,执行

npm run dev

启动项目后打开浏览器,默认显示的就是这个HelloWorld.vue组件的内容。

 

4、创建组件

(1)新增一个组件

复制HelloWorld.vue文件,改名为 NewsList.vue并打开编辑里面的代码

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'NewsList',
  data () {
    return {
      msg: '这是一个新闻列表组件'
    }
  }
}
</script>

(2)配置组件的路由地址

打开 /router/index.js,编辑里面的代码如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NewsList from '@/components/NewsList'

Vue.use(Router)

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

上述代码中 /news_list 就是新增组件的路由地址,在浏览器中可以通过这个地址访问到组件

 

5、访问组件

在浏览器打开:http://localhost:8080/#/news_list ,就可以访问到新增的组件 NewsList

07 Vue组件化:创建组件、访问组件

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

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/10483.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!