Vue.js 是用於建立使用者介面的漸進式框架,也是一個建立Web的應用框架,Vue.js 核心庫主要是圖層,易於上手,也與第三方庫有項目整合,而且Vue.js 也提供較為複雜網頁應用程序驅動
首先安裝Vue.js,在安裝Vue.js前要注意,Vue.js 不支持 IE8 及其以下版本網頁閱覽器，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性,可以在google chrome網頁閱覽器使用
IE網頁閱覽器已經出到Internet Explorer 11: 官方下載
google chrome:官方下載
進入Vue.js安裝頁面,可知Vue.js是藉由
<script src="引入位址"></script>
直接引入,在下方有提供Vue.js Library載點,有分成"開發版本"與"生產版本",
開發版本包含完整的警告和調試模式,引用方式
<script src="vue.js"></script>
生產版本刪除了警告,所以容量會比開發版本小一點,引用方式
<script src="vue.min.js"></script>
Vue.js也提供Library連結網址來引入,點擊如下紅色框框,
進入下圖視窗來選擇Vue.js Library,右上角可選擇Vue.js Library版本,
點擊dist進入函示庫存放位置,
vue.js : 開發版本之完整版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
vue.runtime.js : 開發版本之運行版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.runtime.js"></script>
vue.min.js : 生產版本之完整版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>
vue.runtime.min.js : 生產版本之運行版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.runtime.min.js"></script>
vue.common.js : CommonJS之完整版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.common.js"></script>
vue.runtime.common.js : CommonJS之運行版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.runtime.common.js"></script>
vue.esm.js : ES Module之完整版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.esm.js"></script>
vue.runtime.esm.js : ES Module之運行版,引用方式
<script src="https://unpkg.com/vue@2.4.2/dist/vue.runtime.esm.js"></script>
CommonJS與ES Module可參考Vue.js安裝頁面裡的說明
接下來介紹Vue.js架構,以Hello World!!為例,需要的程式文件有helloWorld.html,helloWorld.js,helloWorld.css這三種,如下所示,
helloWorld.html程式如下,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello World!!</title>
<!--
載入helloWorld.css
-->
<link rel="stylesheet" type="text/css" href="helloWorld.css">
</head>
<body>
<!--
藉由id將helloWorld.js中的app元素內容載入
-->
<div id="app">
<!--
class="active"將helloWorld.css中的style載入
{{message}}顯示message裡的內容
-->
<div class="active">{{message}}</div>
</div>
<!--
載入vue.js開發版本之完整版
-->
<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<!--
載入helloWorld.js
-->
<script src="helloWorld.js"></script>
</body>
</html>
helloWorld.js架構如下,
/*
el:為Vue.js的元素
data:可在這設置變數
*/
new Vue({
el:'#app',
data:{
message: 'Hello World!!'
}
});
helloWorld.css架構如下,
.active{
color:red;
font-size: 30px;
}
開啟helloWorld.html顯示結果如下,
留言列表
