Vue-Basics

時間 2019-12-01

標籤 vue basics 简体版

原文原文鏈接

初識Vue

vue特性
MVVM

Vue實例和數據綁定

生命週期鉤子
文本插值和表達式
過濾器

計算屬性

用法
getter和setter
計算屬性緩存和方法
computed屬性和watch屬性

class與style綁定

綁定class的幾種語法
綁定內聯樣式

1、初識Vue

1.Vue是一個輕巧、高性能、可組件化的MVVM庫，是一個構建數據驅動的Web界面的庫。css

2.Vue是一套構建用戶界面的漸進式框架，與其它框架不一樣的是，Vue採用自底向上增量開發的設計。Vue的核心只關注圖層。html

3.Vue可驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。vue

Vue的特性

1.輕量級的框架git

2.雙向數據綁定github

3.指令npm

4.插件化數組

MVVM模式

Model view viewmodel，把MVC中的Controller和MVP中的presenter改爲viewmodel。Vue採用的模式就是MVVM的模式，視圖層和數據層雙向綁定。

view的變更會自動更新給viewmodel，反之亦然。

View是視圖層，HTML顯示頁面；緩存

ViewModel是業務邏輯層（一切js可視業務邏輯，如表單按鈕提交，自定義事件的註冊和處理邏輯都在viewmodel裏面負責監控兩邊的數據）；服務器

Model是數據層，對數據的處理（增刪改查） app

2、Vue實例和數據綁定

//--------HTML--------

<div id = 'app'>
{{msg}}
</div>



//--------JavaScript--------

var app = new Vue({
    el:'#app',
    data:{
    msg:'開始學習啦'
    }

})

1.el即element，用於指定頁面中已存在的DOM元素來掛載Vue實例，能夠是標籤，也能夠是css語法，經常使用就是ID。

2.datas聲明應用內須要雙向綁定的數據，一般全部要用到的數據都在data內聲明一下，以避免數據散落在業務邏輯中形成難以維護。也能夠指向一個已有的變量。

3.當掛載成功，能夠經過app.$el / app.$data 來訪問vue實例的屬性（訪問vue實例的屬性都用$開頭）

4.Vue自己也代理了data裏面的全部屬性，能夠直接經過app.msg進行訪問

生命週期鉤子

created------在實例被建立後被調用
mounted----當編譯好的HTML被掛載到對應的位置,這個操做完成後觸發
updated----當data中的數據改變,而且虛擬DOM從新渲染完成後觸發
destroyed----Vue 實例銷燬後調用。調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。該鉤子在服務器端渲染期間不被調用。
鉤子的this 指向調用它的實例

//--------HTML--------

<div id = 'app'>
    {{msg}}
</div>



//--------JavaScript--------

var app = new Vue({
        el: '#app',
        data: {
            msg: '開始學習啦',
        },
        created() {
            alert('vue實例建立完成，可是還未掛載')
        },
        mounted() {
            alert('vue實例建立完成，已經掛載')
        }
    })

注：

父對象與子對象鉤子執行順序：

先生成父對象；

再生成子對象；

子對象掛載到父對象上；

父對象掛載到頁面上。

文本插值和表達式

語法：{{}}

<div id='app'>
        {{6+6*3}} --- 進行簡單的運算
        {{6>3?Y:N}} --- 三元運算符
        {{if(6>3){}}} --- 報錯，文本插值不能是表達式的形式，只支持單個表達式
        {{var a = 1}} --- 報錯，var a ; a=1 ,這是個語句
</div>

過濾器

在{{}}插值的尾部添加一個管道符號"|",對數據進行過濾.
經常使用於格式化文本,如首字母大寫等.
過濾的規則自定義,經過給Vue實例添加選項filters來設置

{{data|filter1(11,22)}}中的第一個參數和第二個參數,分別對應過濾器的第二個參數和第三個參數,第一個參數始終是要過濾的那個數據.

時間案例

3、理解計算屬性

用法1:計算屬性運用於複雜邏輯

全部的計算屬性都以函數的形式體如今Vue實例的computed選項內,最終返回計算後的結果.
計算屬性多運用於複雜邏輯,包括運算\函數等,最終只返回一個結果.

例1:

<script src="https://unpkg.com/vue"></script>

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

new Vue({
  el: '#app', data: { text: '123,456,789' }, computed: { num() { return this.text.split(',').reverse().join(',') } } })

用法2:計算屬性依賴多個Vue實例的數據

只要其中任一數據變化,計算屬性就會執行,視圖也會同步更新.

例2:展現兩個bag中的物品總價

