自學Vue的第03天

Koko君發表於2019-06-07
Vue

單向資料流 v-bind:屬性

繫結屬性值，簡寫::屬性

單向資料繫結：記憶體改變影響頁面

<body>
    <div id="app">
        
    </div>

    <script>
        new Vue({
            el: '#app',
            template: `
            <div>
                <input type="text" v-bind:value='name'><hr/>
            </div>
            `,
            data: function () {
                return {
                    name: '哇哈哈'
                }
            }
        })
    </script>
</body>
複製程式碼

輸入框的值隨著name的變化而變化

雙向資料流 v-model

只作用於有value屬性的元素

雙向資料繫結：記憶體改變影響頁面，頁面改變也會影響記憶體

<body>
    <div id="app">
        
    </div>

    <script>
        new Vue({
            el: '#app',
            template: `
            <div>
                <input type="text" v-bind:value='name'><hr/>
                <input type="text" v-model='name'>
            </div>
    
            `,
            data: function () {
                return {
                    name: '哇哈哈'
                }
            }
        })
    </script>
</body>
複製程式碼

第二個輸入框的值可以影響到第一個輸入框

其原理是：

1、v-model輸入框中的name傳送改變

2、vue物件的name改變

3、v-bind:value輸入框改變

事件繫結 v-on

v-on:事件名="表示式||函式名"簡寫：@事件名="表示式||函式名"

事件可以是原生的，也可以是自定義的

<script>
    new Vue({
        el: '#app',
        template: `
        <div>
            <input type="text" v-bind:value='name'><hr/>
            <input type="text" v-model='name'><hr/>
            <button v-on:click='name="name改變後"'>點選改變name變數</button>
        </div>
        `,
        data: function () {
            return {
                name: '哇哈哈'
            }
        }
    })
</script>
複製程式碼
  • 點選觸發自定義函式
<script>
    new Vue({
        el: '#app',
        template: `
        <div>
            <input type="text" v-bind:value='name'><hr/>
            <input type="text" v-model='name'><hr/>
            <button v-on:click='change'>點選改變name變數</button>
        </div>
    
        `,
        data: function () {
            return {
                name: '哇哈哈'
            }
        },
        methods:{
            change:function(){
                this.name = this.name+"哇哈哈=";
            }
        }
    })
</script>
複製程式碼

過濾器 filters

正常情況下，vue資料直接被模板獲取，而filters，允許在vue資料改變後，再被filters加工一次，然後再被模板獲取

自學Vue的第03天


<body>
    <div id="app">
        輸入：<input type="text" name="" id="" v-model='instring'><br/>
        輸出：{{instring}}<br/>
        翻轉輸出：{{instring | reversal}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    instring: ''
                }
            },
            filters:{
                reversal(val){
                    // 字串翻轉
                    return val.split('').reverse().join('');
                }
            }
        })
    </script>
</body>
複製程式碼

偵聽器 watch

<body>
    <div id="app">
        監聽器<br />
        姓：<input type="text" name="" id="" v-model='firstName'><br/>
        名：<input type="text" name="" id="" v-model='lastName'><br/>
        {{fullName}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: 'Foo',
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                }
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    </script>
</body>
複製程式碼

這裡的function引數，第一個引數是變更後的值，其實還有第二個引數，就是變更前的值

  • 開啟深度監聽

如果我們監聽的不是一個基本型別，而是一個物件，那麼就要開啟深度監聽才能檢測到變化

<body>
    <div id="app">
        監聽器<br />
        姓：<input type="text" name="" id="" v-model='firstName.aa'><br/>
        名：<input type="text" name="" id="" v-model='lastName'><br/>
        {{fullName}}<br/>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: {aa:'Foo'},
                    lastName: 'Bar',
                    fullName: 'Foo Bar'
                }
            },
            watch: {
                firstName:{
                    handler(val){
                        this.fullName = val.aa + ' ' + this.lastName
                    },
                    //開啟深度監聽
                    deep:true
                },
                lastName: function (val) {
                    this.fullName = this.firstName.aa + ' ' + val
                }
                
            }
        })
    </script>
</body>
複製程式碼

計算屬性 computed

<body>
    <div id="app">
        監聽器<br />
        姓：<input type="text" name="" id="" v-model='firstName'><br />
        名：<input type="text" name="" id="" v-model='lastName'><br />
        {{fullName}}<br />
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {
                    firstName: 'Foo' ,
                    lastName: 'Bar'
                }
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })
    </script>
</body>
複製程式碼

相關文章