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)題。
- 上一篇: 计算机重装系统后黑屏,电脑重装系统后开机
- 下一篇: 计算机在社区健康档案管理中的作用,某社区