天天看點
傳回

Vue學習筆記——1.基礎入門1.第一個Vue執行個體2.Vue執行個體的生命周期3.綁定資料4.指令5.計算屬性6.監聽器

Vue學習筆記——1.基礎入門

  • 1.第一個Vue執行個體
  • 2.Vue執行個體的生命周期
  • 3.綁定資料
    • {{ msg }}
    • v-once
    • v-html
    • v-bind
  • 4.指令
    • v-if/v-else
    • v-on
    • v-for
    • v-model
  • 5.計算屬性
  • 6.監聽器

1.第一個Vue執行個體

當一個 Vue 執行個體被建立時，它将 data 對象中的所有的 property 加入到 Vue 的響應式系統中。當這些 property 的值發生改變時，視圖将會産生“響應”，即比對更新為新的值。

當這些資料改變時，視圖會進行重渲染。值得注意的是隻有當執行個體被建立時就已經存在于 data 中的 property 才是響應式的。也就是說如果你添加一個新的 property是不會産生響應的

// 我們的資料對象
var data = { a: 1 }

// 該對象被加入到一個 Vue 執行個體中
var vm = new Vue({
  data: data
})

// 獲得這個執行個體上的 property
// 傳回源資料中對應的字段
vm.a == data.a // => true

// 設定 property 也會影響到原始資料
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

2.Vue執行個體的生命周期

Vue學習筆記——1.基礎入門1.第一個Vue執行個體2.Vue執行個體的生命周期3.綁定資料4.指令5.計算屬性6.監聽器

圖中标紅的方法都是Vue留給我們進行拓展的方法，也就是我們常說的鈎子函數/回調函數

其中在mounted的部分我們會發現有一個循環圓圈。這代表vue執行個體在完成渲染後進行對屬性的監聽，并對資料的改變做出響應，實作再次渲染。

3.綁定資料

{{ msg }}

資料綁定最常見的形式就是使用“Mustache”文法 (雙大括号) 的文本插值：

在渲染階段，vue會把{{ msg }} 标簽将會被替代為對應資料對象上 msg property 的值。無論何時，綁定的資料對象上 msg property 發生了改變，插值處的内容都會更新。

v-once

通過使用 v-once 指令，能執行一次性地插值，當資料改變時，插值處的内容不會更新。但請留心這會影響到該節點上的其它資料綁定

v-html

雙大括号會将資料解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

前者會将html的标簽當作字元串原封不動的列印出來

後者則會進行解釋

注：直接作為 HTML——會忽略解析 property 值中的資料綁定。注意，你不能使用 v-html 來複合局部模闆

v-bind

{{}}文法不能作用在 HTML的屬性上，如果我們需要将屬性值與data中屬性綁定應該使用 v-bind 指令

該指令可以以：符号代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <span v-bind:title="msg">info</span>
    </div>
    <script>
        var vue = new Vue({
            el:'#app',
            data:{
                msg:'Hello World'
            }
        });
    </script>
</body>
</html>

4.指令

指令 (Directives) 是帶有 v- 字首的特殊 attribute。指令 attribute 的值預期是單個 JavaScript

表達式 (v-for 是例外情況，稍後我們再讨論)。指令的職責是，當表達式的值改變時，将其産生的連帶影響，響應式地作用于 DOM

v-if/v-else 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-if="ok">OK</h1>
        <h1 v-else>NOT OK</h1>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                ok:true
            }
        });
    </script>
</body>
</html>

v-on

該指令可以以@符号代替

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
        <input type="button" value="button" v-on:click="sayName">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:"張三"
        },
        methods:{
            sayName:function () {
                alert(this.name)
            }
        }
    });
</script>
</body>
</html>

v-for 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="i in names">{{i.name}}</li>
    </ul>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            names:[
                {name:"張三"},
                {name:"李四"}
            ]
        }
    });
</script>
</body>
</html>

v-model

該标簽可以進行資料的雙向綁定，即我們輸入框中發生變化，vue中綁定的資料也發生變化。反之亦然

下面例子以文本框、多選框、單選框為例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">{{msg}}
    <p></p>
    性别：
    <input type="radio" name="gender" v-model="gender" value="男">男
    <input type="radio" name="gender" v-model="gender" value="女">女
    <br>
    選中了{{gender}}
    <p></p>
    興趣：
    <input type="checkbox" name="interest" v-model="interest" value="籃球">籃球
    <input type="checkbox" name="interest" v-model="interest" value="足球">足球
    <input type="checkbox" name="interest" v-model="interest" value="棒球">棒球
    <br>
    選中了{{interest}}
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:"123",
            gender:'',
            interest:[]
        }
    });
</script>
</body>
</html>

5.計算屬性

計算屬性，顧名思義，擁有計算行為的一個屬性，該屬性能夠根據其他值進行計算傳回一個屬性值。

計算屬性需要寫在computed屬性中。

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 執行個體
      return this.message.split('').reverse().join('')
    }
  }
})

該屬性與方法類似，同樣是調用方法傳回一個值，但是不同的地方在于方法每次調用都會進行計算。而計算屬性會在計算一次後将結果放入緩存，隻要計算所依賴的值沒有發生變化，該值也不會發生變化。

其實計算屬性可以看作Java中具有get/set方法的成員變量，它預設隻要get方法，而我們為其賦予的自定義方法就是為他賦予了get方法，當然也可以賦予set方法

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

現在再運作 vm.fullName = ‘John Doe’ 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新.

6.監聽器

雖然計算屬性在大多數情況下更合适，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過 watch 選項提供了一個更通用的方法，來響應資料的變化。當需要在資料變化時執行異步或開銷較大的操作時，這個方式是最有用的。

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
前端 vue
上一篇: vue學習：1.vue 生命曆程--鈎子函數
下一篇: 彭博社古爾曼爆料，AppleWatchSeries9将搭載基于A15仿生的S9晶片。這管牙膏擠爆了，畢竟現在的S8跟兩年

繼續閱讀