1. 程式人生 > >Vue第一個簡單的例子

Vue第一個簡單的例子

light port 項目 outer index 運行 template () size

一、新建一個項目

技術分享圖片

二、對新建的項目文件進行修改

1、首先在components目錄下添加HelloVue.vue文件

<template>
  <div id="vue">Hello Vue {{message}}</div>
</template>

<script>
export default { //這裏需要將模塊引出,可在其他地方使用
  name: ‘HelloVue‘,
  data () {
    return {
      message: ‘xxx‘
    }
  }
}
</script>

<style>
  #vue {
    color: green;
    font-size: 28px;
  }
</style>

  

2、在HelloWorld.vue內容中添加

    <h1>
      <router-link to="day01">HelloVue</router-link>
    </h1>

  

3、在index.js文件進行相應的修改

技術分享圖片

4、運行結果

技術分享圖片

Vue第一個簡單的例子