Vue起手式

起手式

Vue中文文檔 岔擂、工具@vue/cli文檔

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!

image.png

3.運行

cd vue-demo
yarn serve
中斷control+c从撼,然后把生成的目錄vue-demo拖進來
open .
yarn serve //打開本地預(yù)覽服務(wù)器
image.png

現(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有的支持有的不支持了茎芭。


image.png

方法一:從html得到視圖「完整版Vue」

1.文檔: 使用BootCDN安裝
對不同構(gòu)建版本的解釋

image.png

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ù)器
image.png

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
    }
  }
})
image.png

不完整版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ù)器
image.png

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ū)別

image.png

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的功能唬格。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末家破,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子西轩,更是在濱河造成了極大的恐慌员舵,老刑警劉巖脑沿,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藕畔,死亡現(xiàn)場離奇詭異,居然都是意外死亡庄拇,警方通過查閱死者的電腦和手機注服,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門韭邓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人溶弟,你說我怎么就攤上這事女淑。” “怎么了辜御?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵鸭你,是天一觀的道長。 經(jīng)常有香客問我擒权,道長袱巨,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任碳抄,我火速辦了婚禮愉老,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘剖效。我一直安慰自己嫉入,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布璧尸。 她就那樣靜靜地躺著咒林,像睡著了一般。 火紅的嫁衣襯著肌膚如雪爷光。 梳的紋絲不亂的頭發(fā)上映九,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音瞎颗,去河邊找鬼件甥。 笑死,一個胖子當(dāng)著我的面吹牛哼拔,可吹牛的內(nèi)容都是我干的引有。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼倦逐,長吁一口氣:“原來是場噩夢啊……” “哼譬正!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起檬姥,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤曾我,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后健民,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抒巢,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年秉犹,在試婚紗的時候發(fā)現(xiàn)自己被綠了蛉谜。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片稚晚。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖型诚,靈堂內(nèi)的尸體忽然破棺而出客燕,到底是詐尸還是另有隱情,我是刑警寧澤狰贯,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布也搓,位于F島的核電站,受9級特大地震影響涵紊,放射性物質(zhì)發(fā)生泄漏还绘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一栖袋、第九天 我趴在偏房一處隱蔽的房頂上張望拍顷。 院中可真熱鬧,春花似錦塘幅、人聲如沸昔案。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽踏揣。三九已至,卻和暖如春匾乓,著一層夾襖步出監(jiān)牢的瞬間捞稿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工拼缝, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留娱局,地道東北人。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓咧七,卻偏偏與公主長得像衰齐,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子继阻,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容