vue组件的开发使用-组件的创建

一、创建helloworld.vue组件

<template>   <div>   <h1>{{msg}}</h1>   </div> </template> <script>  export default{    name: 'hello',    data () {      return {        msg: '你好，世界，这是第二页'      }    }  } </script> <style>  h1{   font-weight: normal;  } </style>

 

二、创建一个页面级组件test.vue

<template> <div>    <h1>{{msg}}</h1>    <HelloWorld></HelloWorld> </div> </template> <script>   import HelloWorld from '@/components/HelloWorld'   export default{     name: 'test',     components: { HelloWorld },     data () {       return {         msg: '亲爱的，这是第一页'       }     }   } </script> <style> h1{  font-weight: normal; } </style>

三、在router路由的index.html中配置路由

import Vue from 'vue' import Router from 'vue-router' import test from '@/views/test' Vue.use(Router) export default new Router({   routes: [     {       path: '/',       name: 'test',       component: test     }   ] })

四、打开localhost:8080，看到效果

转载于:https://my.oschina.net/rifa/blog/1592120