Vue.js用法詳解
vue.js 教程
Vue.js(讀音 /vjuː/, 類似于 view) 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層, 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來(lái)非常簡(jiǎn)單,本教程基于 Vue 2.1.8 版本測(cè)試。
前 言
前段時(shí)間為了一個(gè)數(shù)據(jù)查詢的項(xiàng)目自學(xué)了Vue,感覺(jué)這款框架還是很不錯(cuò)的,今天就整理整理這個(gè)框架如何使用,希望對(duì)正在學(xué)這個(gè)框架的小伙伴有所幫助~
首先,我們先來(lái)了解一下Vue:
Vue.js是一套構(gòu)建用戶界面(user interface)的漸進(jìn)式框架。與其他重量級(jí)框架不同的是,Vue 從根本上采用最小成本、漸進(jìn)增量(incrementally adoptable)的設(shè)計(jì)。Vue 的核心庫(kù)只專注于視圖層,并且很容易與其他第三方庫(kù)或現(xiàn)有項(xiàng)目集成。另一方面,當(dāng)與單文件組件和 Vue生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí),Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供有力驅(qū)動(dòng)。所以,Vue其實(shí)還是很強(qiáng)大的。
1.Vue.js的安裝與模版語(yǔ)法
Vue的使用非常簡(jiǎn)單,直接下載Vue.js或者Vue.min.js導(dǎo)入就可以使用。
1-1 模板語(yǔ)法
Vue.js 使用了基于 HTML 的模版語(yǔ)法,允許開(kāi)發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。
Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。
結(jié)合響應(yīng)系統(tǒng),在應(yīng)用狀態(tài)改變時(shí), Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。
1. html模版
html模版:基于DOM的模版,模版都是可解析的有效的HTML
插值:
文本:使用“Mustache”語(yǔ)法(大括號(hào)){{ value }};作用:替換實(shí)例上的屬性值,當(dāng)值改變時(shí),插值內(nèi)容會(huì)被自動(dòng)更新。也可使用v-text="value"代替。
<p>{{ value }}<p> 等價(jià)于 <p v-text="value"></p>
原生的html:雙大括號(hào)輸出的文本,不會(huì)解析html標(biāo)簽。也就是說(shuō)當(dāng)實(shí)例的data為html標(biāo)簽時(shí),不能解析而是直接輸出出來(lái)。此時(shí)如想要解析,可使用v-html="value"代替。
new Vue({ data:{ value: `<span>我是一個(gè)span標(biāo)簽</span>` } }); <p>{{ value }}<p> 頁(yè)面展示 => <span>我是一個(gè)span標(biāo)簽</span> <p v-html="value"><p> 頁(yè)面展示 => 我是一個(gè)span標(biāo)簽
需要注意的是,有時(shí)候因?yàn)橐恍┚W(wǎng)絡(luò)延遲等原因,用戶會(huì)在也買年中先看到{{ xxx }},然后才有數(shù)據(jù)。我們?nèi)粝氡苊獯诵Ч?,可用v-text="xxxx"代替。
屬性:使用v-bind進(jìn)行綁定,可以響應(yīng)變化。
<h2 :class="{red:show}">
標(biāo)題</h2> => 注意此處的show為data內(nèi)的一個(gè)布爾值數(shù)據(jù),若真則添加red的class,若假則移除red的class,
使用javascript表達(dá)式:可以寫(xiě)簡(jiǎn)單的表達(dá)式。(可以簡(jiǎn)單的三目運(yùn)算,但是不可以寫(xiě)if語(yǔ)句),以后會(huì)有計(jì)算屬性。
{ 1+2 } { true? "yes":"no" }
2. 字符串模版
template字符串
tempalte => 選項(xiàng)對(duì)象的屬性
模版將會(huì)替換掛載的元素。掛載元素的內(nèi)容都會(huì)被忽略,根節(jié)點(diǎn)只有一個(gè),將html結(jié)構(gòu)寫(xiě)在一對(duì)script標(biāo)簽中,設(shè)置type="x-template"。
<body> <div id="box"> </div> </body> <script src="vue.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function () { var str = '<h2>hello pink!</h2>' var vm = new Vue({ el: '#box', template: str }); },false); </script>
說(shuō)明權(quán)重比較高,直接“代替”掛載點(diǎn),把原來(lái)的html替換后顯示。
//代碼片段這個(gè)就是利用script標(biāo)簽對(duì)內(nèi)定義模版,局限性:不能跨文件使用,一個(gè)頁(yè)面中可以使用 <body> <div id="box"> </div> </body> <script src="vue.js"></script> <script type="x-template" id="str"> <p>我是一個(gè)p標(biāo)簽</p> </script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function () { var vm = new Vue({ el: '#box', template: '#str' }); },false); </script>
Vue實(shí)例,每一個(gè)應(yīng)用都是通過(guò)Vue這個(gè)構(gòu)造函數(shù)創(chuàng)建根實(shí)例(root instance)啟動(dòng)New Vue(選項(xiàng)對(duì)象)。需要傳入選項(xiàng)對(duì)象,對(duì)象包含掛在元素,數(shù)據(jù),模板、方法等。
el:掛載元素選擇器 --- String|HtmlElement
data:代理數(shù)據(jù) --- Object|Function
methods:定義方法 --- Object
Vue代理data數(shù)據(jù),每個(gè)vue實(shí)例都會(huì)代理其data對(duì)象里所有的屬性,這些被代理的屬性是響應(yīng)的。新添加的屬性不具備響應(yīng)功能,改變后不會(huì)更新視圖。
Vue實(shí)例自身屬性和方法,暴露自身的屬性和方法,以“$”開(kāi)頭的,例如:$el、$data。。。
var vm = new Vue({ el: '#app', data: { message: 'hello,Datura!!!' }, methods: { test (){ alert(1); } }, compontents:{ //這里存放組件 } }); /* vm就是new出來(lái)的實(shí)例 */ console.log(vm.$data);//也就是數(shù)據(jù)data,后面還有很多掛載在vm(new出來(lái)的)實(shí)例上的屬性 //代碼片段放在template標(biāo)簽里,并給一個(gè)id名 <body> <template id="tem"> <p>我是template</p> </template> <div id="box"> </div> </body> <script src="vue.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function () { var vm = new Vue({ el: '#box', template: '#tem' }); },false); </script>
3. 模版—render函數(shù)
render函數(shù)很接近編輯器
render => 選項(xiàng)對(duì)象屬性
數(shù)據(jù)對(duì)象屬性
class: {}, => 綁定class,和v-bind:class一樣的API style: {}, => 綁定樣式,和v-bind:style一樣的API attrs: {}, => 添加行間屬性 domProps: {}, => DOM元素屬性 on: {}, => 綁定事件 nativeOn: {}, => 監(jiān)聽(tīng)原生事件 directives: {}, => 自定義指令 scopedSlots: {}, => slot作用域 slot: {}, => 定義slot名稱 和組件有關(guān)系,插曹 key: "key", => 給元素添加唯一標(biāo)識(shí) ref: "ref", => 引用信息 2Vue.js的條件、循環(huán)語(yǔ)句 2-1條件語(yǔ)句 v-if :根據(jù)值的真假,切換元素會(huì)被銷毀、重建; => 在dom中已消失 v-show :根據(jù)值的真假,切換元素的display屬性; v-else :條件都不符合時(shí)渲染; v-else-if :多條件判斷,為真則渲染;
一、V-if
條件判斷使用 v-if 指令:
<div id="app"> <p v-if="seen">現(xiàn)在你看到我了</p> <template v-if="ok"> <p>哈哈哈,打字辛苦啊?。。?lt;/p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
這里, v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來(lái)決定是否插入 p 元素。
二、v-else
可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊:
隨機(jī)生成一個(gè)數(shù)字,判斷是否大于0.5,然后輸出對(duì)應(yīng)信息:
<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>
三、v-show
我們也可以使用 v-show 指令來(lái)根據(jù)條件展示元素:
<div id="app"> <h1 v-show="ok">Hello!</h1> </div> <script> new Vue({ el: '#app', data: { ok: true } }) </script>
四、v-else-if
v-else-if 在 2.1.0 新增,顧名思義,用作 v-if 的 else-if 塊??梢枣?zhǔn)降亩啻问褂茫?/p>
判斷 type 變量的值:
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
[v-show、v-if的使用與比較]
① v-show :根據(jù)值的真假,切換元素的display屬性;
v-show的元素會(huì)始終渲染并保持在DOM中。
v-show并不支持template語(yǔ)法。
② v-if是真實(shí)的條件渲染,因?yàn)樗麜?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)匿N毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。
③ v-if有更高的切換消耗而v-show有更高的初始渲染消耗。
如果需要頻繁切換使用v-show更好,如果在運(yùn)行時(shí)條件不大可能改變,使用v-if比較好
2-2 循環(huán)語(yǔ)句 v-for
① 語(yǔ)法:v-for="x in items"
x是索引;items是數(shù)組,這樣進(jìn)行遍歷
② v-for循環(huán)是不斷創(chuàng)建新的標(biāo)簽,標(biāo)簽里的內(nèi)容,我們決定,一般都是放在數(shù)組里,然后遍歷顯示出來(lái)。也可以放對(duì)象 ,遍歷對(duì)象。
③ 當(dāng) v-if 與 v-for 一起使用時(shí),v-for 具有比 v-if 更高的優(yōu)先級(jí)。
<body> <div id="app"> <ul> <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循環(huán)出來(lái)的列表項(xiàng) </ul> </div> </body> <script src="../vue.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded',function () { var vm = new Vue({ el: '#app', data:{ fruitsArr:['apple','banana','orage','pear'] //數(shù)據(jù)源 } }); },false); </script>
總結(jié)
以上所述是小編給大家介紹的Vue.js用法詳解,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
ElementUI 詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)
這篇文章主要介紹了ElementUI詳細(xì)分析DatePicker 日期選擇器實(shí)戰(zhàn)教程,本文通過(guò)實(shí)例代碼圖文介紹給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08vue 支持百萬(wàn)量級(jí)的無(wú)限滾動(dòng)組件詳解
這篇文章主要為大家介紹了vue 支持百萬(wàn)量級(jí)的無(wú)限滾動(dòng)組件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02vue-cli 打包使用history模式的后端配置實(shí)例
今天小編就為大家分享一篇vue-cli 打包使用history模式的后端配置實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例
本文主要介紹了vue ElementUI的from表單實(shí)現(xiàn)登錄效果的示例,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法
今天小編就為大家分享一篇vue實(shí)現(xiàn)條件判斷動(dòng)態(tài)綁定樣式的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue $router.push打開(kāi)新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開(kāi)頁(yè)面,但通過(guò)結(jié)合window.open方法和$router.resolve方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行的示例代碼
這篇文章主要介紹了vue flex 布局實(shí)現(xiàn)div均分自動(dòng)換行,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08