JavaScript的MVVM庫怎么使用

本篇內(nèi)容介紹了“JavaScript的MVVM庫怎么使用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

一、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
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>


<div v-if="Math.random() > 0.5">
 Sorry
</div>
<div v-else>
 Not sorry
</div>
template-v-if
<template v-if="ok">
 <h2>Title</h2>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>
v-show
<h2 v-show="ok">Hello!</h2>

五、列表渲染 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ù)組變動檢測
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>

對象 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` 對象中定義方法
 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)
 }
 }
});

有時也需要在內(nèi)聯(lián)語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event 把它傳入方法

<button v-on:click="say('hello!', $event)">Submit</button>
 methods: {
 say: function (msg, event) {
 // 現(xiàn)在我們可以訪問原生事件對象
 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 時調(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

## 其他實例

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 定義進入的開始狀態(tài) */
/* .expand-leave 定義離開的結(jié)束狀態(tài) */
.expand-enter, .expand-leave {
 height: 0;
 padding: 0 10px;
 opacity: 0;
}

你可以在同一元素上通過動態(tài)綁定實現(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.注冊

// 定義
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
});

// 注冊
Vue.component('my-component', MyComponent);

// 創(chuàng)建根實例
new Vue({
 el: '#example'
});
<div id="example">
 <my-component></my-component>
</div>

或者直接寫成：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

 // 創(chuàng)建根實例
new Vue({
 el: '#example'
});
<div id="example">
  <my-component></my-component>
</div>

2.使用prop 傳遞數(shù)據(jù)
實例一：

Vue.component('child', {
 // 聲明 props
 props: ['msg'],
 // prop 可以用在模板內(nèi)
 // 可以用 `this.msg` 設(shè)置
 template: '<span>{{ msg }}</span>'
});
<child msg="hello!"></child>

實例二：

  Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
 });
 <!-- kebab-case in HTML -->
 <child my-message="hello!"></child>

3.動態(tài)props

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的縮寫語法通常更簡單：

<child :my-message="parentMsg"></child>

4.Prop 綁定類型
prop 默認是單向綁定：當父組件的屬性變化時，將傳導(dǎo)給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應(yīng)用的數(shù)據(jù)流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：

比較語法：

<!-- 默認為單向綁定 -->
<child :msg="parentMsg"></child>

<!-- 雙向綁定 -->
<child :msg.sync="parentMsg"></child>

<!-- 單次綁定 -->
<child :msg.once="parentMsg"></child>
其他實例：

<modal :show.sync="showModal">
 <h4 slot="header">custom header</h4>
 </modal>
</div>

5.Prop 驗證
組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象，包含驗證要求：

Vue.component('example', {
 props: {
 // 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
 propA: Number,
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 數(shù)字，有默認值
 propC: {
  type: Number,
  default: 100
 },
 // 對象/數(shù)組的默認值應(yīng)當由一個函數(shù)返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定這個 prop 為雙向綁定
 // 如果綁定類型不對將拋出一條警告
 propE: {
  twoWay: true
 },
 // 自定義驗證函數(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)換為對象
  }
 }
 }
});

其他實例：

Vue.component('modal', {
 template: '#modal-template',
 props: {
 show: {
  type: Boolean,
  required: true,
  twoWay: true 
 }
 }
});

6.注冊

// 定義
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
});

// 注冊
Vue.component('my-component', MyComponent);

// 創(chuàng)建根實例
new Vue({
 el: '#example'
});
<div id="example">
 <my-component></my-component>
</div>

或者直接寫成：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

 // 創(chuàng)建根實例
new Vue({
 el: '#example'
});
<div id="example">
  <my-component></my-component>
</div>

7.使用prop 傳遞數(shù)據(jù)
實例一：

Vue.component('child', {
 // 聲明 props
 props: ['msg'],
 // prop 可以用在模板內(nèi)
 // 可以用 `this.msg` 設(shè)置
 template: '<span>{{ msg }}</span>'
});
<child msg="hello!"></child>

實例二：

  Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
 });
 <!-- kebab-case in HTML -->
 <child my-message="hello!"></child>

8.動態(tài)props

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用 v-bind 的縮寫語法通常更簡單：

<child :my-message="parentMsg"></child>

9.Prop 綁定類型
prop 默認是單向綁定：當父組件的屬性變化時，將傳導(dǎo)給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應(yīng)用的數(shù)據(jù)流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：

比較語法：

<!-- 默認為單向綁定 -->
<child :msg="parentMsg"></child>

<!-- 雙向綁定 -->
<child :msg.sync="parentMsg"></child>

<!-- 單次綁定 -->
<child :msg.once="parentMsg"></child>

其他實例：

<modal :show.sync="showModal">
 <h4 slot="header">custom header</h4>
 </modal>
</div>

10.Prop 驗證
組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象，包含驗證要求：

Vue.component('example', {
 props: {
 // 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
 propA: Number,
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 數(shù)字，有默認值
 propC: {
  type: Number,
  default: 100
 },
 // 對象/數(shù)組的默認值應(yīng)當由一個函數(shù)返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定這個 prop 為雙向綁定
 // 如果綁定類型不對將拋出一條警告
 propE: {
  twoWay: true
 },
 // 自定義驗證函數(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)換為對象
  }
 }
 }
});

其他實例：

Vue.component('modal', {
 template: '#modal-template',
 props: {
 show: {
  type: Boolean,
  required: true,
  twoWay: true 
 }
 }
});

11.使用slot分發(fā)內(nèi)容
<slot> 元素作為組件模板之中的內(nèi)容分發(fā)插槽。這個元素自身將被替換。
有 name 特性的 slot 稱為命名 slot。 有 slot 特性的內(nèi)容將分發(fā)到名字相匹配的命名 slot。

例如，假定我們有一個 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>

“JavaScript的MVVM庫怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！