VUE學習筆記

時間 2019-11-30

標籤 vue 學習筆記简体版

原文原文鏈接

HelloWord

能夠直接把Vue當作一個js庫使用，因此它能夠很容易的接入到你的項目或者單個頁面中。甚至你能夠只使用它的雙向綁定功能。html

好比：咱們有一個需求，一個網頁上一個Div標籤，把json對象上的數據放到Div上去：vue

第一步：建立一個文件夾並建立一個html文件好比：index.html.
第二步：引入Vue庫<script src="https://unpkg.com/vue/dist/vue.js"></script>
第三步：建立一個Div且給它一個id，好比：app
第四步：建立Vue的對象，並把數據綁定到上面建立好的div上去。

最終的代碼以下：git

<!--第一步：建立文件夾及html文件-->
<!DOCTYPE html> 
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HelloWorld</title>
  <!--第二步：引入Vue庫-->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
  <!--第三步:建立一個Div-->
  <div id="app">
    <!--Vue的模板的綁定數據的方法-->
    {{ message }}
  </div>

  <!--第四步：建立Vue的對象，並把數據綁定到div上-->
  <script>
    var app = new Vue({         // 建立Vue對象。Vue的核心對象。
      el: '#app',               // el屬性：把當前Vue對象掛載到div標籤上，#app是id選擇器
      data: {                   // data: 是Vue對象中綁定的數據
        message: 'Hello Vue!'   // message 自定義的數據
      }
    });
  </script>
</body>
</html>

1、指令

最基本的就是經過雙花括號進行設置，裏面能夠是數據、JS單表達式等。github

<div id="app">
  {{ message }}
</div>

v-bind和v-modeljson

v-bind(:)：單向綁定數據到DOM。bind的屬性是標籤的prop屬性。api

具備修飾符屬性。數組

能夠與class或style結合。緩存
v-model：雙向綁定數據和DOM。app

具備修飾符屬性。異步

特別的，v-html用於將數據顯示爲html，防止XSS攻擊。

v-if和v-for

v-if：用來決定顯示元素，效果相似於visibile。注意Vue默認用「就地複用」策略，能夠經過添加key來解決。

v-show：用來決定是否顯示元素，效果相似於display。
v-for：用來決定重疊元素。注意Vue默認用「就地複用」策略，能夠經過添加key來解決。

v-for的優先級大於v-if。v-for的數據元素對象以下:
```
{
    index:number,
    item:{
        key:object,
        value:object
    }
}
```

v-on

用於綁定事件，簡寫爲@。具備修飾符屬性。

特別注意

像對象、數組的一些方法改變對象或數據後數據並不能反應到Vue上，所以Vue提供瞭如下一些方法：

關於對象的

Vue不能檢測對象屬性的添加或刪除。所以Vue提供了Vue.set(object, key, value) 方法向數據對象添加響應式屬性。
關於數組的

Vue不能檢測如下變更的數組：
- 當你利用索引直接設置一個項時，例如vm.items[indexOfItem] = newValue
  
  能夠經過Vue.set(vm.items, indexOfItem, newValue)進行設置。
- 當你修改數組的長度時，例如vm.items.length = newLength
  
  能夠經過vm.items.splice(newLength)設置。

2、實例

一、實例屬性

一個完整的vue實例以下：

var vm = new Vue({
    el: '#app',
    name: 'app',
    data: {
        a: 1
    },
    watch: {
        // 完整寫法
        a: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        }
    }
    computed: {
        compA: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
    },
    methods: {
        methA: function () {
          this.a++
        }
    },
    [hooks]:...
})

el

提供一個在頁面上已存在的 DOM元素做爲Vue實例的掛載目標。能夠是CSS選擇器，也但是個 HTMLElement實例。在實例掛載以後元素能夠用 vm.$el 訪問。

若是這個選項在實例化時有做用，實例將當即進入編譯過程。不然需顯式調用 vm.$mount() 手動開啓編譯。
data

data的類型是Object或者Function。若是是組件對象中data必須是Function類型。
watch(偵聽屬性)

watch含有的屬性是動態計算的(計算是有緩存的。)，而data含有的屬性是靜態的。當watch含有的屬性依賴於data含有的屬性時，data含有的屬性改變也會致使watch含有的屬性刷新。

