自學Vue的第03天

時間 2019-12-05

標籤自學 vue 03天简体版

原文原文鏈接

單向數據流 v-bind:屬性

綁定屬性值，簡寫::屬性javascript

單向數據綁定：內存改變影響頁面html

<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的變化而變化vue

雙向數據流 v-model

只做用於有value屬性的元素java

雙向數據綁定：內存改變影響頁面，頁面改變也會影響內存app

<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>
複製代碼

第二個輸入框的值能夠影響到第一個輸入框函數

其原理是：this

一、v-model輸入框中的name發送改變spa

二、vue對象的name改變code

三、v-bind:value輸入框改變cdn

事件綁定 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加工一次，而後再被模板獲取

<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>
複製代碼

相關標籤/搜索

每日一句

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