Vue.js入門教程
Vue官網
Vue.js是漸進式JavaScript 框架，是一套構建用戶界面的漸進式框架。也可以說Vue.js 是一個用來構建網頁界面的 JavaScript 庫。
Vue的常用使用方式有兩種：
一、使用<script>標籤（標記）引入。可以使用CDN（Content Delivery Network，即內容交付網絡）庫（框架）。也可以下載到本地。
二、使用命令行界面（CLI，command-line interface）工具。使用CLI 工具需要用戶對 Node.js 和相關構建工具有一定程度的瞭解。
先介紹第一種
嘗試 Vue.js 最簡單的方法是可以創建一個 .html 文件，然後通過如下方式引入 Vue：
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
使用Vue 的網頁源碼，結構大致如下：
<!DOCTYPE html>
<html>
<head>
<!-- 加載庫 -->
<script src="……“></script>
</head>
<body>
<div id="……">
<p>{{ message }}</p>
</div>
<script>
// ** Our code goes here! **
</script>
</body>
</html>
下面給出幾個例子。
實例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
將上面代碼，保存文件名爲實例1.html，用瀏覽器打開運行結果如下圖：
說明：
每個 Vue 應用都需要通過實例化 Vue 來實現。
語法格式如下：
var vm = new Vue({
// 選項
})
可以看到在 Vue 構造器中有一個el 參數，它是 DOM 元素中的 id。在上面實例中 id 爲 vue_det，在 div 元素中：
<div id = "vue_det"></div>
data 用於定義屬性，上面實例中有一個message
可以使用methods定義的函數，可以通過 return 來返回函數值。上面例中未用到。可參見下面的例子：
實例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="vue_det">
<h1>Title : {{Title}}</h1>
<h1>Explain : {{Explain}}</h1>
<h2>{{details()}}</h2>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
Title: "簡易教程",
Explain: "這僅是一個簡單說明"
},
methods: {
details: function() {
return this.Title + " ——幫你用技術實現夢想！";
}
}
})
</script>
</body>
</html>
將上面代碼，保存文件名爲實例2.html，用瀏覽器打開運行結果如下圖：
說明：
vue的用法:
1、引包 例如 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、啓動 new Vue() 其中options（選項）參數有 el、template、data等，說的具體點：
new Vue({el:目的地，
template：模板內容，
data: {
……
},
methods: {
……
}
)
插值表達式：格式 {{表達式}}
支持字符串{{''}}、對象{{object.key}}、判斷後的布爾值{{true}}、三元表達式{{a==b?'正確':'錯誤'}}
v-text其實就是給元素的innerText屬性賦值，只能用在雙標籤中。
v-html就是給元素的innerHTml賦值，它會替代顯示對應的數據對象上的值。當綁定的數據對象上的值發生改變，插值處的內容也會隨之更新。
常用的vue指令有v-model, v-show, v-if, v-for, v-on, v-bind等
Vue還提供了一些有用的實例屬性與方法，它們都有前綴 $，以便與用戶定義的屬性區分開來。
實例3
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue實例</title>
<!-- <script src="./vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleClick">
{{message}}
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
data: {
message: 'hello world'
},
methods: {
handleClick: function () {
alert("hello")
}
}
})
</script>
</body>
</html>
將上面代碼，保存文件名爲實例3.html，用瀏覽器打開運行結果如下圖：
作爲初學者，建議用第一種方法學習，因爲較簡便。推薦幾個進一步學習網頁：
Vue實戰項目開發--vue基礎精講
https://blog.csdn.net/wo_921110/article/details/80621615
vue快速入門的三個小實例
https://blog.csdn.net/qq_40479190/article/details/78649212
下面介紹第二種，又分爲：命令行創建和可視化創建
使用CLI 工具需要用戶對 Node.js 和相關構建工具有一定程度的瞭解。
準備條件，要下載安裝vue首先得下載安裝node.js。
檢測是否安裝node.js
在CMD中使用以下命令來查看當前的 Node 版本：
node -v
說明沒安裝，Node.js 安裝包及源碼下載地址爲：
https://nodejs.org/en/download/
雙擊下載後的安裝包，比較簡單就不多說了（需要留意的是安裝路徑，默認是C:\Program Files\nodejs）。
如果顯示類似如下
說明OK。
Webpack 是一個前端資源的打包工具，它可以將js、image、css等資源當成一個模塊進行打包。
CLI 服務需要 webpack，輸入webpack -v檢查是否已安裝（如果出現版本號，則說明安裝）。
【可能碰到的情況及處理措施，輸入webpack -v ，若顯示如下：
請輸入“y”，等一會兒（等出現命令行提示符>），再次輸入webpack -v
出現版本號，說明已安裝Webpack，否則輸入npm install -g webpack 安裝，安裝用時較長，請耐心等候。
】
安裝 vue-cli
命令行中輸入 npm install -g vue-cli
檢驗是否安裝成功，輸入 vue-V (注意：這裏是大寫的 “V”) 或vue --version，如果出現版本號，則說明安裝成功。
【新版3.0的Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，可通過 npm uninstall vue-cli -g卸載它。使用如下列命令安裝這個新的包：
npm install -g @vue/cli】
用第二中方法創建項目（project 工程，項目）實例，又分爲：命令行創建和可視化創建：
參見https://blog.csdn.net/qq_43495629/article/details/99693997
一）命令行創建，大體過程
在計算機創建一個項目目錄例如：d:\vueproject\，並進入該目錄
cd d:\vue-project\
輸入命令
vue create 項目名
或者， vue init webpack 項目名
vue create 和vue init webpack的區別：vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板選項可自由配置，創建出來的是vue-cli3的項目，與cue-cli2項目結構不同，配置方法不同。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板來初始化項目，webpack是官方推薦的標準模板名。
可參考
http://www.pianshen.com/article/7085143654/
https://www.e-learn.cn/content/wangluowenzhang/3340564
對此，上述兩個網頁講的很詳細，就不多說了。
二）可視化創建
命令行輸入：
vue ui
回車以後自行跳轉到這樣的一個界面
如果沒反應
原因：版本太低
版本低於3時沒有ui功能
查看版本號
vue -V
查看是否有ui功能
vue -h
看是否有
若沒有，說明沒有ui功能，解決方法：
卸載老版本：
npm uninstall vue-cli -g
安裝新版本，vue-cli的3.0+以後使用的不是vue-cli了，如果用以上的安裝命令安裝的並不是最新版的3.0+的，而如果安裝3.0的話就需要使用新的
npm install @vue/cli -g
就不給出具體的實例了，因爲上面給出的鏈接就有。
附錄、vue學習資源：
https://vuejs.bootcss.com/guide/
https://blog.csdn.net/qingmingqingxin/category_6868061.html