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

Mr.奇淼發表於2019-01-03
Vue

視訊教程

由於掘金不支援視訊連結 視訊請移步 www.henrongyi.top

你能學到什麼

手挽手帶你學VUE入門三檔,VUE構造器內部的各種屬性的使用，methods，computed，watch，filters這四個屬性，在工作中會經常用到。還有很多混合屬性例如mixin等，後期會有視訊單獨介紹，我們現在先做到入門可以開發，不常用的用法後期會給大家補充，學完這一期，你已經可以開發一個小專案玩一下了。

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，這裡我給大家上程式碼講解。

<!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和lastName

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>
複製程式碼

相關文章