[Vue] 建立專案 / 變數顯示綁定 / 屬性綁定

關於 Vue 框架的使用方式

Step1. 加入 Vue 的核心函式庫

• 開發版

<!-- 包含了有幫助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

• 正式版

<!-- 優化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

source code

Step2. 加入樣板語法

• index.html

<div id="app">

    {{title}}

</div>

• index.js

var app = new Vue({

    el: '#app',

    data: {

        title: 'Hello World'

    }

})

source code

Step3. 元素屬性綁定

• index.html

<span v-bind:title="loadTime">

    滑鼠移置文字上，顯示'網頁啟動時間'

</span>

*.v-bind: 一種指令，可將變數綁定至元素屬性上

• index.js

data: {

    loadTime: '網頁啟動於:' + new Date().toLocaleString()

}

source code