今天勋篓，給大家分享下Vue.js基礎(chǔ)入門婆跑，我主要由了解Vue.js此熬、開(kāi)始起步、語(yǔ)法三個(gè)部分簡(jiǎn)單的寫了基礎(chǔ)入門知識(shí)滑进，希望對(duì)正在學(xué)習(xí)Vue.js的你有所幫助犀忱！
一、了解 Vue.js
1.1? ?Vue.js是什么扶关？
Vue.js是一套用于構(gòu)建用戶界面的漸進(jìn)式框架阴汇。Vue.js通過(guò)簡(jiǎn)單的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。
1.2 ? 特性：
確實(shí)輕量节槐、數(shù)據(jù)綁定搀庶、指令、插件化
二铜异、起步開(kāi)始
2.1? 官方網(wǎng)址：https://cn.vuejs.org/
進(jìn)入官方網(wǎng)址哥倔，點(diǎn)擊“學(xué)習(xí)”--“教程”
提供了多種方式安裝vue，初學(xué)者揍庄，建議用最簡(jiǎn)單的安裝方式咆蒿，下載開(kāi)發(fā)版本。點(diǎn)擊進(jìn)入之后是一個(gè)vue.js源碼文件蚂子，直接保存下來(lái)即可沃测。
2.3? ?第一個(gè)Vue實(shí)例：
1、代碼解讀
在頭通過(guò)引入vue.js文件食茎。
el：是element的縮寫蒂破，指要操作/綁定的元素
data：寫需要操作改變的內(nèi)容。
注意：學(xué)javascript時(shí)别渔，很多時(shí)候都是操作DOM的模式附迷，而vue則更多是操作數(shù)據(jù)的雙向綁定。
2钠糊、Vue實(shí)例挟秤、掛載點(diǎn)、模板之間的關(guān)系
掛載點(diǎn)：需要操作的元素抄伍。例如：<div id="app"></div>
Vue實(shí)例只會(huì)處理掛載點(diǎn)下的內(nèi)容艘刚。
掛載點(diǎn)內(nèi)部的內(nèi)容叫模板內(nèi)容。比如截珍，下面的
用模板的方式演示上面的例子攀甚，以此說(shuō)明掛載點(diǎn)內(nèi)的內(nèi)容為template：
效果：自動(dòng)輸出 “你好箩朴，hello vue！”
Vue實(shí)例：自動(dòng)根據(jù)el秋度，template炸庞，data數(shù)據(jù)生成最終的效果。最后放在掛載點(diǎn)之中荚斯。
三埠居、語(yǔ)法
3.1? ?插值
文本插值是最基本的形式，用雙大括號(hào){{ }}事期，如下代碼：
3.2? ?指令
指令是帶有v-前綴的特殊性滥壕，主要綁定表達(dá)式，也就是javascript表達(dá)式和過(guò)濾器兽泣。指令的作用是當(dāng)表達(dá)式的值發(fā)生變化時(shí)绎橘，將這個(gè)變化也反映到DOM上：
當(dāng)show為true時(shí)，展示“我是標(biāo)題”的文字唠倦。否則就不展示称鳞。
指令有許多種，詳細(xì)的可以看官方文檔稠鼻。比如還帶參數(shù)冈止。修飾符〖喜停縮寫等靶瘸。
以下列舉比較常用的指令：
v-text和v-html
監(jiān)聽(tīng)事件指令 v-on
屬性綁定指令 v-bind
表單輸入綁定指令 v-model
計(jì)算屬性
條件渲染：v-if 和 v-show的區(qū)別
1、v-text和v-html的區(qū)別
用v-html指令插值
用v-text指令插值
將上圖的v-html改成v-text毛肋，其他不變怨咪。
總結(jié)：
v-html 輸出標(biāo)簽中的內(nèi)容
v-text輸出結(jié)果為帶標(biāo)簽 的
2、監(jiān)聽(tīng)事件指令 v-on
v-on 指令監(jiān)聽(tīng) DOM 事件润匙，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼诗眨。
效果：當(dāng)你點(diǎn)“點(diǎn)我”時(shí)，就彈出“你點(diǎn)到我了”孕讳。
1匠楚、代碼解讀
事件寫在Vue實(shí)例的methods對(duì)象里
v-on可以簡(jiǎn)寫為：@
2、改變插值
如果是要改變插值的話厂财，如下：
效果：點(diǎn)擊“我是標(biāo)題”芋簿，變成“哈哈哈”。
3璃饱、屬性綁定指令 v-bind
v-bind??指令可以用于響應(yīng)式地更新 HTML 屬性：
4与斤、表單輸入綁定指令 v-model
v-model?指令在表單及<input>及<textarea>元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)撩穿，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理
效果：
如果你在輸入框后加上333磷支，那div的內(nèi)容也會(huì)自動(dòng)變化。
如圖：這就是雙向數(shù)據(jù)綁定食寡！
v-model這部分的內(nèi)容雾狈，可以直接看vue官網(wǎng)的例子。詳細(xì)抵皱，有利于初學(xué)者理解善榛。
5、計(jì)算屬性
效果：
未輸入數(shù)字時(shí)：如圖
當(dāng)你輸入值時(shí)：如圖
優(yōu)點(diǎn)：
computed 計(jì)算屬性叨叙，它的性能是比較高的锭弊，只有當(dāng)他依賴的屬性發(fā)生變化時(shí)，它才會(huì)重新請(qǐng)求計(jì)算擂错，否則使用上一次的緩存值。所以如果一個(gè)龐大的數(shù)據(jù)項(xiàng)目樱蛤，需要有緩存的钮呀，就可以用這種方法∽蚍玻可以減少請(qǐng)求次數(shù)爽醋，達(dá)到優(yōu)化。
6便脊、條件渲染：v-if 和 v-show的區(qū)別
第一種情況蚂四，顯示的時(shí)候
以上代碼，我通過(guò)在data的showOrhide的ture來(lái)控制顯示哪痰，明顯看出兩者都顯示在dom結(jié)構(gòu)中遂赠。很容易理解！
第二種情況晌杰，隱藏時(shí)候
以上代碼跷睦，我將data的showOrhide的ture改為false來(lái)控制隱藏，可是肋演，我們看dom結(jié)構(gòu)抑诸，通過(guò)v-if的那個(gè)div已經(jīng)在dom中移除了。而v-show的div則是通過(guò)display：none來(lái)達(dá)到隱藏爹殊。但dom結(jié)構(gòu)依然存在蜕乡。
來(lái)看看官網(wǎng)對(duì)這2個(gè)的對(duì)比：
7、列表渲染：v-for
v-for?指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染
效果：
入門教程到這里基本就差不多了梗夸，你們都掌握了嗎层玲？
歡迎關(guān)注微信公眾號(hào)【一文插畫】，回復(fù)【資源】即可獲得學(xué)習(xí)資料~?“領(lǐng)干貨” 一起提升技能！未經(jīng)授權(quán)称簿，不得轉(zhuǎn)載扣癣。
