手挽手帶你學VUE：三檔 VUE構造期內經常使用屬性

時間 2019-12-07

標籤手挽手 vue 構造期內經常使用屬性简体版

原文原文鏈接

視頻教程

因爲思否不支持視頻外鏈視頻請移步 http://www.henrongyi.top

你能學到什麼

手挽手帶你學VUE入門三檔,VUE構造器內部的各類屬性的使用，methods，computed，watch，filters這四個屬性，在工做中會常常用到。還有不少混合屬性例如mixin等，後期會有視頻單獨介紹，咱們如今先作到入門能夠開發，不經常使用的用法後期會給你們補充，學完這一期，你已經能夠開發一個小項目玩一下了。html

methods選項

methods是咱們VUE中的事件處理器，你能夠把方法寫在這裏面，而且在構造器內部經過this.方法名調用，以前的學習中咱們已經使用過這個方法，可是這裏強調一下，千萬不能夠用箭頭函數，畢竟這裏咱們的this是須要指向VUE實例的。在VUE構造器的外部咱們也能夠經過實例來調用方法。這裏給你們舉個例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <button v-on:click="add">+</button>{{num}}<button @click="minus">-</button>   
        <!-- 這裏咱們經過click來調用了add和minus方法 -->
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               num:1
            },
            methods:{
                add(){
                    this.num++
                },
                minus(){
                     this.num--
                    this.testMet()//這裏咱們經過this來調用事件處理器內的方法
                },
                testMet(){
                    console.log("我被調用了")
                }
            }
        })
        app.testMet()//這裏咱們經過app實例來調用事件處理器內的方法
    </script>
</body>
</html>

computed選項

還記得咱們第一期講的那個在差值表達式內寫簡單的JS表達式嗎{{message.split('').reverse().join('')}}，
實際上這樣處理數據是不優雅的，VUE爲咱們提供了computed這個選項來處理數據，咱們稱它爲計算屬性，當邏輯複雜的時候
咱們就應當使用 computed計算屬性了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello'
            },
            computed: {
                // 計算屬性的 getter
                reversedMessage: function () {
                // `this` 指向 app 實例
                return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

這是一個計算屬性的簡單用例，實際上，計算屬性內部存在get和set兩個方法，咱們稱他爲 getter和setter，這裏我給你們上代碼講解。vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{firstName}}</p>
        <p>{{lastName}}</p>
        <p>{{fullName}}</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
    el: '#app',
    data: {
        firstName: 'Foo',
        lastName: 'Bar',
    },
  computed: {
    // 計算屬性的 getter
    fullName:{
        // getter 在使用數據的時候觸發
        get: function () {
            return this.firstName + ' ' + this.lastName
            },
        // setter 在修改數據的時候觸發 newValue 就是咱們修改完成之後的數據
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
            }
        }
    }
})
    </script>
</body>
</html>

vm.fullName = 'John Doe' 你們能夠在外部直接修改fullName或者在控制檯修改均可以觸發fullName的set事件來修改 firstName和lastNamenpm

watch選項

Vue中咱們想要盯着一個數據，在它發生變化的時候就要作什麼事，這時候咱們就要用到watch偵聽器。
具體用法也是很簡單的，咱們先來一個淺監聽。每次改變都會觸發監聽的function 它接受兩個參數 當前的val和改變前的
oldval，咱們能夠根據這個作出判斷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{Name}}</p>
        <p>{{ChangeName}}</p>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
        el: '#app',
            data: {
                Name: 'QM',
                ChangeName: 'Cool',
                Names: 'QMS',
                NameDeep: 'QMDeep',
                NameImm: 'QMImm',
                NameObj:{
                    QM: 'shuai'
                }
                },
            watch:{
                Name:function (val,oldval) {
                    // 能夠直接在這裏寫方法
                    console.log(val,oldval)
                },
                Names:[
                    function (val,oldval) {
                        // 多個方法可使用數組的形式
                        console.log(val,oldval)
                    },
                    function (val,oldval) {
                        // 多個方法可使用數組的形式
                        console.log(val,oldval)
                    }
                ],
                 // 深度 watcher
                NameDeep: {
                handler: function (val, oldVal) { /* ... */ },
                deep: true
                },
                // 該回調將會在偵聽開始以後被當即調用
                NameImm: {
                handler: function (val, oldVal) { /* ... */ },
                immediate: true
                },
                //Obj的形式
                'NameObj.QM':function (val, oldVal){
                     /* ... */
                }
                
            }
        })
    </script>
</body>
</html>

filters選項

Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。過濾器能夠用在兩個地方：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .active{
            color:red
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 在 `v-bind` 中 -->
            <div v-bind:id="rawId | capitalize">
                <!-- 在雙花括號中 -->
                {{ message | capitalize }}
            </div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       var app = new Vue({
        el: '#app',
            data: {
               message: "test",
               rawId: "change"
            },
            filters:{
                'capitalize':function(value){
                    if (!value) return ''
                    value = value.toString()
                    return value.charAt(0).toUpperCase() + value.slice(1)
                }
            }
                
            
        })
    </script>
</body>
</html>