Vue詳細的入門筆記
一、 前言
最近找了些教程，順帶著趴在官網(wǎng)上，看了看 Vue 的一些內(nèi)容，入門的一些概念，以及基礎(chǔ)語法，還有一些常用的操作，瞄了一眼，通篇文字+貼了部分代碼 9000 多字，入門語法什么的還是很好理解的，以前也有一定做小程序的基礎(chǔ)，感覺還是很相似的，不過對于一些稍復(fù)雜的點，感覺還是總結(jié)的不夠細致，例如插槽，和計算屬性等，平時前端的東西看的也不是很多，學(xué)習(xí)過程中整理的筆記，和大家一起分享交流！歡迎各位大大交流意見~
二 、初始 Vue
(一) Vue 概念理解
(1) Vue.js 是什么
Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。
(2) 漸進式框架是什么
看了一些教程以及文章，簡單理解的漸進式框架就三個字【不強求】，Vue并不強求你用它的所有內(nèi)容（功能特性），用戶完全可以根據(jù)自己情況進行選擇，使用其部分即可。
這一塊某乎上有一個比較好的答案，很容易度娘到，貼了部分
vue即主張較少，也就是說可以在原有系統(tǒng)上面，引入vue直接就可以當jquery用，使用 vue，你可以在原有大系統(tǒng)的上面，把一兩個組件改用它實現(xiàn)，當 jQuery 用；也可以整個用它全家桶開發(fā)
(二) MVVM 架構(gòu)
正式學(xué)習(xí) Vue 前我們首先還需要了解一個基于前端的架構(gòu)模式，也就是 MVVM ，它是 Model-View-ViewMode 的簡寫，其關(guān)系簡單的描述為下圖：
Model（模型層）：表示 Javascript 數(shù)據(jù)對象
View（視圖層）：表示 DOM，也可以簡單理解為前端展示的內(nèi)容
ViewModel：連接視圖和數(shù)據(jù)，即用于雙向綁定數(shù)據(jù)與頁面
在 MVVM 架構(gòu)中，視圖和數(shù)據(jù)是沒有辦法直接進行溝通的，只能通過 ViewModel 來做一個中間關(guān)系，ViewModel 可以觀察到數(shù)據(jù)的變化，然后更新視圖內(nèi)容，亦或者監(jiān)聽到視圖的變化，并能通知數(shù)據(jù)發(fā)生改變
后面我馬上會寫一個入門的小案例，可以一起來體會一下它的特點！
(三) Vue 的優(yōu)點
1、體積小
壓縮后33K
2、更高的運行效率
基于虛擬dom一種可以預(yù)先通過 javascript 進行各種計算,把最終的 DOM操作計算出來并優(yōu)化的技術(shù)，由于這個DOM操作屬于預(yù)處理操作，并沒有真實的操作DOM，所以 叫做虛擬DOM。
3、雙向數(shù)據(jù)綁定
讓開發(fā)者不用再去操作 dom 對象，把更多的精力投入到業(yè)務(wù)邏輯上
4、生態(tài)豐富、學(xué)習(xí)成本低
市場上擁有大量成熟、穩(wěn)定的基于 vue.js 的 ui 框架、常用組件！拿來即用實現(xiàn)快速開發(fā)對初學(xué)者友好、入門容易、學(xué)習(xí)資料多
(四) 入門案例
編寫 Vue 你可以選擇使用 Vscode 、 HBuilder 、sublime、Webstrom、甚至 IDEA 都是可以的，自行選擇就好了
首先我們需要引入 Vue，你可以去官網(wǎng)直接 down 下文件，進行一個本地的引入，類似引入 jQuery，或者使用一個網(wǎng)絡(luò)的引用，例如下文中，在官網(wǎng)中就可以找到這種引入或下載的地址
可以看到，引入后，我們通過 new 的這種形式創(chuàng)建了一個 Vue 的實例，其中通過 el 找到 id 值為 hello 的 div 進行綁定，在 data 中進行一個賦值，而在div 中 通過兩組大括號來對數(shù)據(jù)進行回顯
如果你有一些微信小程序的基礎(chǔ)的話，其實可以發(fā)現(xiàn)，這兩者結(jié)構(gòu)看起來似乎有一些相似的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="hello">
<h2>{{content}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello",
data:{
content: "Hello Vue!"
}
})
</script>
</body>
</html>
回顯數(shù)據(jù)肯定是沒問題的，我們試著在控制臺修改 content 的值，可以看到隨之頁面也就發(fā)生改變了
我們已經(jīng)成功創(chuàng)建了第一個 Vue 應(yīng)用！看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作?，F(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的。我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制臺 (就在這個頁面打開)，并修改 app.message 的值，你將看到上例相應(yīng)地更新。
注意我們不再和 HTML 直接交互了。一個 Vue 應(yīng)用會將其掛載到一個 DOM 元素上 (對于這個例子是 #app) 然后對其進行完全控制。那個 HTML 是我們的入口，但其余都會發(fā)生在新創(chuàng)建的 Vue 實例內(nèi)部?！?Vue 官網(wǎng)
三 、Vue 基本語法
(一) 聲明式渲染
如果有接觸過 Thymeleaf 這樣的模板，你可以看出來，上面的 Vue 案例就是采用了一個簡潔模板語法，即兩組大括號包裹值，來聲明式聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)，這其實和 Thymeleaf 中的 $ 加一組大括號 是相似的
我們還有一種綁定元素的方式：即使用指令
<div id="hello-2">
<span v-bind:title="content">
鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-2",
data:{
content: '頁面加載于 ' + new Date().toLocaleString()
}
})
</script>
觀察結(jié)果，我們將鼠標懸停在文字上方，被綁定的數(shù)據(jù)就會出現(xiàn)
你看到的 v-bind attribute 被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute，代碼的意思就是將這個元素節(jié)點的 title attribute 和 Vue 實例的 content property 保持一致”
如果你在控制臺進行修改 vm.content 的值，綁定的數(shù)據(jù)依舊會發(fā)生變化
注：使用 v-bind 需要頭部引入一個約束
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
如果使用 IDEA 安裝 Vue.js 插件 會有提示補全
(二) 條件判斷
條件判斷使用的指令就是 v-if 、v-else-if、v-else
來看兩個例子，首先是對于 true 或者 false 的判斷
<div id="hello-3">
<h2 v-if="isBoy">是男孩</h2>
<h2 v-else>是女孩</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-3",
data:{
isBoy: true
}
})
</script>
默認顯示是男孩，我們接著在控制臺修改為false
接著是對于值的判斷，我們拿一個比較成績的小例子，不過對數(shù)值的約束還是不夠嚴謹?shù)?，僅僅為了講解 if 這個例子，明白意思就行
<div id="hello-3">
<h2 v-if="score < '60'">成績不及格</h2>
<h2 v-else-if="score >= '60' && score < '80'">成績及格</h2>
<h2 v-else>成績優(yōu)秀</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-3",
data:{
score: 66
}
})
</script>
在結(jié)果中繼續(xù)修改看看
(三) 循環(huán)
通過 v-for 就可以進行循環(huán)遍歷，真例如 java 中的 增強for 只不過是把 冒號 換成了 in，students 對應(yīng) data 中的數(shù)組名，student 代表其中的每一項，通過 XXX.xx 的形式取出具體的屬性值
<div id="hello-4">
<li v-for="student in students">
{{student.name}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-4",
data: {
students: [{name: '張三'}, {name: '李四'}, {name: '王五'}]
}
})
</script>
試著在控制臺 push 一個新的，同樣會更新出來
說明：這里演示的只是最基本的一種情況，很多時候，若遍歷的數(shù)組中為對象，且對象有多個值，例如含有 id 這樣的值，一般會將這種唯一的 id 值作為 key 值，例如：
<div v-for="item in items" v-bind:key="item.id"> <!-- 內(nèi)容 --> </div>
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key attribute：
建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
(四) 事件綁定
經(jīng)常我們需要通過點擊一些按鈕或者標簽組件等，使得用戶可以與應(yīng)用進行交互，也就是進行事件綁定，在 Vue 中我們可以通過 v-on 指令添加一個事件監(jiān)聽器來進行
注：使用 v-on 引入約束
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
示例代碼
<div id="hello-5">
<button v-on:click="helloWorld">你好世界</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-5",
data: {
content: "Hello World ！"
},
methods: {
helloWorld: function () {
alert(this.content);
}
}
})
</script>
可以看到，通過 v-on:click 就將 helloWorld 這個事件綁定了，而事件的具體邏輯需要定義在 Vue 對象的 methods 中
(五) 雙向綁定
早在開篇介紹 MVVM 架構(gòu)模式的時候，圖中就提到了 View 和 ViewModel 之間的雙向綁定，通俗的說就是：當數(shù)據(jù)發(fā)生變化時，視圖也變化，而當視圖發(fā)生變化的時候，數(shù)據(jù)也跟著變化
其實在前面的基本語法中，我們已經(jīng)能很明顯的體會到了前半句，即修改 data 中的數(shù)據(jù)，從而引起視圖中的變化，我們這里就重點提一下后半句
首先，Vue 提供了 v-model 指令，它能輕松實現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
從常見的表單中的幾種形式來講，我們可以使用 v-model 指令在表單的 input 、textarea>、select 等上進行數(shù)據(jù)的雙向綁定，它可以根據(jù)控件類型選取正確的方法來更新元素
不過使用 v-model 指令后會忽略表單原先的 value、checked、selected 等的初始值，而總將 Vue 實例中的數(shù)據(jù)最為數(shù)據(jù)源
input 中 ，輸入文本
<div id="hello-6">
輸入: <input type="text" v-model="content" > 輸出: {{content}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-6",
data: {
content: "Hello World ！"
},
})
</script>
在輸出的位置使用兩組大括號進行 content 這個值的回顯我們之前就已經(jīng)能做到了，而我們在 input 的屬性中使用 v-model 進行對于 content 的綁定，這樣就可以使得輸入框中輸入的值可以直接影響 data 中 content 的值，即隨著你 input 中輸入值的修改，隨之輸出位置的內(nèi)容也會變化
input 中 ，單選框
<div id="hello-6">
性別:
<input type="radio" name="gender" value="男" v-model="gender">男
<input type="radio" name="gender" value="女" v-model="gender">女
輸出: {{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-6",
data: {
gender: '男'
},
})
</script>
效果顯示
select 中
<div id="hello-6">
<select v-model="choose">
<option value="" disabled>---請選擇---</option>
<option>A-蘋果</option>
<option>B-櫻桃</option>
<option>C-西瓜</option>
</select>
輸出: {{choose}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: "#hello-6",
data: {
choose: ''
},
})
</script>
(六) Vue組件
Vue 中組件也是一個很重要的概念，例如一個頁面中，頭部、底部、側(cè)邊欄、主內(nèi)容區(qū) 都可以看做一個一個組件，不過有一些組件是固定的，例如頭部，還有一些是變換的例如內(nèi)容區(qū)
Vue 中就允許我們使用小型、獨立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用
注：實際都是創(chuàng)建 .vue 模板文件，并不會用直接在頁面中書寫的這種形式，僅為講解方便
直接拿一個簡單，不過還算相對完善的案例來進行講解‘
先說一下最終我們想干嘛，例如 div 或者 input 等等 都是一個一個標簽，我們現(xiàn)在向做的就是通過創(chuàng)建自定義組件模板，自定義出一個這樣的標簽，我們在需要的地方只需要引用這個標簽，我們就可以達到顯示出模板中想要的效果，達到抽取復(fù)用的效果
首先使用 Vue.component....... 這樣的格式創(chuàng)建組件，在其中 ideal-20 就是組件標簽的名字， template 就代表模板中的內(nèi)容，props 代表我們在引用處傳入的參數(shù)名
接著在一個已經(jīng)綁定好的 hello-7 的 div 中引入自定義組件標簽 ideal-20，而我們想要遍歷 data 中的 fruits 數(shù)組，在 ideal-20 屬性中進行 for 遍歷即可，同時我們需要將每一項通過 v-bind:ideal="item" 綁定參數(shù)到組件模板中，因為數(shù)組不是一個普通的數(shù)組，所以賦 id 為 key值
<div id="hello-7">
<ideal-20 v-for="item in fruits" v-bind:ideal="item" v-bind:key="item.id"></ideal-20>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
// 定義名為 todo-item 的新組件
Vue.component('ideal-20', {
props: ['ideal'],
template: '<li>{{ideal.name}}</li>'
})
var vm = new Vue({
el: "#hello-7",
data: {
fruits: [
{id: 0, name: '蘋果'},
{id: 1, name: '櫻桃'},
{id: 2, name: '山竹'}
]
}
})
</script>
效果展示
(七) Axios 入門
首先我們需要提一下，為什么要用這個東西呢？
我們在以前傳統(tǒng)的開發(fā)中，我們一般會使用 Ajax 進行通信，而 Vue,js 作為一個視圖層框架，并不支持 Ajax 的通信功能，所以可以使用 Axios 來實現(xiàn) Ajax 的異步通信
首先看一下它的特點：
- 從瀏覽器中創(chuàng)建 XMLHttpRequests
- 從 node.js 創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應(yīng)
- 轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)
- 取消請求
- 自動轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防御 XSRF
首先我們拿一段 json 來模擬數(shù)據(jù)
{
"name": "BWH_Steven",
"blog": "www.ideal-20.cn",
"about": {
"country": "中國",
"phone": "13888888888"
},
"students": [
{
"id": 0,
"name": "張三"
},
{
"id": 1,
"name": "李四"
},
{
"id": 2,
"name": "王五"
}
]
}
通過下圖我們就可以知道 我們可以將代碼寫到 mounted() 中去
接著就是使用的代碼了
首先除了引入 Vue 還需要引入 Axios 的 CDN，在 mounted() 方法中，去拿到這個json文件，同時將 response.data 也就是拿到的值，賦值給我們在 data() 中定義的 info 中
注意：data 和 data() 是不一樣的
接著在綁定好的 hello-8 div 中就可以調(diào)用回顯了
說明：為什么給 v-clock 添加了一個樣式呢，這是因為，顯示數(shù)據(jù)的過程是先顯示出{{info.name}} 這樣的字樣，拿到值后，再去渲染，如果網(wǎng)速慢的情況下可以看到 info.name 的，體驗不是很好
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-clock] {
display: none;
}
</style>
</head>
<body>
<div id="hello-8" v-clock>
<div>{{info.name}}</div>
<div>{{info.blog}}</div>
<div>{{info.about.country}}</div>
<div>{{info.about.phone}}</div>
<div>{{info.students[0].name}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#hello-8",
data() {
return {
info: {}
}
},
mounted() {
axios.get("../json/data.json").then(response => (this.info = response.data));
}
})
</script>
</body>
</html>
(八) 計算屬性
這一段，我認為官方文檔說的還是比較清楚的
模板內(nèi)的表達式非常便利，但是設(shè)計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在這個地方，模板不再是簡單的聲明式邏輯。你必須看一段時間才能意識到，這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當你想要在模板中多包含此處的翻轉(zhuǎn)字符串時，就會更加難以處理。
所以，對于任何復(fù)雜邏輯，你都應(yīng)當使用計算屬性。
<div id="hello-9">
<p>原始數(shù)據(jù): "{{ message }}"</p>
<p>翻轉(zhuǎn)數(shù)據(jù): "{{ reversedMessage }}"</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
var vm = new Vue({
el: '#hello-9',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
})
</script>
結(jié)果：
原始數(shù)據(jù): "Hello"
翻轉(zhuǎn)數(shù)據(jù): "olleH"
這里我們聲明了一個計算屬性 reversedMessage。我們提供的函數(shù)將用作 property vm.reversedMessage 的 getter 函數(shù)：
console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'
你可以打開瀏覽器的控制臺，自行修改例子中的 vm。vm.reversedMessage 的值始終取決于 vm.message 的值。
你可以像綁定普通 property 一樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發(fā)生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計算屬性的 getter 函數(shù)是沒有副作用 (side effect) 的，這使它更易于測試和理解。
計算屬性和方法的區(qū)別 ？
看到這里，你會不會覺得，貌似我用方法也可以實現(xiàn)這種效果啊，將具體的業(yè)務(wù)邏輯放在定義的方法中，但是他們最大的區(qū)別是計算屬性是基于它們的響應(yīng)式依賴進行緩存的，也就是說，我們上文中所依賴的 message 不發(fā)生改變，reversedMessage 會馬上獲取之前的結(jié)果，就不用再次執(zhí)行函數(shù)了，計算屬性可以幫我們節(jié)省大量的性能開銷，不過如果我們并不希望出現(xiàn)緩存內(nèi)容，就可以使用方法來代替它
(九) 插槽 Slot
在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文檔中的 attribute。新語法的由來可查閱這份 RFC。
這塊寫的太淺了，不看也罷
插槽就是子組件給父組件一個占位符即 <slot></slot> 父組件就能在這個占位符，填一些模板或者 HTML 代碼
簡單點理解就是組件套組件
就像下面我定義了三個組件，ideal是父組件，在其中用 slot 進行占位，同時用 name 屬性指向到了這兩個子組件 ideal-title 和 ideal-content，而為了子組件中顯示的數(shù)據(jù)來自服務(wù)器（模擬）所以需要動態(tài)地顯示，即通過傳參（前面講解組件模板有說過），配合遍歷等讀出 data 中的數(shù)據(jù)即可
<div id="hello-10">
<ideal>
<ideal-title slot="ideal-title" v-bind:title="title"></ideal-title>
<ideal-content slot="ideal-content" v-for="contentItem in contents" v-bind:content="contentItem"></ideal-content>
</ideal>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
Vue.component("ideal", {
template: '<div>\
<slot name="ideal-title"></slot>\
<ul>\
<slot name="ideal-content"></slot>\
</ul>\
</div>'
})
Vue.component("ideal-title", {
props: ['title'],
template: '<div>{{title}}</div>'
})
Vue.component("ideal-content", {
props: ['content'],
template: '<li>{{content}}</li>'
})
var vm = new Vue({
el: '#hello-10',
data: {
title: "理想二旬不止",
contents: ["Java", "Linux", "數(shù)據(jù)庫"]
}
})
</script>
結(jié)果如下：
四、 Vue 入門
(一) 創(chuàng)建 Vue-cli 項目
Vue-cli 是官方提供的一個用于快速創(chuàng)建 Vue 項目的腳手架，可以簡單的理解為 Maven ，即創(chuàng)建時選擇一個骨架那種感覺，能讓開發(fā)更加便捷
(1) 準備
A：安裝 Node.js
Node.js 去官網(wǎng)或者中文網(wǎng)進行下載
cmd 下輸入 node -v ，出現(xiàn)版本號即正常，輸入 npm -v 同樣出現(xiàn)版本號即正常
將 Node.js 的鏡像調(diào)整為淘寶鏡像加速（cnpm）
# -g 代表全局安全 推薦此方法 npm install cnpm -g # 還有一種辦法就是每次使用 npm 都在后面加一串字符串，不推薦 npm install --registry=https://registry.npm.tabao.org
安裝后打開此路徑（abc是我這臺機器的用戶名，根據(jù)自己的來）：
C:\Users\abc\AppData\Roaming\npm\node_modules
正常情況下里面會有安裝好的 cnpm，接著我們就開始安裝 vue-cli
B：安裝 vue-cli
cnpm install vue-cli -g
安裝后在 npm 文件夾下打開 cmd 輸入 vue-list ，若出現(xiàn)下圖這種星狀內(nèi)容，則完畢
C：創(chuàng)建 vue-cli 程序
自己在想要的位置創(chuàng)建一個目錄，選擇基于 webpack 的 vue 應(yīng)用程序
此文件夾下的 cmd 中輸入命令
vue init webpack vue_02_myvue
輸入一些基本信息，例如 項目名 作者名
下面的內(nèi)容如果有選項的回車配合 n（也就是no）進行
這時，它會詢問你是否自動執(zhí)行 npm install（如下），是的話則會自動安裝一些依賴，點擊否，需要自行再輸入命令安裝，所以選擇是就行了
Should we run npm install for you after the project has been created? (recommended) npm
完成之后，項目中的 node_modules 就會多出很多很多依賴
再接著，它又會提醒初始化好了，你如果想啟動就可以執(zhí)行這兩條，第一句是從外面的文件夾進入到我自定義的那個項目文件夾中，第二句則是啟動
出現(xiàn)如果所示內(nèi)容則啟動成功，通過后面的地址和端口就可以訪問
找個編輯器看一下，我用 IDEA Open進這個文件夾來，就可以進行修改了，具體的代碼文件還是在 src 目錄下，同時還可以配置 IDEA 的 Terminal 為有管理員權(quán)限的 cmd 或者終端，能更便捷一些
如何快速創(chuàng)建項目
可以通過 HBuilder 進行相對快速的創(chuàng)建項目，其新建中直接就可以創(chuàng)建 vue 項目 以及終端運行
在想創(chuàng)建項目的目錄下終端輸入 vue ui 進入圖形界面（此方法需要 vue-cli 版本為 3.x ，通過 vue --version 查詢到 vue-cli 的版本 例如為 2.9.6 是不能使用的，可用的命令可以通過 vue -h 查看 ）
(二) 簡單認識 Webpack
(1) 認識安裝
蓋菜我們創(chuàng)建 vue 項目的時候，選擇的是 webpack 進行打包，但是都是自動化的過程，我們手動的操作一下，能更好的理解
webpack是一個現(xiàn)代 Javascript應(yīng)用程序的靜態(tài)模塊打包器( module bundler)。當webpack處理應(yīng)用程序時,它會遞歸地構(gòu)建一個依賴關(guān)系 Dependency graph),其中包含應(yīng)用程序需要的毎個模塊,然后將所有這些模塊打包成一個或多個 bundle
webρack是當下最熱門的前端資源模塊化管理和打包工具,它可以將許多松散耦合的模塊按照
依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分離,等到實際
需要時再異步加載。通過 loader轉(zhuǎn)換,任何形式的資源都可以當做模塊,比如 Commonis、AMD、ES6、CSS、JSON、 Coffee Script、LESS等;
安裝 webpack、webpack-cli ，如果 npm 不太慢先考慮使用 npm 再考慮使用 cnpm
cnpm install webpack -g cnpm install webpack-cli -g
通過 webpack -v 、webpack-cli -v 查看是否出現(xiàn)版本號確定安裝是否成功
(2) 使用 webpack
創(chuàng)建項目（IDEA 的話，直接創(chuàng)建一個普通文件夾 Open進入就行了）
新建一個 modules 目錄，放置 JS 模塊等內(nèi)容
在 modules 下創(chuàng)建模塊文件，例如 demo.js 用于編寫 Js 模塊相關(guān)代碼，例如
exports.test = function () {
document.write("<h2>理想二旬不止</h2>")
}
在 moduels 下創(chuàng)建 main.js ，這是一個入口文件，用于打包時設(shè)置 entry 屬性對應(yīng)
var demo = require("./demo")
demo.test();
在項目根目錄下創(chuàng)建 webpack.config.js 文件，用于配置
module.exports = {
entry: "./modules/main.js",
output: {
filename: "./js/bundle.js"
}
};
在 terminal 中輸入 webpack 命令進行打包（進入項目目錄后 輸入 webpack 就行了，這是運行結(jié)果）
abc@LAPTOP-5T03DV1G MINGW64 /f/develop/IdeaProjects/framework-code/vue/webpack_01_first
$ webpack
Hash: 7f61ef9440a6bab63058
Version: webpack 4.44.1
Time: 334ms
Built at: 2020-09-05 4:18:40 PM
Asset Size Chunks Chunk Names
./js/bundle.js 1020 bytes 0 [emitted] main
Entrypoint main = ./js/bundle.js
[0] ./modules/main.js 42 bytes {0} [built]
[1] ./modules/demo.js 82 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each e
nvironment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
打包后項目目錄多出 dist 文件夾 其中有一個 js 文件夾，放著打包的 js，創(chuàng)建index.html 引入此 js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="dist/js/bundle.js"></script> </body> </html>
頁面效果如下：
補充：配置文件中可能會有哪些內(nèi)容
- entry：入口文件,指定 Web Pack用哪個文件作為項目的入口
- output：輸出,指定 Web pack把處理完成的文件放置到指定路徑
- module：模塊,用于處理各種類型的文件plugins:插件,如:熱更新、代碼重用等
- resolve：設(shè)置路徑指向
- watch：監(jiān)聽,用于設(shè)置文件改動后直接打包
(三) 簡單認識 Vue Router 路由
Vue Router是 Vue.js 的官方路由器。它與 Vue.js 核心深度集成，使使用 Vue.js 輕松構(gòu)建單頁應(yīng)用程序變得輕而易舉。功能包括：
簡單的說，可以實現(xiàn)一些頁面的跳轉(zhuǎn)，例如我們頭部的內(nèi)容是不變的，內(nèi)容部分需要根據(jù)鏈接改變
- 嵌套路線/視圖映射
- 模塊化，基于組件的路由器配置
- 路由參數(shù)，查詢，通配符
- 查看由Vue.js過渡系統(tǒng)提供動力的過渡效果
- 細粒度的導(dǎo)航控制
- 與自動活動CSS類的鏈接
- HTML5歷史記錄模式或哈希模式，在IE9中具有自動回退
- 可自定義的滾動行為
安裝步驟：
由于 vue-router 是一個插件包，還是老辦法，npm/cnpm
npm install vue-router --save-dev
安裝后如果有一些問題，根據(jù)提示，輸入對應(yīng)命令即可，就像我遇到了提示輸入 npm audit fix
創(chuàng)建好項目后，刪掉默認的 HelloWorld那個組件，然后再 components 中新建兩個自定義組件，例如我創(chuàng)建的 FirstDemo.vue 和 Main.vue 前者是一個子頁面，后者代表主頁面，隨便自擬
FirstDemo.vue
<template>
<h1>第一個Demo頁面</h1>
</template>
<script>
export default {
name: "FirstDemo.vue"
}
</script>
<style scoped>
</style>
Main.vue
<template>
<h1>首頁</h1>
</template>
<script>
export default {
name: "Main.vue"
}
</script>
<style scoped>
</style>
接著創(chuàng)建 router 文件夾，以及其中的 index.js 主配置
注：如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝路由功能
import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstDemo from '../components/FirstDemo'
import Main from '../components/Main'
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
// 路由路徑
path: "/firstDemo",
name: 'firstDemo',
// 跳轉(zhuǎn)的組件
component: FirstDemo
},
{
// 路由路徑
path: "/main",
name: 'main',
// 跳轉(zhuǎn)的組件
component: Main
}
]
})
修改 main.js 這個入口文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.use(router);
/* eslint-disable no-new */
new Vue({
el: '#app',
//配置路由
router,
components: {App},
template: '<App/>'
})
以及正式的書寫頁面，引入鏈接
<template>
<div id="app">
<h1>理想二旬不止</h1>
<router-link to="/main">首頁</router-link>
<router-link to="/firstDemo">第一個Demo頁面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
(四) Vue + ElementUi 基本使用
創(chuàng)建名字為 vue_03_vue_elementui 的項目，同時安裝 vue-router、e1ement-ui、sass-loader 、node-sass 插件
# 創(chuàng)建項目 vue init webpack vue_03_vue_elementui # 進入工程目錄 cd vue_03_vue_elementui # 安裝vue-router npm install vue-router --save-dev # 安裝e1ement-ui npm i element-ui -S # 安裝依賴 npm install # 安裝SASS加載器 cnpm install sass-loader node-sass --save-dev # 啟動測試 npm run dev
補充：Npm命令解釋
npm install moduleName：安裝模塊到項目目錄下
npm install - g moduleNMame：-g 的意思是將模塊安裝到全局,具體安裝到磁盤哪個位置，要看 npm config prefix的位置
npm install - save moduleName：--save 的意思是將模塊安裝到項目目錄下，并在package文件的 dependencies 節(jié)點寫入依賴，-S為該命令的縮寫
npm install -save -dev moduleName：--save-dev 的意思是將模塊安裝到項目目錄下，并在 package 文件的 devdependencies節(jié)點寫入依賴， -D為該命令的縮寫
接著就可以在編輯器中打開了，看個人選擇，我這里用 IDEA 打開，打開后注意看一下 modules 文件夾中是否已經(jīng)把 router sass 等內(nèi)容成功安裝了
接著將默認的 HelloWorld 那個組件和默認 logo 刪掉，開始編寫代碼，創(chuàng)建一個 views 文件夾用來放視圖
創(chuàng)建 Login.vue 和 Main.vue
Login.vue
<template>
<h1>主頁面</h1>
</template>
<script>
export default {
name: "Main.vue"
}
</script>
<style scoped>
</style>
Main.vue
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">歡迎 登錄</h3>
<el-form-item label=" 賬號" prop="username">
<el-input type="text" placeholder="請輸入賬號" v-model="form.username"/>
</el-form-item>
<el-form-item label=" 密碼" prop="password">
<el-input type="password" placeholder=" 請輸入密碼" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit( 'loginForm' )">登錄</el-button>
</el-form-item>
</el-form>
<el-dialog
title="溫馨提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handLeClose">
<span>請輸入賬號和密碼</span>
<span slot="footer" class="dialog- footer">
<el-button type="primary" @click="dialogVisible = false">確定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
username: '',
password: ''
},
//表單驗證，需要在el-form-item 元素中增加prop 屬性
rules: {
username: [
{required: true, message: " 賬號不可為空", trigger: 'blur'}
],
password: [
{required: true, message: " 密碼不可為空 ", trigger: 'blur'}
]
},
//對話框顯示和隱藏
dialogVisible: false
}
},
methods: {
onSubmit(formName) {
//為表單綁定驗證功能
this.$refs[formName].validate((valid) => {
if (valid) {
//使用vue-router路由到指定頁面，該方式稱之為編程式導(dǎo)航
this.$router.push("/main");
} else {
this.dialogVisible = true;
return false;
}
});
}
}
}
</script>
<style lang="scss" scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 40px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
創(chuàng)建 router 文件夾，以及其中的 index.js，配置好跳轉(zhuǎn)內(nèi)容
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'
Vue.use(VueRouter);
export default new VueRouter({
routes: [
{
path: "/main",
component: Main
},
{
path: "/login",
component: Login
}
]
})
修改 main.js ，使用 router 和 elementui，關(guān)于 router 前面就說過，至于后者，照著官網(wǎng)起步文檔就明白了
https://element.eleme.cn/#/zh-CN/component/quickstart
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false;
Vue.use(router);
Vue.use(ElementUI);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
App.vue
<template>
<div id="app">
<h1>理想二旬不止</h1>
<router-link to="/main">首頁</router-link>
<router-link to="/login">登錄頁面</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
到這里就寫好了，我們可以開始運行了，但是運行時，我分別出現(xiàn)了如下錯誤
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
Module build failed: TypeError: this.getResolve is not a function
經(jīng)查閱后，修改項目目錄下 package.json 中的 sass-loder 的版本 從 10.0.2 到 8.0.2 到 7.3.1 才可以正常通過 npm run dev 運行
"sass-loader": "^7.3.1",
注：修改配置后需要重新 npm install 或者 cnpm install
展示一下最終效果：
點擊首頁效果：
點擊登錄頁面效果：
五 、Vue和Java數(shù)據(jù)交互簡單案例
最后，在某馬上找了一個現(xiàn)成的頁面案例，簡單搭了下后臺跑了一下，也算鞏固一下最前面的基礎(chǔ)語法，后臺就基本的 SSM ，給了三個接口方法，作為一個后端，這應(yīng)該算基本功了哇
/user/findAll 、/user/indById 、 /user/updateUser
就是簡單的查詢和一個更新操作，查詢的主體是一個用戶類，有這么幾個基本字段
public class User implements Serializable {
private Integer id;
private String username;
private String password;
private Integer age;
private String sex;
private String email;
......
}
頁面中承接的數(shù)據(jù)的關(guān)鍵代碼如下
首先是關(guān)于所有用戶數(shù)據(jù)展示的，通過一個對于 userList 的遍歷，然后通過大括號組和 X.x 的形式取出屬性值
<tr v-for="u in userList">
<td><input name="ids" type="checkbox"></td>
<td>{{u.id}}</td>
<td>{{u.username}}
</td>
<td>{{u.password}}</td>
<td>{{u.sex}}</td>
<td>{{u.age}}</td>
<td class="text-center">{{u.email}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs">詳情</button>
<button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">編輯</button>
</td>
</tr>
點擊編輯后執(zhí)行對于當前用戶的查詢方法，用于回顯，下面通過 v-model 進行與 user 的綁定（js后面給出）
<div class="box-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用戶名:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="user.username">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密碼:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="user.password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">性別:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="user.sex">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">年齡:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="user.age">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">郵箱:</label>
<div class="col-sm-5">
<input type="text" class="form-control" v-model="user.email">
</div>
</div>
</div>
</div>
要實現(xiàn)數(shù)據(jù)交互，最重要的還是定義數(shù)據(jù)，與使用 axios 進行異步請求
var vue = new Vue({
el: "#app",
data: {
user: {id: "", username: "", password: "", age: "", sex: "", email: ""},
userList: []
},
methods: {
findAll: function () {
var _this = this;
axios.get("user/findAll.do").then(function (response) {
_this.userList = response.data;
console.log(_this.userList);
}).catch(function (err) {
console.log(err);
});
},
findById: function (userid) {
var _this = this;
axios.get("user/findById.do", {
params: {
id: userid
}
}).then(function (response) {
_this.user = response.data;
$('#myModal').modal("show");
}).catch(function (err) {
});
},
update: function (user) {
var _this = this;
axios.post("user/updateUser.do", _this.user).then(function (response) {
_this.findAll();
}).catch(function (err) {
});
}
},
created() {
this.findAll();
}
});
上述代碼其實很好理解，首先定義了 user 和 userList 兩個數(shù)據(jù)，userList 就是前面展示所有用戶數(shù)據(jù)的一個遍歷內(nèi)容，用來承載 findAll 后的數(shù)據(jù)，user 則是對于進行單個用戶查詢，即修改時回顯當前用戶舊信息的一個承載實體，因為查詢所有的操作是一開始就進行，所以在 created() 中就執(zhí)行 findAll 方法，在 methos 中創(chuàng)建查和改的方法，通過 axios 進行 get 或者 post 請求，同時將返回的結(jié)果進行處理
說明：.then 中的是請求成功后執(zhí)行的內(nèi)容，.catch 中是請求失敗后執(zhí)行的內(nèi)容
注意：最關(guān)鍵的一個內(nèi)容就是在 axios 前定義了 var _this = this 如果有接觸過小程序可能會感到很熟悉，這里定義的原因是因為 例如在 axios 中有這樣的語句 _this.userList = response.data; 如果 userList 中前直接使用 this，這就代表著查找 axios 中的此內(nèi)容，但我們明顯想指代的是 data 中的 userList，所以此定義 _this 步驟不可省略
效果如下：
查詢所有
查詢當前用戶以及修改
以上就是Vue詳細的入門筆記的詳細內(nèi)容，更多關(guān)于Vue入門筆記的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要介紹了Vue.js的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
本篇文章主要介紹了淺談vue項目如何打包扔向服務(wù)器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
插槽就是子組件中的提供給父組件使用的一個占位符，用<slot></slot> 表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的<slot></slot>標簽，這篇文章主要介紹了Vue插槽的理解和使用,需要的朋友可以參考下2023-03-03
這篇文章小編要與大家分享的是建立和維護大型 Vue.js 項目的 10 個最佳實踐，需要的小伙伴請和小編一起學(xué)習(xí)下面文章的具體內(nèi)容吧2021-09-09
基于Vue3和Plotly.js實現(xiàn)交互式3D圖
這篇文章主要介紹了基于Vue3和Plotly.js實現(xiàn)交互式3D圖,本代碼旨在為數(shù)據(jù)可視化提供一個交互式圖表,允許用戶動態(tài)控制圖表中線條的顏色和可見性,此功能對于探索大型數(shù)據(jù)集或突出特定數(shù)據(jù)子集非常有用,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了vue清空form對象的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue使用mind-map實現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個前端框架構(gòu)建的思維導(dǎo)圖組件或庫,它可以幫助開發(fā)者在Web應(yīng)用中創(chuàng)建動態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下2024-07-07
Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的解決方法
這篇文章主要介紹了Vue3+Element-Plus使用Table預(yù)覽圖片發(fā)生元素遮擋的問題分析和解決方法,文中通過代碼示例講解的非常詳細,對大家解決問題有一定的幫助,需要的朋友可以參考下2024-04-04
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
詳解Vue.js 作用域、slot用法（單個slot、具名slot）
這篇文章主要介紹了Vue.js 作用域、slot用法（單個slot、具名slot）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10