JavaScript的MVVM庫(kù)Vue.js入門學(xué)習(xí)筆記
更新時(shí)間：2016年05月03日 15:22:50 作者：小渝人兒
這篇文章主要介紹了JavaScript的MVVM庫(kù)Vue.js入門學(xué)習(xí)筆記,Vue.js是一個(gè)新興的js庫(kù),主要用于實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件,需要的朋友可以參考下
一、v-bind 縮寫
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- 完整語法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 縮寫 --> <button :disabled="someDynamicCondition">Button</button>
二、v-on 縮寫
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
三、過濾器
{{ message | capitalize }}
四、條件渲染
v-if <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> template-v-if <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> v-show <h1 v-show="ok">Hello!</h1>
五、列表渲染 for
v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
});
<ul id="example-2">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
});
數(shù)組變動(dòng)檢測(cè)
Vue.js 包裝了被觀察數(shù)組的變異方法，故它們能觸發(fā)視圖更新。被包裝的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()
example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/);
});
template-v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
對(duì)象 v-for
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ $key }} : {{ value }}
</li>
</ul>
new Vue({
el: '#repeat-object',
data: {
object: {
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
值域 v-for
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
六、方法與事件處理器
方法處理器
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 對(duì)象中定義方法
methods: {
greet: function (event) {
// 方法內(nèi) `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代碼中調(diào)用方法
vm.greet(); // -> 'Hello Vue.js!'
內(nèi)聯(lián)語句處理器
<div id="example-2">
<button v-on:click="say('hi')">Say Hi</button>
<button v-on:click="say('what')">Say What</button>
</div>
new Vue({
el: '#example-2',
methods: {
say: function (msg) {
alert(msg)
}
}
});
有時(shí)也需要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件?？梢杂锰厥庾兞?$event 把它傳入方法
<button v-on:click="say('hello!', $event)">Submit</button>
methods: {
say: function (msg, event) {
// 現(xiàn)在我們可以訪問原生事件對(duì)象
event.preventDefault()
}
};
## 事件修飾符
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"> <!-- 只有修飾符 --> <form v-on:submit.prevent></form>
## 按鍵修飾符
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
全部的按鍵別名：enter，tab，delete，esc，space，up，down，left，right
## 其他實(shí)例
new Vue({
el: '#demo',
data: {
newLabel: '',
stats: stats
},
methods: {
add: function (e) {
e.preventDefault()
if (!this.newLabel) {
return;
}
this.stats.push({
label: this.newLabel,
value: 100
});
this.newLabel = '';
},
remove: function (stat) {
if (this.stats.length > 3) {
this.stats.$remove(stat); // 注意這里的$remove
} else {
alert('Can\'t delete more!')
}
}
}
});
七、過渡
CSS 過渡
<div v-if="show" transition="expand">hello</div>
然后為 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 規(guī)則:
/* 必需 */
.expand-transition {
transition: all .3s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
}
/* .expand-enter 定義進(jìn)入的開始狀態(tài) */
/* .expand-leave 定義離開的結(jié)束狀態(tài) */
.expand-enter, .expand-leave {
height: 0;
padding: 0 10px;
opacity: 0;
}
你可以在同一元素上通過動(dòng)態(tài)綁定實(shí)現(xiàn)不同的過渡：
<div v-if="show" :transition="transitionName">hello</div>
new Vue({
el: '...',
data: {
show: false,
transitionName: 'fade'
}
}
另外，可以提供 JavaScript 鉤子:
Vue.transition('expand', {
beforeEnter: function (el) {
el.textContent = 'beforeEnter'
},
enter: function (el) {
el.textContent = 'enter'
},
afterEnter: function (el) {
el.textContent = 'afterEnter'
},
enterCancelled: function (el) {
// handle cancellation
},
beforeLeave: function (el) {
el.textContent = 'beforeLeave'
},
leave: function (el) {
el.textContent = 'leave'
},
afterLeave: function (el) {
el.textContent = 'afterLeave'
},
leaveCancelled: function (el) {
// handle cancellation
}
});
八、組件
1.注冊(cè)
// 定義
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注冊(cè)
Vue.component('my-component', MyComponent);
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
或者直接寫成：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
2.使用prop 傳遞數(shù)據(jù)
實(shí)例一：
Vue.component('child', {
// 聲明 props
props: ['msg'],
// prop 可以用在模板內(nèi)
// 可以用 `this.msg` 設(shè)置
template: '<span>{{ msg }}</span>'
});
<child msg="hello!"></child>
實(shí)例二：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
});
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
3.動(dòng)態(tài)props
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
使用 v-bind 的縮寫語法通常更簡(jiǎn)單：
<child :my-message="parentMsg"></child>
4.Prop 綁定類型
prop 默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過來不會(huì)。這是為了防止子組件無意修改了父組件的狀態(tài)——這會(huì)讓應(yīng)用的數(shù)據(jù)流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強(qiáng)制雙向或單次綁定：
比較語法：
<!-- 默認(rèn)為單向綁定 --> <child :msg="parentMsg"></child> <!-- 雙向綁定 --> <child :msg.sync="parentMsg"></child> <!-- 單次綁定 --> <child :msg.once="parentMsg"></child> 其他實(shí)例： <modal :show.sync="showModal"> <h3 slot="header">custom header</h3> </modal> </div>
5.Prop 驗(yàn)證
組件可以為 props 指定驗(yàn)證要求。當(dāng)組件給其他人使用時(shí)這很有用，因?yàn)檫@些驗(yàn)證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時(shí) props 的值是一個(gè)對(duì)象，包含驗(yàn)證要求：
Vue.component('example', {
props: {
// 基礎(chǔ)類型檢測(cè) （`null` 意思是任何類型都可以）
propA: Number,
// 必需且是字符串
propB: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propC: {
type: Number,
default: 100
},
// 對(duì)象/數(shù)組的默認(rèn)值應(yīng)當(dāng)由一個(gè)函數(shù)返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定這個(gè) prop 為雙向綁定
// 如果綁定類型不對(duì)將拋出一條警告
propE: {
twoWay: true
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
},
// 轉(zhuǎn)換函數(shù)（1.0.12 新增）
// 在設(shè)置值之前轉(zhuǎn)換值
propG: {
coerce: function (val) {
return val + '' // 將值轉(zhuǎn)換為字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 將 JSON 字符串轉(zhuǎn)換為對(duì)象
}
}
}
});
其他實(shí)例：
Vue.component('modal', {
template: '#modal-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
6.注冊(cè)
// 定義
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注冊(cè)
Vue.component('my-component', MyComponent);
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
或者直接寫成：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
// 創(chuàng)建根實(shí)例
new Vue({
el: '#example'
});
<div id="example">
<my-component></my-component>
</div>
7.使用prop 傳遞數(shù)據(jù)
實(shí)例一：
Vue.component('child', {
// 聲明 props
props: ['msg'],
// prop 可以用在模板內(nèi)
// 可以用 `this.msg` 設(shè)置
template: '<span>{{ msg }}</span>'
});
<child msg="hello!"></child>
實(shí)例二：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
});
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
8.動(dòng)態(tài)props
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
使用 v-bind 的縮寫語法通常更簡(jiǎn)單：
<child :my-message="parentMsg"></child>
9.Prop 綁定類型
prop 默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過來不會(huì)。這是為了防止子組件無意修改了父組件的狀態(tài)——這會(huì)讓應(yīng)用的數(shù)據(jù)流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強(qiáng)制雙向或單次綁定：
比較語法：
<!-- 默認(rèn)為單向綁定 --> <child :msg="parentMsg"></child> <!-- 雙向綁定 --> <child :msg.sync="parentMsg"></child> <!-- 單次綁定 --> <child :msg.once="parentMsg"></child>
其他實(shí)例：
<modal :show.sync="showModal"> <h3 slot="header">custom header</h3> </modal> </div>
10.Prop 驗(yàn)證
組件可以為 props 指定驗(yàn)證要求。當(dāng)組件給其他人使用時(shí)這很有用，因?yàn)檫@些驗(yàn)證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時(shí) props 的值是一個(gè)對(duì)象，包含驗(yàn)證要求：
Vue.component('example', {
props: {
// 基礎(chǔ)類型檢測(cè) （`null` 意思是任何類型都可以）
propA: Number,
// 必需且是字符串
propB: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propC: {
type: Number,
default: 100
},
// 對(duì)象/數(shù)組的默認(rèn)值應(yīng)當(dāng)由一個(gè)函數(shù)返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定這個(gè) prop 為雙向綁定
// 如果綁定類型不對(duì)將拋出一條警告
propE: {
twoWay: true
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
},
// 轉(zhuǎn)換函數(shù)（1.0.12 新增）
// 在設(shè)置值之前轉(zhuǎn)換值
propG: {
coerce: function (val) {
return val + '' // 將值轉(zhuǎn)換為字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 將 JSON 字符串轉(zhuǎn)換為對(duì)象
}
}
}
});
其他實(shí)例：
Vue.component('modal', {
template: '#modal-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
11.使用slot分發(fā)內(nèi)容
<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。這個(gè)元素自身將被替換。
有 name 特性的 slot 稱為命名 slot。 有 slot 特性的內(nèi)容將分發(fā)到名字相匹配的命名 slot。
例如，假定我們有一個(gè) multi-insertion 組件，它的模板為：
<div> <slot name="one"></slot> <slot></slot> <slot name="two"></slot> </div>
父組件模板：
<multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p> </multi-insertion>
渲染結(jié)果為：
<div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p> </div>
您可能感興趣的文章:
- Android單項(xiàng)綁定MVVM項(xiàng)目模板的方法
- 淺析vue中的MVVM實(shí)現(xiàn)原理
- vue中的mvvm模式講解
- 如何在iOS上使用MVVM進(jìn)行路由詳解
- vue實(shí)現(xiàn)簡(jiǎn)單的MVVM框架
- MVVM 雙向綁定的實(shí)現(xiàn)代碼
- MVC、MVP和MVVM分別是什么_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
- MVVM模式下WPF動(dòng)態(tài)綁定展示圖片
- 詳解Android的MVVM框架 - 數(shù)據(jù)綁定
- vue,angular,avalon這三種MVVM框架優(yōu)缺點(diǎn)
- 詳解Android框架MVVM分析以及使用
相關(guān)文章
Axios是一個(gè)功能強(qiáng)大、易用性高的HTTP庫(kù),適用于大多數(shù)的前端項(xiàng)目,它提供了豐富的功能和靈活的配置選項(xiàng),可以滿足不同項(xiàng)目的需求,這篇文章主要介紹了vue中使用axios的作用,需要的朋友可以參考下2023-08-08
使用vue-router與v-if實(shí)現(xiàn)tab切換遇到的問題及解決方法
這篇文章主要介紹了vue-router與v-if實(shí)現(xiàn)tab切換的思考,需要的朋友可以參考下2018-09-09
基于axios請(qǐng)求封裝的vue應(yīng)用實(shí)例代碼
這篇文章主要給大家介紹了基于axios請(qǐng)求封裝的vue應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vue前端如何實(shí)現(xiàn)生成PDF并下載功能詳解
在前端的崗位上經(jīng)常需要實(shí)現(xiàn)個(gè)生成個(gè)并下載的可視化圖表頁P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實(shí)現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向滑動(dòng)輸入條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)評(píng)論列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue中的ref和reactive是兩種不同的數(shù)據(jù)響應(yīng)式管理方式,通過ref創(chuàng)建的響應(yīng)式對(duì)象在訪問和修改時(shí)會(huì)自動(dòng)觸發(fā)重新渲染,本文給大家介紹vue中的ref/reactive區(qū)別及原理解析,感興趣的朋友跟隨小編一起看看吧2024-02-02
vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域(rectangle marker)的方法
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)矩形標(biāo)記區(qū)域 rectangle marker的方法，幫助大家實(shí)現(xiàn)區(qū)域標(biāo)記功能，感興趣的朋友可以了解下2020-10-10
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)1
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)的相關(guān)資料，允許采用簡(jiǎn)潔的模板語法聲明式的將數(shù)據(jù)渲染進(jìn)DOM，且數(shù)據(jù)與DOM綁定在一起，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
我們?cè)谧鲰?xiàng)目的時(shí)候經(jīng)常會(huì)遇到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于Vite配置代理Proxy解決跨域問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03