Vue詳細(xì)的入門筆記
最近找了些教程，順帶著趴在官網(wǎng)上，看了看 Vue 的一些內(nèi)容，入門的一些概念，以及基礎(chǔ)語(yǔ)法，還有一些常用的操作，瞄了一眼，通篇文字+貼了部分代碼 9000 多字，入門語(yǔ)法什么的還是很好理解的，以前也有一定做小程序的基礎(chǔ)，感覺(jué)還是很相似的，不過(guò)對(duì)于一些稍復(fù)雜的點(diǎn)，感覺(jué)還是總結(jié)的不夠細(xì)致，例如插槽，和計(jì)算屬性等，平時(shí)前端的東西看的也不是很多，學(xué)習(xí)過(guò)程中整理的筆記，和大家一起分享交流！歡迎各位大大交流意見(jiàn)~
二 、初始 Vue(一) Vue 概念理解(1) Vue.js 是什么
Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。
(2) 漸進(jìn)式框架是什么
看了一些教程以及文章，簡(jiǎn)單理解的漸進(jìn)式框架就三個(gè)字【不強(qiáng)求】，Vue并不強(qiáng)求你用它的所有內(nèi)容（功能特性），用戶完全可以根據(jù)自己情況進(jìn)行選擇，使用其部分即可。
這一塊某乎上有一個(gè)比較好的答案，很容易度娘到，貼了部分
vue即主張較少，也就是說(shuō)可以在原有系統(tǒng)上面，引入vue直接就可以當(dāng)jquery用，使用 vue，你可以在原有大系統(tǒng)的上面，把一兩個(gè)組件改用它實(shí)現(xiàn)，當(dāng) jQuery 用；也可以整個(gè)用它全家桶開(kāi)發(fā)
(二) MVVM 架構(gòu)正式學(xué)習(xí) Vue 前我們首先還需要了解一個(gè)基于前端的架構(gòu)模式，也就是 MVVM ，它是 Model-View-ViewMode 的簡(jiǎn)寫，其關(guān)系簡(jiǎn)單的描述為下圖：
Model（模型層）：表示 Javascript 數(shù)據(jù)對(duì)象
View（視圖層）：表示 DOM，也可以簡(jiǎn)單理解為前端展示的內(nèi)容
ViewModel：連接視圖和數(shù)據(jù)，即用于雙向綁定數(shù)據(jù)與頁(yè)面
在 MVVM 架構(gòu)中，視圖和數(shù)據(jù)是沒(méi)有辦法直接進(jìn)行溝通的，只能通過(guò) ViewModel 來(lái)做一個(gè)中間關(guān)系，ViewModel 可以觀察到數(shù)據(jù)的變化，然后更新視圖內(nèi)容，亦或者監(jiān)聽(tīng)到視圖的變化，并能通知數(shù)據(jù)發(fā)生改變
后面我馬上會(huì)寫一個(gè)入門的小案例，可以一起來(lái)體會(huì)一下它的特點(diǎn)！
(三) Vue 的優(yōu)點(diǎn)1、體積小
壓縮后33K
2、更高的運(yùn)行效率
基于虛擬dom一種可以預(yù)先通過(guò) javascript 進(jìn)行各種計(jì)算,把最終的 DOM操作計(jì)算出來(lái)并優(yōu)化的技術(shù)，由于這個(gè)DOM操作屬于預(yù)處理操作，并沒(méi)有真實(shí)的操作DOM，所以 叫做虛擬DOM。
3、雙向數(shù)據(jù)綁定
讓開(kāi)發(fā)者不用再去操作 dom 對(duì)象，把更多的精力投入到業(yè)務(wù)邏輯上
4、生態(tài)豐富、學(xué)習(xí)成本低
市場(chǎng)上擁有大量成熟、穩(wěn)定的基于 vue.js 的 ui 框架、常用組件！拿來(lái)即用實(shí)現(xiàn)快速開(kāi)發(fā)對(duì)初學(xué)者友好、入門容易、學(xué)習(xí)資料多
(四) 入門案例編寫 Vue 你可以選擇使用 Vscode 、 HBuilder 、sublime、Webstrom、甚至 IDEA 都是可以的，自行選擇就好了
首先我們需要引入 Vue，你可以去官網(wǎng)直接 down 下文件，進(jìn)行一個(gè)本地的引入，類似引入 jQuery，或者使用一個(gè)網(wǎng)絡(luò)的引用，例如下文中，在官網(wǎng)中就可以找到這種引入或下載的地址
可以看到，引入后，我們通過(guò) new 的這種形式創(chuàng)建了一個(gè) Vue 的實(shí)例，其中通過(guò) el 找到 id 值為 hello 的 div 進(jìn)行綁定，在 data 中進(jìn)行一個(gè)賦值，而在div 中 通過(guò)兩組大括號(hào)來(lái)對(duì)數(shù)據(jù)進(jìn)行回顯
如果你有一些微信小程序的基礎(chǔ)的話，其實(shí)可以發(fā)現(xiàn)，這兩者結(jié)構(gòu)看起來(lái)似乎有一些相似的
<!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ù)肯定是沒(méi)問(wèn)題的，我們?cè)囍诳刂婆_(tái)修改 content 的值，可以看到隨之頁(yè)面也就發(fā)生改變了
我們已經(jīng)成功創(chuàng)建了第一個(gè) Vue 應(yīng)用！看起來(lái)這跟渲染一個(gè)字符串模板非常類似，但是 Vue 在背后做了大量工作。現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的。我們要怎么確認(rèn)呢？打開(kāi)你的瀏覽器的 JavaScript 控制臺(tái) (就在這個(gè)頁(yè)面打開(kāi))，并修改 app.message 的值，你將看到上例相應(yīng)地更新。
注意我們不再和 HTML 直接交互了。一個(gè) Vue 應(yīng)用會(huì)將其掛載到一個(gè) DOM 元素上 (對(duì)于這個(gè)例子是 #app) 然后對(duì)其進(jìn)行完全控制。那個(gè) HTML 是我們的入口，但其余都會(huì)發(fā)生在新創(chuàng)建的 Vue 實(shí)例內(nèi)部?！?Vue 官網(wǎng)
三 、Vue 基本語(yǔ)法(一) 聲明式渲染如果有接觸過(guò) Thymeleaf 這樣的模板，你可以看出來(lái)，上面的 Vue 案例就是采用了一個(gè)簡(jiǎn)潔模板語(yǔ)法，即兩組大括號(hào)包裹值，來(lái)聲明式聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)，這其實(shí)和 Thymeleaf 中的 $ 加一組大括號(hào) 是相似的
我們還有一種綁定元素的方式：即使用指令
<div id='hello-2'> <span v-bind:title='content'> 鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(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: ’頁(yè)面加載于 ’ + new Date().toLocaleString() } })</script>
觀察結(jié)果，我們將鼠標(biāo)懸停在文字上方，被綁定的數(shù)據(jù)就會(huì)出現(xiàn)
你看到的 v-bind attribute 被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊 attribute，代碼的意思就是將這個(gè)元素節(jié)點(diǎn)的 title attribute 和 Vue 實(shí)例的 content property 保持一致”
如果你在控制臺(tái)進(jìn)行修改 vm.content 的值，綁定的數(shù)據(jù)依舊會(huì)發(fā)生變化
注：使用 v-bind 需要頭部引入一個(gè)約束
<html lang='en' xmlns:v-bind='http://www.w3.org/1999/xhtml'>
如果使用 IDEA 安裝 Vue.js 插件 會(huì)有提示補(bǔ)全
(二) 條件判斷條件判斷使用的指令就是 v-if 、v-else-if、v-else
來(lái)看兩個(gè)例子，首先是對(duì)于 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>
默認(rèn)顯示是男孩，我們接著在控制臺(tái)修改為false
接著是對(duì)于值的判斷，我們拿一個(gè)比較成績(jī)的小例子，不過(guò)對(duì)數(shù)值的約束還是不夠嚴(yán)謹(jǐn)?shù)?，僅僅為了講解 if 這個(gè)例子，明白意思就行
<div id='hello-3'> <h2 v-if='score < ’60’'>成績(jī)不及格</h2> <h2 v-else-if='score >= ’60’ && score < ’80’'>成績(jī)及格</h2> <h2 v-else>成績(jī)優(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ù)修改看看
通過(guò) v-for 就可以進(jìn)行循環(huán)遍歷，真例如 java 中的 增強(qiáng)for 只不過(guò)是把 冒號(hào) 換成了 in，students 對(duì)應(yīng) data 中的數(shù)組名，student 代表其中的每一項(xiàng)，通過(guò) 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>
試著在控制臺(tái) push 一個(gè)新的，同樣會(huì)更新出來(lái)
說(shuō)明：這里演示的只是最基本的一種情況，很多時(shí)候，若遍歷的數(shù)組中為對(duì)象，且對(duì)象有多個(gè)值，例如含有 id 這樣的值，一般會(huì)將這種唯一的 id 值作為 key 值，例如：
<div v-for='item in items' v-bind:key='item.id'> <!-- 內(nèi)容 --></div>
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key attribute：
建議盡可能在使用 v-for 時(shí)提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。
(四) 事件綁定經(jīng)常我們需要通過(guò)點(diǎn)擊一些按鈕或者標(biāo)簽組件等，使得用戶可以與應(yīng)用進(jìn)行交互，也就是進(jìn)行事件綁定，在 Vue 中我們可以通過(guò) v-on 指令添加一個(gè)事件監(jiān)聽(tīng)器來(lái)進(jì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>
可以看到，通過(guò) v-on:click 就將 helloWorld 這個(gè)事件綁定了，而事件的具體邏輯需要定義在 Vue 對(duì)象的 methods 中
(五) 雙向綁定早在開(kāi)篇介紹 MVVM 架構(gòu)模式的時(shí)候，圖中就提到了 View 和 ViewModel 之間的雙向綁定，通俗的說(shuō)就是：當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，視圖也變化，而當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也跟著變化
其實(shí)在前面的基本語(yǔ)法中，我們已經(jīng)能很明顯的體會(huì)到了前半句，即修改 data 中的數(shù)據(jù)，從而引起視圖中的變化，我們這里就重點(diǎn)提一下后半句
首先，Vue 提供了 v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定
從常見(jiàn)的表單中的幾種形式來(lái)講，我們可以使用 v-model 指令在表單的 input 、textarea>、select 等上進(jìn)行數(shù)據(jù)的雙向綁定，它可以根據(jù)控件類型選取正確的方法來(lái)更新元素
不過(guò)使用 v-model 指令后會(huì)忽略表單原先的 value、checked、selected 等的初始值，而總將 Vue 實(shí)例中的數(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>
在輸出的位置使用兩組大括號(hào)進(jìn)行 content 這個(gè)值的回顯我們之前就已經(jīng)能做到了，而我們?cè)?input 的屬性中使用 v-model 進(jìn)行對(duì)于 content 的綁定，這樣就可以使得輸入框中輸入的值可以直接影響 data 中 content 的值，即隨著你 input 中輸入值的修改，隨之輸出位置的內(nèi)容也會(huì)變化
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>---請(qǐng)選擇---</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 中組件也是一個(gè)很重要的概念，例如一個(gè)頁(yè)面中，頭部、底部、側(cè)邊欄、主內(nèi)容區(qū) 都可以看做一個(gè)一個(gè)組件，不過(guò)有一些組件是固定的，例如頭部，還有一些是變換的例如內(nèi)容區(qū)
Vue 中就允許我們使用小型、獨(dú)立和通?？蓮?fù)用的組件構(gòu)建大型應(yīng)用
注：實(shí)際都是創(chuàng)建 .vue 模板文件，并不會(huì)用直接在頁(yè)面中書寫的這種形式，僅為講解方便
直接拿一個(gè)簡(jiǎn)單，不過(guò)還算相對(duì)完善的案例來(lái)進(jìn)行講解‘
先說(shuō)一下最終我們想干嘛，例如 div 或者 input 等等 都是一個(gè)一個(gè)標(biāo)簽，我們現(xiàn)在向做的就是通過(guò)創(chuàng)建自定義組件模板，自定義出一個(gè)這樣的標(biāo)簽，我們?cè)谛枰牡胤街恍枰眠@個(gè)標(biāo)簽，我們就可以達(dá)到顯示出模板中想要的效果，達(dá)到抽取復(fù)用的效果
首先使用 Vue.component....... 這樣的格式創(chuàng)建組件，在其中 ideal-20 就是組件標(biāo)簽的名字， template 就代表模板中的內(nèi)容，props 代表我們?cè)谝锰巶魅氲膮?shù)名
接著在一個(gè)已經(jīng)綁定好的 hello-7 的 div 中引入自定義組件標(biāo)簽 ideal-20，而我們想要遍歷 data 中的 fruits 數(shù)組，在 ideal-20 屬性中進(jìn)行 for 遍歷即可，同時(shí)我們需要將每一項(xiàng)通過(guò) v-bind:ideal='item' 綁定參數(shù)到組件模板中，因?yàn)閿?shù)組不是一個(gè)普通的數(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>
效果展示
首先我們需要提一下，為什么要用這個(gè)東西呢？
我們?cè)谝郧皞鹘y(tǒng)的開(kāi)發(fā)中，我們一般會(huì)使用 Ajax 進(jìn)行通信，而 Vue,js 作為一個(gè)視圖層框架，并不支持 Ajax 的通信功能，所以可以使用 Axios 來(lái)實(shí)現(xiàn) Ajax 的異步通信
首先看一下它的特點(diǎn)：
從瀏覽器中創(chuàng)建 XMLHttpRequests 從 node.js 創(chuàng)建 http 請(qǐng)求 支持 Promise API 攔截請(qǐng)求和響應(yīng) 轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù) 取消請(qǐng)求 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù) 客戶端支持防御 XSRF首先我們拿一段 json 來(lái)模擬數(shù)據(jù)
{ 'name': 'BWH_Steven', 'blog': 'www.ideal-20.cn', 'about': { 'country': '中國(guó)', 'phone': '13888888888' }, 'students': [ { 'id': 0, 'name': '張三' }, { 'id': 1, 'name': '李四' }, { 'id': 2, 'name': '王五' } ]}
通過(guò)下圖我們就可以知道 我們可以將代碼寫到 mounted() 中去
接著就是使用的代碼了
首先除了引入 Vue 還需要引入 Axios 的 CDN，在 mounted() 方法中，去拿到這個(gè)json文件，同時(shí)將 response.data 也就是拿到的值，賦值給我們?cè)?data() 中定義的 info 中
注意：data 和 data() 是不一樣的
接著在綁定好的 hello-8 div 中就可以調(diào)用回顯了
說(shuō)明：為什么給 v-clock 添加了一個(gè)樣式呢，這是因?yàn)?，顯示數(shù)據(jù)的過(guò)程是先顯示出{{info.name}} 這樣的字樣，拿到值后，再去渲染，如果網(wǎng)速慢的情況下可以看到 info.name 的，體驗(yàn)不是很好
<!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 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>(八) 計(jì)算屬性
這一段，我認(rèn)為官方文檔說(shuō)的還是比較清楚的
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。例如：
<div id='example'> {{ message.split(’’).reverse().join(’’) }}</div>
在這個(gè)地方，模板不再是簡(jiǎn)單的聲明式邏輯。你必須看一段時(shí)間才能意識(shí)到，這里是想要顯示變量 message 的翻轉(zhuǎn)字符串。當(dāng)你想要在模板中多包含此處的翻轉(zhuǎn)字符串時(shí)，就會(huì)更加難以處理。
所以，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。
<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: { // 計(jì)算屬性的 getter reversedMessage: function () {// `this` 指向 vm 實(shí)例return this.message.split(’’).reverse().join(’’) }} })</script>
結(jié)果：
原始數(shù)據(jù): 'Hello'
翻轉(zhuǎn)數(shù)據(jù): 'olleH'
這里我們聲明了一個(gè)計(jì)算屬性 reversedMessage。我們提供的函數(shù)將用作 property vm.reversedMessage 的 getter 函數(shù)：
console.log(vm.reversedMessage) // => ’olleH’vm.message = ’Goodbye’console.log(vm.reversedMessage) // => ’eybdooG’
你可以打開(kāi)瀏覽器的控制臺(tái)，自行修改例子中的 vm。vm.reversedMessage 的值始終取決于 vm.message 的值。
你可以像綁定普通 property 一樣在模板中綁定計(jì)算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當(dāng) vm.message 發(fā)生改變時(shí)，所有依賴 vm.reversedMessage 的綁定也會(huì)更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計(jì)算屬性的 getter 函數(shù)是沒(méi)有副作用 (side effect) 的，這使它更易于測(cè)試和理解。
計(jì)算屬性和方法的區(qū)別 ？
看到這里，你會(huì)不會(huì)覺(jué)得，貌似我用方法也可以實(shí)現(xiàn)這種效果啊，將具體的業(yè)務(wù)邏輯放在定義的方法中，但是他們最大的區(qū)別是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是說(shuō)，我們上文中所依賴的 message 不發(fā)生改變，reversedMessage 會(huì)馬上獲取之前的結(jié)果，就不用再次執(zhí)行函數(shù)了，計(jì)算屬性可以幫我們節(jié)省大量的性能開(kāi)銷，不過(guò)如果我們并不希望出現(xiàn)緩存內(nèi)容，就可以使用方法來(lái)代替它
(九) 插槽 Slot在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。新語(yǔ)法的由來(lái)可查閱這份 RFC。
這塊寫的太淺了，不看也罷
插槽就是子組件給父組件一個(gè)占位符即 <slot></slot> 父組件就能在這個(gè)占位符，填一些模板或者 HTML 代碼
簡(jiǎn)單點(diǎn)理解就是組件套組件
就像下面我定義了三個(gè)組件，ideal是父組件，在其中用 slot 進(jìn)行占位，同時(shí)用 name 屬性指向到了這兩個(gè)子組件 ideal-title 和 ideal-content，而為了子組件中顯示的數(shù)據(jù)來(lái)自服務(wù)器（模擬）所以需要?jiǎng)討B(tài)地顯示，即通過(guò)傳參（前面講解組件模板有說(shuō)過(guò)），配合遍歷等讀出 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ù)庫(kù)']} })</script>
結(jié)果如下：
Vue-cli 是官方提供的一個(gè)用于快速創(chuàng)建 Vue 項(xiàng)目的腳手架，可以簡(jiǎn)單的理解為 Maven ，即創(chuàng)建時(shí)選擇一個(gè)骨架那種感覺(jué)，能讓開(kāi)發(fā)更加便捷
(1) 準(zhǔn)備
A：安裝 Node.js
Node.js 去官網(wǎng)或者中文網(wǎng)進(jìn)行下載
cmd 下輸入 node -v ，出現(xiàn)版本號(hào)即正常，輸入 npm -v 同樣出現(xiàn)版本號(hào)即正常
將 Node.js 的鏡像調(diào)整為淘寶鏡像加速（cnpm）
# -g 代表全局安全 推薦此方法npm install cnpm -g# 還有一種辦法就是每次使用 npm 都在后面加一串字符串，不推薦npm install --registry=https://registry.npm.tabao.org
安裝后打開(kāi)此路徑（abc是我這臺(tái)機(jī)器的用戶名，根據(jù)自己的來(lái)）：
C:UsersabcAppDataRoamingnpmnode_modules
正常情況下里面會(huì)有安裝好的 cnpm，接著我們就開(kāi)始安裝 vue-cli
B：安裝 vue-cli
cnpm install vue-cli -g
安裝后在 npm 文件夾下打開(kāi) cmd 輸入 vue-list ，若出現(xiàn)下圖這種星狀內(nèi)容，則完畢
C：創(chuàng)建 vue-cli 程序
自己在想要的位置創(chuàng)建一個(gè)目錄，選擇基于 webpack 的 vue 應(yīng)用程序
此文件夾下的 cmd 中輸入命令
vue init webpack vue_02_myvue
輸入一些基本信息，例如 項(xiàng)目名 作者名
下面的內(nèi)容如果有選項(xiàng)的回車配合 n（也就是no）進(jìn)行
這時(shí)，它會(huì)詢問(wèn)你是否自動(dòng)執(zhí)行 npm install（如下），是的話則會(huì)自動(dòng)安裝一些依賴，點(diǎn)擊否，需要自行再輸入命令安裝，所以選擇是就行了
Should we run npm install for you after the project has been created? (recommended) npm
完成之后，項(xiàng)目中的 node_modules 就會(huì)多出很多很多依賴
再接著，它又會(huì)提醒初始化好了，你如果想啟動(dòng)就可以執(zhí)行這兩條，第一句是從外面的文件夾進(jìn)入到我自定義的那個(gè)項(xiàng)目文件夾中，第二句則是啟動(dòng)
出現(xiàn)如果所示內(nèi)容則啟動(dòng)成功，通過(guò)后面的地址和端口就可以訪問(wèn)
找個(gè)編輯器看一下，我用 IDEA Open進(jìn)這個(gè)文件夾來(lái)，就可以進(jìn)行修改了，具體的代碼文件還是在 src 目錄下，同時(shí)還可以配置 IDEA 的 Terminal 為有管理員權(quán)限的 cmd 或者終端，能更便捷一些
如何快速創(chuàng)建項(xiàng)目
可以通過(guò) HBuilder 進(jìn)行相對(duì)快速的創(chuàng)建項(xiàng)目，其新建中直接就可以創(chuàng)建 vue 項(xiàng)目 以及終端運(yùn)行
在想創(chuàng)建項(xiàng)目的目錄下終端輸入 vue ui 進(jìn)入圖形界面（此方法需要 vue-cli 版本為 3.x ，通過(guò) vue --version 查詢到 vue-cli 的版本 例如為 2.9.6 是不能使用的，可用的命令可以通過(guò) vue -h 查看 ）
(二) 簡(jiǎn)單認(rèn)識(shí) Webpack(1) 認(rèn)識(shí)安裝
蓋菜我們創(chuàng)建 vue 項(xiàng)目的時(shí)候，選擇的是 webpack 進(jìn)行打包，但是都是自動(dòng)化的過(guò)程，我們手動(dòng)的操作一下，能更好的理解
webpack是一個(gè)現(xiàn)代 Javascript應(yīng)用程序的靜態(tài)模塊打包器( module bundler)。當(dāng)webpack處理應(yīng)用程序時(shí),它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系 Dependency graph),其中包含應(yīng)用程序需要的?案瞿？?然后將所有這些模塊打包成一個(gè)或多個(gè) bundlewebρa(bǔ)ck是當(dāng)下最熱門的前端資源模塊化管理和打包工具,它可以將許多松散耦合的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分離,等到實(shí)際需要時(shí)再異步加載。通過(guò) loader轉(zhuǎn)換,任何形式的資源都可以當(dāng)做模塊,比如 Commonis、AMD、ES6、CSS、JSON、 Coffee Script、LESS等;
安裝 webpack、webpack-cli ，如果 npm 不太慢先考慮使用 npm 再考慮使用 cnpm
cnpm install webpack -gcnpm install webpack-cli -g
通過(guò) webpack -v 、webpack-cli -v 查看是否出現(xiàn)版本號(hào)確定安裝是否成功
(2) 使用 webpack
創(chuàng)建項(xiàng)目（IDEA 的話，直接創(chuàng)建一個(gè)普通文件夾 Open進(jìn)入就行了）
新建一個(gè) modules 目錄，放置 JS 模塊等內(nèi)容
在 modules 下創(chuàng)建模塊文件，例如 demo.js 用于編寫 Js 模塊相關(guān)代碼，例如
exports.test = function () { document.write('<h2>理想二旬不止</h2>')}
在 moduels 下創(chuàng)建 main.js ，這是一個(gè)入口文件，用于打包時(shí)設(shè)置 entry 屬性對(duì)應(yīng)
var demo = require('./demo')demo.test();
在項(xiàng)目根目錄下創(chuàng)建 webpack.config.js 文件，用于配置
module.exports = { entry: './modules/main.js', output: {filename: './js/bundle.js' }};
在 terminal 中輸入 webpack 命令進(jìn)行打包（進(jìn)入項(xiàng)目目錄后 輸入 webpack 就行了，這是運(yùn)行結(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/
打包后項(xiàng)目目錄多出 dist 文件夾 其中有一個(gè) js 文件夾，放著打包的 js，創(chuàng)建index.html 引入此 js
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title></head><body> <script src='http://www.cgvv.com.cn/bcjs/dist/js/bundle.js'></script></body></html>
頁(yè)面效果如下：
補(bǔ)充：配置文件中可能會(huì)有哪些內(nèi)容
entry：入口文件,指定 Web Pack用哪個(gè)文件作為項(xiàng)目的入口 output：輸出,指定 Web pack把處理完成的文件放置到指定路徑 module：模塊,用于處理各種類型的文件plugins:插件,如:熱更新、代碼重用等 resolve：設(shè)置路徑指向 watch：監(jiān)聽(tīng),用于設(shè)置文件改動(dòng)后直接打包(三) 簡(jiǎn)單認(rèn)識(shí) Vue Router 路由Vue Router是 Vue.js 的官方路由器。它與 Vue.js 核心深度集成，使使用 Vue.js 輕松構(gòu)建單頁(yè)應(yīng)用程序變得輕而易舉。功能包括：
簡(jiǎn)單的說(shuō)，可以實(shí)現(xiàn)一些頁(yè)面的跳轉(zhuǎn)，例如我們頭部的內(nèi)容是不變的，內(nèi)容部分需要根據(jù)鏈接改變
嵌套路線/視圖映射 模塊化，基于組件的路由器配置 路由參數(shù)，查詢，通配符 查看由Vue.js過(guò)渡系統(tǒng)提供動(dòng)力的過(guò)渡效果 細(xì)粒度的導(dǎo)航控制 與自動(dòng)活動(dòng)CSS類的鏈接 HTML5歷史記錄模式或哈希模式，在IE9中具有自動(dòng)回退 可自定義的滾動(dòng)行為安裝步驟：
由于 vue-router 是一個(gè)插件包，還是老辦法，npm/cnpm
npm install vue-router --save-dev
安裝后如果有一些問(wèn)題，根據(jù)提示，輸入對(duì)應(yīng)命令即可，就像我遇到了提示輸入 npm audit fix
創(chuàng)建好項(xiàng)目后，刪掉默認(rèn)的 HelloWorld那個(gè)組件，然后再 components 中新建兩個(gè)自定義組件，例如我創(chuàng)建的 FirstDemo.vue 和 Main.vue 前者是一個(gè)子頁(yè)面，后者代表主頁(yè)面，隨便自擬
FirstDemo.vue
<template> <h1>第一個(gè)Demo頁(yè)面</h1></template><script> export default { name: 'FirstDemo.vue' }</script><style scoped></style>
Main.vue
<template> <h1>首頁(yè)</h1></template><script> export default { name: 'Main.vue' }</script><style scoped></style>
接著創(chuàng)建 router 文件夾，以及其中的 index.js 主配置
注：如果在一個(gè)模塊化工程中使用它，必須要通過(guò) 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 這個(gè)入口文件
// 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 = falseVue.use(router);/* eslint-disable no-new */new Vue({ el: ’#app’, //配置路由 router, components: {App}, template: ’<App/>’})
以及正式的書寫頁(yè)面，引入鏈接
<template> <div id='app'> <h1>理想二旬不止</h1> <router-link to='/main'>首頁(yè)</router-link> <router-link to='/firstDemo'>第一個(gè)Demo頁(yè)面</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 的項(xiàng)目，同時(shí)安裝 vue-router、e1ement-ui、sass-loader 、node-sass 插件
# 創(chuàng)建項(xiàng)目vue init webpack vue_03_vue_elementui# 進(jìn)入工程目錄cd vue_03_vue_elementui# 安裝vue-routernpm install vue-router --save-dev# 安裝e1ement-uinpm i element-ui -S# 安裝依賴npm install# 安裝SASS加載器cnpm install sass-loader node-sass --save-dev# 啟動(dòng)測(cè)試npm run dev
補(bǔ)充：Npm命令解釋
npm install moduleName：安裝模塊到項(xiàng)目目錄下
npm install - g moduleNMame：-g 的意思是將模塊安裝到全局,具體安裝到磁盤哪個(gè)位置，要看 npm config prefix的位置
npm install - save moduleName：--save 的意思是將模塊安裝到項(xiàng)目目錄下，并在package文件的 dependencies 節(jié)點(diǎn)寫入依賴，-S為該命令的縮寫
npm install -save -dev moduleName：--save-dev 的意思是將模塊安裝到項(xiàng)目目錄下，并在 package 文件的 devdependencies節(jié)點(diǎn)寫入依賴， -D為該命令的縮寫
接著就可以在編輯器中打開(kāi)了，看個(gè)人選擇，我這里用 IDEA 打開(kāi)，打開(kāi)后注意看一下 modules 文件夾中是否已經(jīng)把 router sass 等內(nèi)容成功安裝了
接著將默認(rèn)的 HelloWorld 那個(gè)組件和默認(rèn) logo 刪掉，開(kāi)始編寫代碼，創(chuàng)建一個(gè) views 文件夾用來(lái)放視圖
創(chuàng)建 Login.vue 和 Main.vue
Login.vue
<template> <h1>主頁(yè)面</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- class='login-box'> <h3 class='login-title'>歡迎 登錄</h3> <el-form-item label=' 賬號(hào)' prop='username'><el-input type='text' placeholder='請(qǐng)輸入賬號(hào)' v-model='form.username'/> </el-form-item> <el-form-item label=' 密碼' prop='password'><el-input type='password' placeholder=' 請(qǐng)輸入密碼' 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 :visible.sync='dialogVisible' :before-close='handLeClose'> <span>請(qǐng)輸入賬號(hào)和密碼</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: ’’},//表單驗(yàn)證，需要在el-form-item 元素中增加prop 屬性rules: { username: [ {required: true, message: ' 賬號(hào)不可為空', trigger: ’blur’} ], password: [ {required: true, message: ' 密碼不可為空 ', trigger: ’blur’} ]},//對(duì)話框顯示和隱藏dialogVisible: false } }, methods: { onSubmit(formName) {//為表單綁定驗(yàn)證功能this.$refs[formName].validate((valid) => { if (valid) { //使用vue-router路由到指定頁(yè)面，該方式稱之為編程式導(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 前面就說(shuō)過(guò)，至于后者，照著官網(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'>首頁(yè)</router-link> <router-link to='/login'>登錄頁(yè)面</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>
到這里就寫好了，我們可以開(kāi)始運(yùn)行了，但是運(yùn)行時(shí)，我分別出現(xiàn)了如下錯(cuò)誤
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)查閱后，修改項(xiàng)目目錄下 package.json 中的 sass-loder 的版本 從 10.0.2 到 8.0.2 到 7.3.1 才可以正常通過(guò) npm run dev 運(yùn)行
'sass-loader': '^7.3.1',
注：修改配置后需要重新 npm install 或者 cnpm install
展示一下最終效果：
點(diǎn)擊首頁(yè)效果：
點(diǎn)擊登錄頁(yè)面效果：
最后，在某馬上找了一個(gè)現(xiàn)成的頁(yè)面案例，簡(jiǎn)單搭了下后臺(tái)跑了一下，也算鞏固一下最前面的基礎(chǔ)語(yǔ)法，后臺(tái)就基本的 SSM ，給了三個(gè)接口方法，作為一個(gè)后端，這應(yīng)該算基本功了哇
/user/findAll 、/user/indById 、 /user/updateUser
就是簡(jiǎn)單的查詢和一個(gè)更新操作，查詢的主體是一個(gè)用戶類，有這么幾個(gè)基本字段
public class User implements Serializable {private Integer id; private String username; private String password; private Integer age; private String sex; private String email; ......}
頁(yè)面中承接的數(shù)據(jù)的關(guān)鍵代碼如下
首先是關(guān)于所有用戶數(shù)據(jù)展示的，通過(guò)一個(gè)對(duì)于 userList 的遍歷，然后通過(guò)大括號(hào)組和 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' @click='findById(u.id)'>編輯</button> </td></tr>
點(diǎn)擊編輯后執(zhí)行對(duì)于當(dāng)前用戶的查詢方法，用于回顯，下面通過(guò) v-model 進(jìn)行與 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' 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' 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' 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' 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' v-model='user.email'> </div> </div> </div></div>
要實(shí)現(xiàn)數(shù)據(jù)交互，最重要的還是定義數(shù)據(jù)，與使用 axios 進(jìn)行異步請(qǐng)求
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(); }});
上述代碼其實(shí)很好理解，首先定義了 user 和 userList 兩個(gè)數(shù)據(jù)，userList 就是前面展示所有用戶數(shù)據(jù)的一個(gè)遍歷內(nèi)容，用來(lái)承載 findAll 后的數(shù)據(jù)，user 則是對(duì)于進(jìn)行單個(gè)用戶查詢，即修改時(shí)回顯當(dāng)前用戶舊信息的一個(gè)承載實(shí)體，因?yàn)椴樵兯械牟僮魇且婚_(kāi)始就進(jìn)行，所以在 created() 中就執(zhí)行 findAll 方法，在 methos 中創(chuàng)建查和改的方法，通過(guò) axios 進(jìn)行 get 或者 post 請(qǐng)求，同時(shí)將返回的結(jié)果進(jìn)行處理
說(shuō)明：.then 中的是請(qǐng)求成功后執(zhí)行的內(nèi)容，.catch 中是請(qǐng)求失敗后執(zhí)行的內(nèi)容
注意：最關(guān)鍵的一個(gè)內(nèi)容就是在 axios 前定義了 var _this = this 如果有接觸過(guò)小程序可能會(huì)感到很熟悉，這里定義的原因是因?yàn)?例如在 axios 中有這樣的語(yǔ)句 _this.userList = response.data; 如果 userList 中前直接使用 this，這就代表著查找 axios 中的此內(nèi)容，但我們明顯想指代的是 data 中的 userList，所以此定義 _this 步驟不可省略
效果如下：
查詢所有
查詢當(dāng)前用戶以及修改
以上就是Vue詳細(xì)的入門筆記的詳細(xì)內(nèi)容，更多關(guān)于Vue入門筆記的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. python中scrapy處理項(xiàng)目數(shù)據(jù)的實(shí)例分析2. 快速搭建Spring Boot+MyBatis的項(xiàng)目IDEA（附源碼下載）3. js抽獎(jiǎng)轉(zhuǎn)盤實(shí)現(xiàn)方法分析4. IntelliJ IDEA導(dǎo)入jar包的方法5. Python requests庫(kù)參數(shù)提交的注意事項(xiàng)總結(jié)6. GIT相關(guān)-IDEA/ECLIPSE工具配置的教程詳解7. 教你在 IntelliJ IDEA 中使用 VIM插件的詳細(xì)教程8. python dict如何定義9. 如何基于Python實(shí)現(xiàn)word文檔重新排版10. vue-electron中修改表格內(nèi)容并修改樣式
網(wǎng)公網(wǎng)安備