Vue.js元件寫法

範例

const GreetingComponent = {
    template: `<h1>Hi, you!</h1>`,
}

new Vue({
  el: '#app',
  template: `
    <div>
        <GreetingComponent/>
    </div>
  `,
  components: { GreetingComponent },
});

Single File Components

為了模組化畫面,使用者可以把畫面做切割,並以附檔名 .vue 儲存。要注意的是,單檔內的變數都是local,並非全域變數。

<!-- ./src/App.vue -->
<template>
  <div id="app">
    <img src="./assets/hello.png">
  </div>
</template>

<script>
export default {
  name: 'app',
};
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// 也可以用這種方式撰寫,將程式碼與css分開到不同檔案中,方便管理
<!-- ./src/App.vue -->
<template>
  <div id="app">
    <img src="./assets/hello.png">
  </div>
</template>
<script src="./src/app.js"></script>
<style src="./src/app.css"></style>

若是要使用外部的變數,可以由下列方式傳入:

Vue.component('product', {
  template: '<div class="card">...</div>'
})