Vue.js 快速入门 (一) —— Vue基础
記錄自己學(xué)習(xí)Vue.js的過(guò)程，如果有什么地方寫的不好或者寫錯(cuò)的，歡迎探討和指正。
Vue.js 快速入門 (二) —— Vue常用指令
Vue.js 快速入門 (三) —— Vue本地應(yīng)用
Vue.js 快速入門 (四) —— Vue網(wǎng)絡(luò)應(yīng)用
目錄
-
Vue簡(jiǎn)介
-
第一個(gè)Vue程序
-
el：設(shè)置掛載點(diǎn)
-
data：數(shù)據(jù)對(duì)象?
?
簡(jiǎn)介
Vue.js官網(wǎng):? ?https://cn.vuejs.org/
Vue.js介紹以及起步:??https://cn.vuejs.org/v2/guide/
Vue.js是國(guó)人(作者：尤雨溪)開發(fā)的一個(gè)用于構(gòu)建用戶界面的JavaScript漸進(jìn)式框架，核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)，有如下的優(yōu)點(diǎn)：
(感覺(jué)官網(wǎng)說(shuō)的比我詳細(xì)多了，大家可以看看官網(wǎng)上面關(guān)于Vue的簡(jiǎn)介)
學(xué)習(xí)Vue.js之前需要你對(duì) CSS / HTML / JavaScript??等有一定的了解。
?
第一個(gè)Vue程序
本次入門采用的編輯器為VS Code，同時(shí)使用了一款名為live?server的插件，該插件可以實(shí)時(shí)的把你編寫的內(nèi)容渲染到網(wǎng)頁(yè)上，能極大的提高效率，安裝完VS Code后可以在Extensions中搜索該插件名字進(jìn)行安裝。
就拿官網(wǎng)的例子來(lái)入門吧。
首先打開vs?code，新建一個(gè)html文件，然后按照官網(wǎng)的教程，我們需要引入Vue。
官網(wǎng)：
可引入的Vue文件有兩個(gè)，選哪個(gè)一個(gè)呢？
個(gè)人認(rèn)為這開發(fā)環(huán)境版本和生產(chǎn)環(huán)境版本，舉個(gè)不太恰當(dāng)?shù)睦?#xff0c;就是完整版本的js和min.js的區(qū)別，第一種適合學(xué)習(xí)階段的使用，因?yàn)槠鋬?nèi)置了許多有意義的提示，第二種速度較快，代碼也經(jīng)過(guò)壓縮，但是幫助的提示信息則無(wú)法看到。
我們?cè)趯W(xué)習(xí)的時(shí)候肯定是選擇開發(fā)環(huán)境版本會(huì)好些，故選擇引入開發(fā)環(huán)境版本。
同時(shí)在<html></html>標(biāo)簽中中寫一個(gè)id為app的div，同時(shí)在<script></script>標(biāo)簽中通過(guò)var關(guān)鍵字創(chuàng)建一個(gè)vue實(shí)例，并設(shè)置el屬性和data屬性(后面有講解)。
安裝完插件后，在代碼界面右鍵選擇Open?with?live?server打開瀏覽器，通過(guò)live server插件，我們寫完代碼后按ctrl+s進(jìn)行保存，瀏覽器上面就會(huì)實(shí)時(shí)更新數(shù)據(jù)。
這樣我們就完成了我們的第一個(gè)Vue.js應(yīng)用。
其中，div標(biāo)簽中的{{message}}，實(shí)質(zhì)上這是一個(gè)插值表達(dá)式，也是Vue的語(yǔ)法，作用就是將data中的數(shù)據(jù)和頁(yè)面結(jié)構(gòu)關(guān)聯(lián)起來(lái)。
那么，vue是怎樣知道要去操縱某個(gè)元素的呢？
答案是：通過(guò)el屬性(作用：設(shè)置掛載點(diǎn))
?
el：設(shè)置掛載點(diǎn)
通過(guò)css選擇器設(shè)置vue實(shí)例管理的元素，設(shè)置完畢后，el命中的元素內(nèi)部使用兩個(gè)大括號(hào)( {{? ?}} )修飾的部分就會(huì)被data中同名的數(shù)據(jù)所替換。
到此，我們提出以下幾個(gè)疑問(wèn)：
第一個(gè)問(wèn)題?Vue實(shí)例的作用范圍？ 看代碼：
我們?cè)趇d為app的div標(biāo)簽外新建一個(gè){{message}},同時(shí)在div中新建一個(gè)<H1>標(biāo)簽，在標(biāo)簽中設(shè)置{{message}}，運(yùn)行。
可以看出，Vue只會(huì)管理el選項(xiàng)命中的元素及其內(nèi)部的后代元素。
?
第二個(gè)問(wèn)題，是否可以使用其他的選擇器？?看代碼：
我們?cè)趇d為app的div標(biāo)簽添加一個(gè)class屬性，名字也為app，同時(shí)修改el屬性的值，運(yùn)行成功。
可以看出，可以使用其他的選擇器。(建議使用ID選擇器,因?yàn)樗俏ㄒ坏?
?
第三個(gè)問(wèn)題， 是否可以設(shè)置其他Dom元素？看代碼：
給body添加id屬性，名字為body，運(yùn)行，結(jié)果如下。
結(jié)果不顯示，按F12，進(jìn)入控制臺(tái)查看，發(fā)現(xiàn)
提示，不要vue掛載到body標(biāo)簽和html標(biāo)簽。
?
從上面的例子中，可以看出：
- el是用來(lái)設(shè)置Vue實(shí)例掛載(管理)的元素
- Vue會(huì)管理el選項(xiàng)命中的元素及其內(nèi)部的后代元素（Vue實(shí)例的作用范圍）
- 可以使用其他的選擇器，但是建議使用ID選擇器。
- 可以使用其他的雙標(biāo)簽，不能使用HTML和BODY元素。（可設(shè)置其他DOM元素，除了HTML和BODY）
?
data：數(shù)據(jù)對(duì)象?
Vue實(shí)例中需要使用的數(shù)據(jù)我們都定義在data中。
如果在data中添加數(shù)組，對(duì)象等復(fù)雜類型，需要怎么使用呢？
用法如下：
?
通過(guò)以上例子可以得到：
總結(jié)
以上是生活随笔為你收集整理的Vue.js 快速入门 (一) —— Vue基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 计算机重装系统后黑屏,电脑重装系统后开机
- 下一篇： 计算机在社区健康档案管理中的作用,某社区