Vue.js用法詳解
vue.js 教程
Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計。
Vue 的目標(biāo)是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue 學(xué)習(xí)起來非常簡單，本教程基于 Vue 2.1.8 版本測試。
前 言
前段時間為了一個數(shù)據(jù)查詢的項目自學(xué)了Vue，感覺這款框架還是很不錯的，今天就整理整理這個框架如何使用，希望對正在學(xué)這個框架的小伙伴有所幫助~
首先，我們先來了解一下Vue：
Vue.js是一套構(gòu)建用戶界面(user interface)的漸進式框架。與其他重量級框架不同的是，Vue 從根本上采用最小成本、漸進增量(incrementally adoptable)的設(shè)計。Vue 的核心庫只專注于視圖層，并且很容易與其他第三方庫或現(xiàn)有項目集成。另一方面，當(dāng)與單文件組件和 Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用程序提供有力驅(qū)動。所以，Vue其實還是很強大的。
1.Vue.js的安裝與模版語法
Vue的使用非常簡單，直接下載Vue.js或者Vue.min.js導(dǎo)入就可以使用。
1-1 模板語法
Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實例的數(shù)據(jù)。
Vue.js 的核心是一個允許你采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。
結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時， Vue 能夠智能地計算出重新渲染組件的最小代價并應(yīng)用到 DOM 操作上。
1. html模版
html模版：基于DOM的模版，模版都是可解析的有效的HTML
插值：
文本：使用“Mustache”語法（大括號）{{ value }}；作用：替換實例上的屬性值，當(dāng)值改變時，插值內(nèi)容會被自動更新。也可使用v-text="value"代替。
<p>{{ value }}<p> 等價于 <p v-text="value"></p>
原生的html：雙大括號輸出的文本，不會解析html標(biāo)簽。也就是說當(dāng)實例的data為html標(biāo)簽時，不能解析而是直接輸出出來。此時如想要解析，可使用v-html="value"代替。
new Vue({
data:{
value: `<span>我是一個span標(biāo)簽</span>`
}
});
<p>{{ value }}<p> 頁面展示 => <span>我是一個span標(biāo)簽</span>
<p v-html="value"><p> 頁面展示 => 我是一個span標(biāo)簽
需要注意的是，有時候因為一些網(wǎng)絡(luò)延遲等原因，用戶會在也買年中先看到{{ xxx }}，然后才有數(shù)據(jù)。我們?nèi)粝氡苊獯诵Ч?，可用v-text="xxxx"代替。
屬性：使用v-bind進行綁定，可以響應(yīng)變化。
<h2 :class="{red:show}">標(biāo)題</h2> => 注意此處的show為data內(nèi)的一個布爾值數(shù)據(jù)，若真則添加red的class，若假則移除red的class，
使用javascript表達式：可以寫簡單的表達式。（可以簡單的三目運算，但是不可以寫if語句），以后會有計算屬性。
{ 1+2 }
{ true? "yes":"no" }
2. 字符串模版
template字符串
tempalte => 選項對象的屬性
模版將會替換掛載的元素。掛載元素的內(nèi)容都會被忽略，根節(jié)點只有一個，將html結(jié)構(gòu)寫在一對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>
說明權(quán)重比較高，直接“代替”掛載點，把原來的html替換后顯示。
//代碼片段這個就是利用script標(biāo)簽對內(nèi)定義模版，局限性：不能跨文件使用，一個頁面中可以使用
<body>
<div id="box">
</div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
<p>我是一個p標(biāo)簽</p>
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#box',
template: '#str'
});
},false);
</script>
Vue實例，每一個應(yīng)用都是通過Vue這個構(gòu)造函數(shù)創(chuàng)建根實例（root instance）啟動New Vue（選項對象）。需要傳入選項對象，對象包含掛在元素，數(shù)據(jù)，模板、方法等。
el：掛載元素選擇器 --- String|HtmlElement
data：代理數(shù)據(jù) --- Object|Function
methods：定義方法 --- Object
Vue代理data數(shù)據(jù)，每個vue實例都會代理其data對象里所有的屬性，這些被代理的屬性是響應(yīng)的。新添加的屬性不具備響應(yīng)功能，改變后不會更新視圖。
Vue實例自身屬性和方法，暴露自身的屬性和方法,以“$”開頭的，例如：$el、$data。。。
var vm = new Vue({
el: '#app',
data: {
message: 'hello,Datura!!!'
}，
methods: {
test (){
alert(1);
}
},
compontents:{
//這里存放組件
}
});
/* vm就是new出來的實例 */
console.log(vm.$data);//也就是數(shù)據(jù)data，后面還有很多掛載在vm（new出來的）實例上的屬性
//代碼片段放在template標(biāo)簽里，并給一個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 => 選項對象屬性
數(shù)據(jù)對象屬性
class: {}, => 綁定class，和v-bind:class一樣的API
style: {}, => 綁定樣式，和v-bind:style一樣的API
attrs: {}, => 添加行間屬性
domProps: {}, => DOM元素屬性
on: {}, => 綁定事件
nativeOn: {}, => 監(jiān)聽原生事件
directives: {}, => 自定義指令
scopedSlots: {}, => slot作用域
slot: {}, => 定義slot名稱 和組件有關(guān)系，插曹
key: "key", => 給元素添加唯一標(biāo)識
ref: "ref", => 引用信息
2Vue.js的條件、循環(huán)語句
2-1條件語句
v-if ：根據(jù)值的真假，切換元素會被銷毀、重建； => 在dom中已消失
v-show ：根據(jù)值的真假，切換元素的display屬性；
v-else ：條件都不符合時渲染；
v-else-if ：多條件判斷，為真則渲染；
一、V-if
條件判斷使用 v-if 指令：
<div id="app">
<p v-if="seen">現(xiàn)在你看到我了</p>
<template v-if="ok">
<p>哈哈哈，打字辛苦啊?。?！</p>
</template>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
這里， v-if 指令將根據(jù)表達式 seen 的值(true 或 false )來決定是否插入 p 元素。
二、v-else
可以用 v-else 指令給 v-if 添加一個 "else" 塊：
隨機生成一個數(shù)字，判斷是否大于0.5，然后輸出對應(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 指令來根據(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的元素會始終渲染并保持在DOM中。
v-show并不支持template語法。
② v-if是真實的條件渲染，因為他會確保條件塊在切換當(dāng)中適當(dāng)?shù)匿N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。
③ v-if有更高的切換消耗而v-show有更高的初始渲染消耗。
如果需要頻繁切換使用v-show更好，如果在運行時條件不大可能改變，使用v-if比較好
2-2 循環(huán)語句 v-for
① 語法：v-for="x in items"
x是索引；items是數(shù)組，這樣進行遍歷
② v-for循環(huán)是不斷創(chuàng)建新的標(biāo)簽，標(biāo)簽里的內(nèi)容，我們決定，一般都是放在數(shù)組里，然后遍歷顯示出來。也可以放對象 ，遍歷對象。
③ 當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級。
<body>
<div id="app">
<ul>
<li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循環(huán)出來的列表項
</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用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
elementUI Tree 樹形控件單選實現(xiàn)示例
在ElementUI中樹形控件本身不支持單選功能,本文就來介紹一下如何實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要為大家介紹了preload對比prefetch的使用區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue商城中商品“篩選器”功能的實現(xiàn)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
作為一名剛?cè)腴T計算機語言的人來說,要想快速完成測試開發(fā)地圖項目,肯定要接用到SuperMap，本文主要介紹了Vue 使用超圖SuperMap的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)tab欄點擊高亮效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue elementui tree 任意級別拖拽功能代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題
這篇文章主要介紹了vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
這篇文章主要介紹了vue移動端自適應(yīng)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05