vue.js之我的總結

時間 2019-11-18

標籤 vue.js vue 我的總結欄目 JavaScript 简体版

原文原文鏈接

一、MVVM模式

MVVM模式（Model-View-ViewModel）的運做以下圖：html

1）上圖解析：ViewModel是Vue.js的核心，它是一個Vue實例。Vue實例是做用於某一個HTML元素上的，這個元素能夠是HTML的body元素，也能夠是指定了id的某個元素。vue

當建立了ViewModel後，雙向綁定是如何達成的呢？express

首先，咱們將上圖中的DOM Listeners和Data Bindings看做兩個工具，它們是實現雙向綁定的關鍵。api

從View側看，ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化，若是有變化，則更改Model中的數據；數組

從Model側看，當咱們更新Model中的數據時，Data Bindings工具會幫咱們更新頁面中的DOM元素。app

2）能夠經過hello word例子進一步解析：dom

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--這是咱們的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 這是咱們的Model
        var exampleData = {
            message: 'Hello World!'
        }

        // 建立一個 Vue 實例也就是 "ViewModel"
        // 它鏈接 View 與 Model
        new Vue({
            el: '#app',
            data: exampleData
        })
    </script>
</html>

根據上例中，能夠看出使用Vue的過程就是定義MVVM各個組成部分的過程的過程。ide

定義View
定義Model
建立一個Vue實例或"ViewModel"，它用於鏈接View和Model

在建立Vue實例時，須要傳入一個選項對象，選項對象能夠包含數據、掛載元素、方法、模生命週期鉤子等等。svg

在這個示例中，選項對象的el屬性指向View，el: '#app'表示該Vue實例將掛載到<div id="app">...</div>這個元素；工具

data屬性指向Model，data: exampleData表示咱們的Model是exampleData對象。

Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用一對大括號語法，在運行時{{ message }}會被數據對象的message屬性替換，因此頁面上會輸出"Hello World!"。

3）、雙向綁定

在Vue.js中可使用v-model指令在表單元素上建立雙向數據綁定。

能夠將上例中的view部分改成

<!--這是咱們的View-->
<div id="app">
    <p>{{ message }}</p>

<!--將message綁定到文本框-->

<input type="text" v-model="message"/>
</div>

效果以下圖：當更改文本框的值時，<p>{{ message }}</p> 中的內容也會被更新。

固然，反過來，若是改變message的值，文本框的值也會被更新，咱們能夠在Chrome控制檯進行嘗試。

經過該例子能夠總結以下：

Vue實例的data屬性指向exampleData，它是一個引用類型，改變了exampleData對象的屬性，同時也會影響Vue實例的data屬性。

二、Vue.js的經常使用指令

上面用到的v-model是Vue.js經常使用的一個指令

1）v-text

HTML：
<span id="app2" v-text="msg"></span>
<!-- 和下面的同樣 -->
<!-- <span>{{msg}}</span>-->

js:
//v-text
var example={
    msg:'hello word!'
}
new Vue({
    el:'#app2',
    data:example
})

2)v-html

更新元素的 innerHTML 。注意：內容按普通 HTML 插入 - 不會做爲 Vue 模板進行編譯。若是試圖使用 v-html 組合模板,能夠從新考慮經過是否經過使用組件來替代。

<div v-html="html"></div>

3)v-show

根據表達式之真假值，切換元素的 display CSS 屬性。

當條件變化時該指令觸發過渡效果。

HTML：
<p id="app4"  v-show="local">這是一個v-show命令指令</p>

js:
var local=new Vue({
    el:'#app4‘，
    data：{
        local：true
  }
})

//結果：在頁面上顯示這段話：這是一個v-show命令指令

//若是設置data：{local：false}則不顯示

4）v-if

在字符串模板中，如 Handlebars ，咱們得像這樣寫一個條件塊：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ，咱們使用 v-if 指令實現一樣的功能：

<h1 v-if="ok">Yes</h1>

也能夠用 v-else 添加一個「else」塊：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

`<template>` 中 `v-if` 條件組

由於 v-if 是一個指令，須要將它添加到一個元素上。可是若是咱們想切換多個元素呢？此時咱們能夠把一個 <template> 元素當作包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

5）v-else

v-else 元素必須緊跟在 v-if 元素或者 v-else-if的後面——不然它不能被識別。

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

6）v-else-if

v-if 的 else-if 塊。能夠鏈式的屢次使用：

<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>

7）v-for

基於源數據屢次渲染元素或模板塊。此指令之值，必須使用特定語法 alias in expression ，爲當前遍歷的元素提供別名

基本用法：

HTML：
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

js:
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {message: 'Foo' },
      {message: 'Bar' }
    ]
  }
})

結果：
Foo
Bar

在 v-for 塊中，咱們擁有對父做用域屬性的徹底訪問權限。 v-for 還支持一個可選的第二個參數爲當前項的索引。

HTML：
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

js:
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

結果：
Parent - 0 - Foo
Parent - 1 - Bar

也能夠用 of 替代 in 做爲分隔符，由於它是最接近 JavaScript 迭代器的語法：

<div v-for="item of items"></div>

Template v-for

如同 v-if 模板，你也能夠用帶有 v-for 的 <template> 標籤來渲染多個元素塊。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

對象迭代 v-for

你也能夠用 v-for 經過一個對象的屬性來迭代。

HTML:
<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

js:
new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

結果：
John
Doe
30


你也能夠提供第二個的參數爲鍵名：
<div v-for="(value, key) in object">
  {{ key }} : {{ value }}
</div>

第三個參數爲索引：
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

整數迭代 v-for

v-for 也能夠取整數。在這種狀況下，它將重複屢次模板。

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

結果：
1 2 3 4 5 6 7 8 9 10

7)v-on

.stop - 調用 event.stopPropagation()。
.prevent - 調用 event.preventDefault()。
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素自己觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。

用法：

綁定事件監聽器。事件類型由參數指定。表達式能夠是一個方法的名字或一個內聯語句，若是沒有修飾符也能夠省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也能夠監聽子組件觸發的自定義事件。

在監聽原生 DOM 事件時，方法以事件爲惟一的參數。若是使用內聯語句，語句能夠訪問一個 $event 屬性： v-on:click="handle('ok', $event)"。

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 中止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行爲 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行爲，沒有表達式 -->
<form @submit.prevent></form>
<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符，鍵代碼 -->
<input @keyup.13="onEnter">

在子組件上監聽自定義事件（當子組件觸發「my-event」時將調用事件處理器）：

<my-component @my-event="handleThis"></my-component>
<!-- 內聯語句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 組件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

9）v-bind

修飾符：

.prop - 被用於綁定 DOM 屬性。(what’s the difference?)
.camel - transform the kebab-case attribute name into camelCase. (supported since 2.1.0)

用法：

動態地綁定一個或多個特性，或一個組件 prop 到表達式。

在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。能夠經過下面的教程連接查看詳情。

在綁定 prop 時，prop 必須在子組件中聲明。能夠用修飾符指定不一樣的綁定類型。

沒有參數時，能夠綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 經過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定. 「prop」 必須在 my-component 中聲明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

10）v-model ：表單控件綁定

v-model 並不關心表單控件初始化所生成的值。由於它會選擇 Vue 實例數據來做爲具體的值

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

具體表單控制的例子可參考官網：http://cn.vuejs.org/v2/guide/forms.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。