<div id="app">
        {{prices}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        new Vue ({ el:'#app', data:{ bag1:[{name:'a',price:100,count:5},{name:'b',price:200,count:3}], bag2:[{name:'c',price:300,count:2},{name:'d',price:600,count:8}] }, computed:{ prices(){ var prices = 0 for(var i = 0;i<this.bag1.length;i++){ prices+=this.bag1[i].price*this.bag1[i].count } for(var j = 0;j<this.bag2.length;j++){ prices+=this.bag2[j].price*this.bag2[j].count } return prices } } }) </script>

getter和setter

每個計算屬性都包含了一個getter和setter,計算屬性默認都是getter(例1 例2都是getter)

例3:使用getter和setter

<body>
    <div id="app">
        {{fullName}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var ad = new Vue({ el: '#app', data: { firstName: 'xiao', lastName: 'bai' }, computed: { fullName: { get() { return this.firstName + ' ' + this.lastName }, set(newValue) { var names = newValue.split(',') //分隔爲數組 this.firstName = names[0] this.lastName = names[1] } } } }) </script> </body>

*計算屬性能夠依賴其它計算屬性

*計算屬性能夠依賴當前Vue實例的數據,還能夠依賴多個Vue實例的數據

計算屬性緩存與方法

調用 methods 裏的方法也能夠與計算屬性起到一樣的做用。計算屬性computed具備緩存，而methods無緩存。

頁面中的方法：若是是調用方法，只要頁面從新渲染。方法就會從新執行，不須要渲染，則不須要從新執行。

計算屬性：無論渲染不渲染，只要計算屬性依賴的數據未發生變化，就永遠不變。

知乎

computed屬性與watch屬性

watch方法--觀察Vue實例上的數據變更,只要指定的數據改變就會執行預約的函數

例：

<div id="app">
  {{msg}}<br>
  是否改變？{{change}}
  <button @click='changeIt'>是時候改變了</button>
</div>

new Vue({
  el: '#app',
  data: {
    msg: '一寸光陰一寸金',
    change: 'NO'
  },
  watch: {
    //只要msg改變，這個方法就會執行
    msg(val, oldval) {
      this.change = 'YES'
    }
  },
  methods: {
    changeIt() {
      this.msg = '寸金難買寸光陰'
    }
  }
})

4、class與style綁定

綁定class的幾種語法

綁定class對象語法

---> 鍵是類名，值是布爾值，值須要定義在data中 {類名，布爾值}

例：

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    color: red
  }

</style>

<div id="app">
  <div :class='{draw1:style1,draw2:style2}'>對象語法</div>
</div>

new Vue({
  el: '#app',
  data: {
    style1: true,
    style2: true
  }
})

計算屬性表示：按鈕背景顏色切換

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    background-color: yellow;
  }

</style>

<div id="app">
  <input type="button" value='點擊' :class='drawing' @click='clickChange'>
</div>

new Vue({
  el: '#app',
  data: {
    style1: false,
    style2: true
  },
  computed: {
    drawing() {
      return {
        draw1: this.style1,
        draw2: this.style2
      }
    }
  },
  methods: {
    clickChange() {
      if (this.style1 === false && this.style2 === true) {
        this.style1 = true
        this.style2 = false
      } else {
        this.style1 = false
        this.style2 = true
      }
    }
  }
})

綁定class數組語法

[對應類名，對應類名]，類名在data中體現

例：

<style>
  .draw1 {
    background-color: skyblue;
  }

  .draw2 {
    color: red;
  }

</style>

<div id="app">
  <div :class='[style1,style2]'>數組語法</div>
</div>

new Vue({
  el: '#app',
  data: {
    style1: 'draw1',
    style2: 'draw2'
  }
})

或者

"['類名','類名']"

<div id="app">
  <div :class="['draw1','draw2']">數組語法</div>
</div>

數組對象語法混用

<style>
  .draw1 {
    background: skyblue;
  }

  .draw2 {
    color: red;
  }

</style>

<div id="app">
  <div :class='[{draw1 : isActive},style2]'>綁定class數組方式</div>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    style1: 'draw1',
    style2: 'draw2'
  }
})
</script>

綁定內聯樣式

{style屬性值，對應的值} 值在data中體現

<div id="app">
  <div :style="{'color':color,'fontSize':fontSize+'px'}">綁定內聯</div>
</div>

new Vue({
  el: '#app',
  data: {
    color: 'red',
    fontSize: 28
  }
})

！！注意！！

vue中只要是大寫字母，都會轉成-加小寫字母

如：

fontSize -> font-size

ahyHJKiJ -> ahy-h-j-ki-j

待補充待補充待補充......

每日一句

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