Bidirectional data binding

What is bidirectional data binding? Data changes affect the view, and view changes affect the data. This bidirectional effect is called bidirectional data binding.

<input type="text" :value='value' @input='handleInput'> {{value}}
<input type="text" v-model='value'>{{value}}

<script>
    let app = new Vue({
        el: '#app',
        data: {
            value: 'lheng'
        },
        methods:{
			handleInput(e){
				console.log(e.target.value)
                this.value = e.target.value
			}
		}
</script>

The above is a manual implementation of bidirectional data binding, while vue provides us with grammatical sugar, and v-model binds value values.

<div id="app">
	<!--textarea-->
    <textarea v-model='value' name="" id="" cols="30" rows="10"></textarea> {{value}}
    <hr>
    <!--checkbox-->
    <input type="checkbox" name="" id="" v-model='show'> {{show}}
    <hr>
    <!--checkbox Multiple selection-->
    <label for="html">html</label>
    <input type="checkbox" name="html" value="html" id="html" v-model='checkedList'>
    <label for="js">js</label>
    <input type="checkbox" name="" value="js" id="js" v-model='checkedList'>
    <label for="css">css</label>
    <input type="checkbox" name="" value="css" id="css" v-model='checkedList'> {{checkedList}}
    <hr>
    <!--radio Single election-->
    <label for="html">html</label>
    <input type="radio" name="" id="html" value="html" v-model='picked'>
    <label for="css">css</label>
    <input type="radio" name="" id="css" value="css" v-model='picked'>
    <label for="vue">vue</label>
    <input type="radio" name="" id="vue" value="vue" v-model='picked'>{{picked}}
    <hr>
    <!--select Single election-->
    <select name="" id="" v-model='selected'>
        <option value="" disabled>Please choose</option>
        <option value="html">html</option>
        <option value="js">js</option>
        <option value="css">css</option>
    </select> {{selected}}
    <!--select Multiple selection-->
    <select name="" id="" v-model='selectList' multiple>
            <option value="" disabled>Please choose</option>
            <option value="html">html</option>
            <option value="js">js</option>
            <option value="css">css</option>
        </select> {{selectList}}
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            value: 'lheng',
            show: true,
            checkedList: [],
            picked: '',
            selected: '',
            selectList: []
        },
        
    })
</script>

Listener and Computing Properties

We want to implement a function, an attribute is made up of other attributes, if other attributes change, this attribute will also change.

<div id="app">
    {{descd()}} {{looks}}
    <!-- Use methods When dealing with data binding, updates to other data in the view will occur. methods It will also be re-rendered. -->
    <hr> {{desc}} {{looks}}
    <!-- Use watch Listening for individual attributes solves this problem, but if there is too much data, it can lead to code redundancy. -->
    <hr>
    <!-- So what do we need? computed Computing attributes, which are executed only if the internal attributes are updated -->
    <!-- Search order  data>methods>computed -->
    {{descdd }}
    <!-- computed The name of the function in the data Attributes in the -->
</div>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            name: 'lheng',
            age: 18,
            looks: 'handsome',
            // desc: 'name:lheng,age:18'
        },
        methods: {
            descd() {
                console.log('---methods---');
                return `name:${this.name},age:${this.age}`
            }
        },
        watch: {
            name() {
                console.log('---watch---');
                this.desc = `name:${this.name},age:${this.ag
            },
            age() {
                this.desc = `name:${this.name},age:${this.ag
            }
        },
        computed: {
            descdd() {
                console.log('---computed---');
                return `name:${this.name},age:${this.age}`
            }
        }
    })
</script>

So when do we use methods, watch, computed?

• When it comes to event methods, use methods
• When listening for a single attribute, use watch
• When an attribute needs to be derived from other attributes, computed is used