Vue.js隨筆二(新建路由+component+添加樣式+變量的顯示)

創建一個頁面：

 1.首先讓我們看一下整個vue.js的目錄，如下圖所示：

               

 2.現在讓我們創建一個頁面吧：

 2-1首先你需要新建路由（就和建立一個如何找到項目文件的目錄一個意思）:進入src/router/index.js修改即可

import Vue from 'vue'
import Router from 'vue-router'

//就拿下面這行作比方，下面這行就相當於引入Say這個component
import SayHi from '@/components/SayHi'

Vue.use(Router)

export default new Router({
  routes: [
      //下面這幾行，表示定義 /#/say_hi這個url
    {
      path: '/say_hi',  //對應一個url
      name: 'SayHi',    //Vue.js內部使用的名字，這個建議和component取一樣的
      component: SayHi  //對應的.vue頁面的名字，就是你的SayHi.vue去掉后面的拓展名就好
    },
  ]
})

 2-2然后就可以創建一個Component了(如下)：你所創建的.vue全部都放在src/components目錄里哦

<template>
  <div class='hi'>
    Hi Vue!   //注意內容一定要放在div里，否則是錯誤的
  </div>
</template>

<script>
export default {
  data () {
    return { }
  }
}
</script>

<style>
</style>

 

2-3這樣一個簡單的頁面就做好了，此時只需在瀏覽器中輸入如下圖所示的url就可以了，博主用的是8081端口，顏色先不用管博主只是加了個css，后面會講到：

3.為頁面添加樣式style：

3-1還是上面的component只需要做簡單的添加即可(在style里面寫上css內容就好)，標紅的地方，其他地方不用動:

<template>
  <div class='hi'>
    Hi Vue!
  </div>
</template>

<script>
export default {
  data () {
    return { }
  }
}
</script>

<style>
.hi {
  color: red;
  font-size: 20px;
}
</style>

3-2然后頁面就會同你的style里的css設置得而改動啦

4.現在讓我們看看如何定義並顯示變量：{{變量名}}即為顯示變量

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: '你好Vue! 本消息來自於變量' //設置變量
    }
  }
}
</script>

<style>
</style>

4-2然后打開瀏覽器輸入對應的url地址就可以出來啦，如下圖所示: