起手式
Vue的歷史
vue粤剧、Angular.js晌畅、React.js前端三大主流框架仙粱。
MVC中的V是Vue的重點蚪黑，M和V則被簡化。
Vue和vue.js沒有區(qū)別徐绑，vue就是vue.js的簡稱邪驮。
Vue你可以認為是框架也可以說是庫，Vue中文英文文檔都是尤雨溪寫的泵三。
15年的1.0版本Vue自稱是MVVM框架耕捞，不是MVC是MVVM，不過這已經(jīng)成歷史了√棠唬現(xiàn)在Vue是MV * 框架,意思就是你說MVC俺抽、MVVM都行。但是Vue升級到2.0后较曼，它雖然看起來是MVVM框架磷斧，但實際不是MVVM框架了。Vue3直接抄襲React捷犹。
Vue作者尤雨溪弛饭，主要作品: Vue、Vue Router萍歉、Vuex侣颂、@vue/cli(主要維護者是蔣豪群)
Vue2版本vue.runtime.min.js Vue3版本vue.runtime.global.prod.js
目標一: 項目搭建
方法一:使用@Vue/cli
使用@vue/cli搭建Vue項目
@Vue/cli 是Vue的創(chuàng)建初始化工具，webpack的升級版枪孩，幫你把所有的webpack loader憔晒、webpack plugin配好了。利用@Vue/cli蔑舞，不用學(xué)webpack也能用Vue拒担。
步驟 ??@vue/cli文檔
1.打開終端
cd ~/Desktop/
yarn global add @vue/cli@4.1.0-beta.0
vue --version
vue create vue-demo //創(chuàng)建目錄vue-demo
2.設(shè)置配置(該配置只適合學(xué)習(xí)，如果是真實項目請自行斟酌選項)
選錯用control+c中斷重來
沒有截圖的使用默認選項攻询。
多選:用空格鍵選中或取消 注意: 不要勾選Choose Vue version!
3.運行
cd vue-demo
yarn serve
中斷control+c从撼，然后把生成的目錄vue-demo拖進來
open .
yarn serve //打開本地預(yù)覽服務(wù)器
現(xiàn)在就可以使用Vue了，還可以用codesandbox.io钧栖。
第1種方式:用命令行創(chuàng)建目錄低零，它會自動幫你安裝依賴。
第2種方式:用codesandbox.io拯杠。
不要登錄掏婶，點擊“create sandbox”，選擇創(chuàng)建vue沙盒阴挣。
下載至本地:點擊File-> Export to ZIP 并解壓縮
方法二:自己從零搭建Vue項目
目標二.vue.js和vue.runtime.js的使用
做一個簡單的"+1"項目
如何使用Vue實例气堕？
App.vue
<template>
<div id="app">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){ //data是函數(shù)
return {
n:0
}
},
methods:{//methods是對象
add(){
this.n +=1
}
}
}
</script>
<style lang="scss">
</style>
分析
index.html<div id="app"> {{n}} </div>不支持{{n}}
main.js new Vue封裝了對實例的所有操作
new Vue({//初始化#app
el : '#app' //我要對這個div進行MVC的封裝
})
Vue不支持{{n}}，接下來介紹Vue的2個版本，就知道為什么Vue有的支持有的不支持了茎芭。
方法一:從html得到視圖「完整版Vue」
1.文檔: 使用BootCDN安裝
對不同構(gòu)建版本的解釋
CDN后綴為vue.min.js是vue.js的簡潔版揖膜，推薦用vue.min.js。
??注意CDN引入的Vue版本要與本地Vue版本一致梅桩，都是2壹粟。
查看版本號:打開package.json:"vue": "^2.6.11";。
CDN引入的版本:vue/2.6.14
CDN選擇后綴為vue.min.js宿百，選擇復(fù)制<script>標簽趁仙，插到index.html。
index.html
<div id="app"> {{n}}</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
引入版本后就會得到一個全局變量
main.js
console.log(window.Vue)
終端:yarn serve //打開本地預(yù)覽服務(wù)器
2.使用
main.js
new Vue({
el: '#app',
data: {
n: 0
}
})
html中的{{n}}加載出來了垦页，頁面顯示0
關(guān)注點: MVC視圖沒有寫在js里雀费，直接寫在頁面index.html里。
這就是完整版的功能痊焊，可以直接在頁面里把n變成0
方法二:用JS構(gòu)建試圖「非完整版vue」
CDN選擇后綴為vue.runtime.min.js盏袄，選擇復(fù)制<script>標簽，插到index.html薄啥。
頁面并未顯示0
原因:非完整版vue不支持從html里面獲取視圖辕羽。 只要是從html里產(chǎn)生視圖就都不支持，所以在js里用template也沒用垄惧。
解決方法:修改render
文檔
index.html
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.runtime.min.js">
</script>
main.js
console.log(window.Vue)
new Vue({
el: '#app',
render(createElement) {
const h = createElement
return h('div', [this.n, h('button', { on: { click: this.add } }, '+1')])
},
data: {
n: 0
},
methods: {
add() {
this.n += 1
}
}
})
不完整版vue必須要用createElement方式把所有元素構(gòu)造出來刁愿。
完整版vue VS 不完整版vue
完整版vue思路:
Vue要把'html{{n}}'變成'html 0'。
直接替換不太好到逊，因為如果有v-if铣口、v-for這些復(fù)雜語句你直接用正則替換是做不到的。于是Vue需要寫一個compiler(編譯器),這個compiler可以把含有占位符或條件循環(huán)語句的東西變成真實的DOM節(jié)點蕾管。這樣下次你在寫this.n +=1時那么它就知道你要改的是n枷踏，于是它就直接改DOM節(jié)點菩暗，而不是再去編譯遍掰曾。它根據(jù)分析出DOM節(jié)點得到了'html 1'。像復(fù)雜的語法@click='add'不能直接替換停团。
compiler(編譯器)特點復(fù)雜旷坦，占用一定代碼體積，比「不完整版Vue」大30%的體積佑稠，所以需要不完整版Vue秒梅。
不完整版vue思路:
不完整版Vue沒有compiler,所以沒辦法把html變成節(jié)點，沒有這個功能舌胶，是利用webpack在寫的時候就進行轉(zhuǎn)換捆蜀。webpack通過vue-loader將<div id="app"> {{n}}... </div>轉(zhuǎn)化為h('div',this.n)。我們寫還是寫html,但是用戶下載的是"只支持h函數(shù)的「不完整版Vue」",中間通過webpack loader翻譯。用戶對Vue的依賴可以使用體積少30%的「不完整版vue」辆它，vue為了減少30%體積把核心功能刪掉了誊薄，在打包的時候自己翻譯，翻譯完后就不需要html版本了锰茉。
我們寫代碼<div id="app"> {{n}}... </div>呢蔫，然后通過yarn build得到用戶可以用的h('div',this.n),用戶可以用的h('div',this.n)+不完整版vue。這里沒有html飒筑，html早就編譯好了片吊，就是把編譯器放到build里面，vue-loader會調(diào)用compiler协屡，這就是vue作者的邏輯俏脊。不完整版意義在于更加的獨立，這種方法很不方便肤晓，但實際上是對的联予。
總結(jié):「完整版vue」體積大30%，「不完整版vue」體積小30%但需要用webpack配合材原。
方法三:使用vue-loader
Vue單文件組件:「不完整版vue」如何用vue-loader翻譯沸久？
可以把.vue文件翻譯成h構(gòu)建方法
但這樣做html就只有一個div#app,SEO不友好
步驟
1.使用它提供的方法，src目錄下新建文件Demo.vue
代碼
Demo.vue
//語法
<template> //視圖
<div class="red">
{{n}}
<button @click="add">+1</button>
</div>
</template>
<script> //視圖外的其它選項
export default {
data(){//如果你是用vue-loader寫的這個文件余蟹，那data必須是函數(shù)卷胯！
return { n:0 }
},
methods:{
add(){
this.n +=1
}
}
}
</script>
<style scoped> //CSS
.red{ color: red; }
</style>
vue-loader就可以把這些東西變成一個對象
2.使用
main.js
import Demo from './Demo.vue' //先導(dǎo)入
console.log(Demo)
new Vue({
el: '#app',
render(h) {
return h(Demo)
},
})
終端:yarn serve //打開本地預(yù)覽服務(wù)器
render里面就是把html<div class="red"> {{n}}... </div>翻譯成render(h) { return h(Demo) },所以Demo.vue不需要自己寫render。
總結(jié): 這就是webpack給前端帶來的無限可能威酒，你可以任意的方式組織一個對象窑睁，只要你最后能夠?qū)懸粋€loader把它還原成這個對象就可以了，這就叫做Vue單文件組件葵孤。
SEO(搜索引擎優(yōu)化)友好
百度如何知道某個的相關(guān)內(nèi)容呢担钮？
curl https://www.taobao.com/
用curl命令(或者右鍵顯示網(wǎng)頁源代碼)可以得到淘寶輸出給百度的curl結(jié)果，相關(guān)內(nèi)容比如 標題<title>淘寶網(wǎng) - 淘尤仍！我喜歡</title> 文章<h1>淘寶網(wǎng)</h1>箫津。這時去百度搜索淘寶網(wǎng)就有可能搜到該網(wǎng)站，因為curl后它得到的就是這些關(guān)鍵信息宰啦。
反關(guān)我們的index.html curl后除了個title外一無所知,因為內(nèi)容<div id="app"></div>是后來的js渲染進去的苏遥，這就叫做SEO不友好或者說用curl命令無法得到相關(guān)內(nèi)容。
SEO友好處理: 補充內(nèi)容赡模，把主要內(nèi)容寫到頁面里田炭。就是把title、description漓柑、keyword教硫、h1叨吮、a寫好即可。
//打開淘寶查看源代碼瞬矩，有例子
<meta name="description" content="淘寶網(wǎng)-亞洲較大的網(wǎng)上交易平臺挤安，提供各類服飾..." />
<meta name="keyword" content="淘寶,掏寶,網(wǎng)上購物,C2C,在線交易..." />
雖然最后會不見，但是curl命令會看見它丧鸯。
??最佳實踐:總是使用非完整版蛤铜，然后配合vue-loader和vue文件。
思路:
1.保證用戶體驗丛肢，用戶下載的JS文件體積更小围肥，但只支持h函數(shù)。
2.保證開發(fā)體驗蜂怎，開發(fā)者可直接在vue文件里寫HTML標簽穆刻，而不寫h函數(shù)。
3.臟活讓loader做杠步，vue-loader把vue文件里的HTML轉(zhuǎn)為h函數(shù)氢伟。
這樣你就可以不寫h函數(shù)也能得到h函數(shù)。
深入理解完整版與運行版的區(qū)別
1.非完整版視圖: 寫在render函數(shù)里幽歼，用h來創(chuàng)建標簽朵锣。h可重命名但最好別改。
Demo.vue 代碼略...
main.js
import Demo from './Demo.vue'
new Vue({
el: '#app',
render(h) {
return h(Demo)//用h創(chuàng)建標簽
}
})
2.可以用CDN引入這兩個版本:vue.js是Vue完整版甸私，vue.runtime.js是Vue非完整版诚些。生產(chǎn)環(huán)境(如果要部署給用戶)要都改成.min.js，比如vue.runtime.min.js皇型，.min.js是去掉注釋壓縮后的版本诬烹。
3.引用錯了會怎樣？
非完整版支持render但不支持template弃鸦，強行用template就會報錯警告绞吁。
完整版vue.runtime.js錯用成vue.js體積會變大，因為vue.js有編譯HTML的功能唬格。
