製作Vue元件

認識Vue元件

通常一個Vue元件分為三個部分

template區塊(html) -　用來顯示render網頁的部分
script區塊(js) - 用來撰寫預設的物件、傳進元件的值，或其他js等
style區塊(css) - 用來調整此元件的CSS

例如：

Hello.vue

<!-- template區塊(html) -->
<template>
  <div class="hello"> <!-- 注意: 這裡要跟元件同名 -->
    <h1>{{ msg }}</h1>
  </div>
</template>

<!-- script區塊(js) -->
<script>
export default {
  name: 'hello',  // 注意: 這裡要跟元件同名
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- style區塊(css) -->
<style scoped>
h1 {
  font-family: '微軟正黑體'
}
</style>

這邊要注意的是，在『template區塊』中，元件的名稱會被寫在<div>的class中，如<div class="hello">，而在『script區塊』中，元件名稱也會綁定在name，如：name: 'hello'，如此一來此元件才能正確運作。

修改及新增元件

目標
- 建立兩個元件: home 及 blog
- 建立一個導覽列: home 和 blog 兩個超連結，分別連至兩個元件顯示

步驟

到 src/index.js

  import Home from '@/components/Home'  //前後的 Hello 都改成 Home

  routes: [
    {
      path: '/',
      name: 'Home',   //'Hello' 改成 'Home'
      component: Home   //Hello 改成 Home
    },
  ]

更名 src/components/Hello.vue 改為 src/components/Home.vue

到 src/components/Home.vue

  <template>
    <div class="home"> <!-- "hello" 改為 "home" -->
      <h1></h1>
    </div>
  </template>

  export default {
    name: 'home',  //'hello' 改為 'home'
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }

這時候首頁應該又可以正常顯示了，這樣就把元件改為home了接下來我們再新增一個blog的元件，從src/components/Home.vue複製到src/components/Blog.vue，然後我們調整裡面的文字顯示

  export default {
    name: 'blog',
    data () {
      return {
        msg: 'Hello this is blog'  //改成這樣
      }
    }
  }

再到src/index.js把import補上

  import Blog from '@/components/Blog'

然後我們在router新增一個/blog的連結

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

接下來到一開始template生成的地方，也就是App.vue，加上導覽列

  <template>
    <div id="app">
      <!--加入導覽列 start-->
      <nav>
        <router-link to="/">Home</router-link> <!--router設定的連結都使用router-link來連-->
        <router-link to="/blog">blog</router-link>
      </nav>
      <!--加入導覽列 end-->
      <router-view></router-view> <!--router顯示的地方-->
    </div>
  </template>

如果寫過rails或laravel的人，這樣應該比較好理解：

<router-view></router-view> 相當於 rails 中的 <%= yield %>

<router-view></router-view> 相當於 laravel 中的 @yield('content')

現在首頁就有兩個按鈕的導覽列，按下去可以分別前往home及blog，並會在router-view中顯示不同頁面(文字)

製作元件

製作Vue元件

認識Vue元件

修改及新增元件

results matching ""

No results matching ""