watch的key是須要觀察的表達式(值也能夠是方法名，或者包含選項的對象)，value是對應回調函數。Vue 實例將會在實例化時調用 $watch()，遍歷watch對象的每個屬性。計算是有緩存的。

雖然計算屬性比偵聽屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。這就是爲何Vue經過 watch 選項提供了一個更通用的方法來響應數據的變化。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。
computed(計算屬性)

computed含有的屬性是動態計算的(計算是有緩存的。)，而data含有的屬性是靜態的。當computed含有的屬性依賴於data含有的屬性時，data含有的屬性改變也會致使computed含有的屬性刷新。

computed屬性會自動混入Vue實例中。全部getter和setter的this上下文自動地綁定爲Vue實例。這就很強大：在計算屬性中定義的函數裏面能夠直接使用指向了vue實例的this，異常方便。
methods(方法屬性)

methods屬性會自動混入到Vue實例中。方法中的 this 自動綁定爲Vue實例。能夠直接經過VM實例訪問這些方法，或者在指令表達式中使用。

注意，不該該使用箭頭函數來定義method函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級做用域的上下文，因此this將不會按照指望指向Vue實例，this.a將是undefined。
[hooks]

生命週期的鉤子函數，具體看下面的解釋。

二、生命週期

Vue實例有一個完整的生命週期，從建立、掛載、渲染\更新\渲染、銷燬等一系列過程，咱們稱這是Vue的生命週期。通俗說就是Vue實例從建立到銷燬的過程，就是生命週期。

beforeCreate

在實例初始化以後，數據觀測和事件配置以前被調用。
created

實例已經建立完成以後被調用。在這一步實例已完成如下的配置：數據觀測(屬性和方法的運算)和事件配置(事件回調)。然而掛載階段還沒開始，$el屬性目前不可見。
beforeMount

在掛載開始以前被調用：相關的render函數首次被調用。
mounted

el被新建立的vm.$el替換並掛載到實例上去以後調用該鉤子。若是root實例掛載了一個文檔內元素，當 mounted被調用時vm.$el也在文檔內。
beforeUpdate

因爲數據更改致使的虛擬DOM從新渲染和打補丁，在這以前會調用該鉤子。

你能夠在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。
updated

因爲數據更改致使的虛擬DOM從新渲染和打補丁，在這以後會調用該鉤子。

當這個鉤子被調用時，組件DOM已經更新，因此你如今能夠執行依賴於DOM的操做。然而在大多數狀況下，你應該避免在此期間更改狀態，由於這可能會致使更新無限循環。
beforeDestroy

實例銷燬以前調用。在這一步，實例仍然徹底可用。
destroyed

實例銷燬以後調用。調用後Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。

全局配置

silent：

// 取消 Vue 全部的日誌與警告
Vue.config.silent = true

devtools：

// 務必在加載Vue以後，當即同步設置如下內容
// 配置是否容許vue-devtools檢查代碼。開發版本默認爲true，生產版本默認爲false。生產版本設爲 true能夠啓用檢查。
Vue.config.devtools = true

全局API

Vue的全局API提供大量的功能，好比擴展組件Vue.extend 的用法、Vue.use加載插件、Vue.filter加載過濾器、Vue.directive自定義指令等。這裏再也不進行介紹，請參看這裏。

3、組件

組件其實就是一個擁有樣式、動畫、js邏輯、HTML結構的綜合塊。Vue提供了一個全局的APIVue.extend幫助咱們對Vue實例進行擴展，擴展完了以後，就能夠用此擴展對象建立新的Vue實例了。相似於繼承的方式。

4、路由

學習教程：https://www.aicoder.com/vue/preview/all.html

學習教程：https://github.com/malun666/vue-stepbystep

1. Vue學習筆記
2. 學習筆記：Vue
3. vue學習筆記
4. VUE 學習筆記
5. Vue 學習筆記
6. vue學習筆記、
7. VUE學習筆記
8. 學習筆記-vue
9. vue 學習筆記
10. 【VUE】學習筆記
更多相關文章...
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
• Tomcat學習筆記（史上最全tomcat學習筆記）
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

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