One: conditional rendering

instruction paraphrase
v-if = if
v-else = else
v-else-if Else if 
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>If, else if, else</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <h3>Example: if, else if, else</h3>
    <h2 v-if="type==='1'">A</h2>
    <h2 v-else-if="type==='2'">B</h2>
    <h2 v-else>C</h2>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box'.data: {
            type: '1',}})</script>
</html>
Copy the code

Two: list rendering

1. v-if+v-for+v-elseControl the display of shopping cart items

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-if + V-for + V-else controls the display of shopping cart items</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table.td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>My shopping cart</h2>
    <button @click="show">Refresh shopping cart</button>
    <br><br>
    <table v-if=! "" shopping_car.length==0">
        <tr>
            <td>Name of commodity</td>
            <td>The price</td>
        </tr>
        <tr v-for="item in shopping_car">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
        </tr>
    </table>
    <table v-else>
        <tr>
            <td>Name of commodity</td>
            <td>The price</td>
        </tr>
        <tr>
            <td>No information</td>
            <td>No information</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box'.data: {
            isActive: false.shopping_car: []},methods: {
            show() {
                this.shopping_car = [
                    {name: 'Threadripper 3990X'.price: '29999'},
                    {name: 'NVIDIA RTX 8000'.price: '59999'},
                    {name: 'ROG ZENITH II EXTREME'.price: '9999'},]}}})</script>
</html>
Copy the code

2. v-forIterate over groups of numbers (lists), objects (dictionaries), numbers

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-for traversal groups (lists), objects (dictionaries)</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table.td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>Array (list) for loop over</h2>
    <ul>
        <li v-for="(value,index) in list_test">{{index}}, {{value}}</li>
    </ul>

    <h2>Object (dictionary) for loop traversal</h2>
    <ul>
        <li v-for="(value,key) in dic_test">{{key}}, {{value}}</li>
    </ul>

    <h2>Array (list) sets object (dictionary) for loop over</h2>
    <table>
        <tr>
            <td>The name</td>
            <td>age</td>
            <td>gender</td>
            <td>nationality</td>
        </tr>
        <tr v-for="info in summary_test">
            <td>{{info.name}}</td>
            <td>{{info.age}}</td>
            <td>{{info.gender}}</td>
            <td>{{info.country}}</td>
        </tr>
    </table>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#box'.data: {
            list_test: ['First'.'second'.'Third'.'Forth'.'Fifth'].dic_test: {name: 'Darker'.age: 18.gender: 'male'},
            summary_test: [{name: 'Alan'.age: 23.gender: 'male'.country: 'America'},
                    {name: 'Ben'.age: 15.gender: 'male'.country: 'Australia'},
                    {name: 'Cindy'.age: 12.gender: 'female'.country: 'Japan'},
                    {name: 'Darker'.age: 18.gender: 'male'.country: 'China'},
                    {name: 'Elisa'.age: 26.gender: 'female'.country: 'Mexico'},]}})</script>
</html>
Copy the code

* * attention! ** In Vue:

  • An array oftheindexandvalueisAgainst the
  • objectthekeyandvalueIs alsoAgainst the

3. Key value description

Vue uses virtual DOM, which is compared with the native DOM, and then updates the data to improve the speed of data refresh (diFF algorithm is used for virtual DOM).

  • inv-forcycleArrays, objectsWhen, the suggestion is inControl/component/labelWrite aThe key attribute, the attribute value is unique
  • When the page is updated, DOM replacement (rendering) is accelerated
  • : key = "variable"

4. Array update and detection

Array operations that can detect changes:
  • Push: Last position added
  • Pop: Last position deleted
  • Shift: Delete the first position
  • Unshift: First position added
  • Splice: slice
  • Sort: sorting
  • Reverse: reverse
No changing array operation detected:
  • The filter () : filter
  • Concat () : Appends another array
  • Slice () :
  • The map () :
The reason:

The author rewrites the related methods (only part of the method is rewritten, but the other part is not)

Solutions:
// Method 1: Update the array with the index value (the data is updated, but the page is not changed)
vm.arrayList[0]
"Alan"
vm.arrayList[0] ='Darker'
"Darker"

// Method 2: Update the array with vue. set(object, index/key, value)
Vue.set(vm.arrayList, 0.'Darker')
Copy the code

Three: Event handling

The event paraphrase
input An event that is triggered when an input box is entered
change An event that fires when the value of an element changes
blur The event that fires when the input box loses focus

The essential difference between change and blur:

  • If the input field is empty and you lose focus, change will not trigger, but blur will

1. Filter cases

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Filter case</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="myText" @input="handleInput" placeholder="Please enter what to filter:"></p>
<! -- <p><input type="text" v-model="myText" @change="handleInput" placeholder="
<! -- <p><input type="text" v-model="myText" @blur="handleInput" placeholder="
    <ul>
        <li v-for="data in newList">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            myText: ' '.dataList: ['a'.'at'.'atom'.'be'.'beyond'.'cs'.'csrf'].newList: ['a'.'at'.'atom'.'be'.'beyond'.'cs'.'csrf'],},methods: {
            handleInput() {
                this.newList = this.dataList.filter(item= > {
                    // item.indexof (this.mytext) : the indexOf the string entered in the input box in the filter element
                    return item.indexOf(this.myText) > -1   // return elements with an index greater than 1: >-1 indicates inclusion})},}})</script>
</html>
Copy the code

2. Event modifiers

Event modifier paraphrase
.stop Handles only its own events, not events that bubble up in the parent control (to prevent event bubbling)
.self Handles only its own events, not events that bubble up child controls
.prevent Block the jump of link A
.once Events will only trigger once (for sweepstakes pages)

When using modifiers, order is important; The corresponding code is generated in the same order

  • withv-on:click.prevent.selfWill stopAll the clicks
  • whilev-on:click.self.preventWill only stopA click on the element itself
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event modifier</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
<! -- <ul @click="handleUl">-->
    <ul @click.self="handleUl">
<! -- <li v-for="data in dataList" @click="handleLi">{{data}}</li>-->
        <li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
        <li><a href="http://www.baidu.com">Don't intercept</a></li>
        <li><a href="http://www.baidu.com" @click="handleLink($event)">Click on the intercept</a></li>
        <li><a href="https://www.baidu.com" @click.prevent="handleLink">Click on the intercept</a></li>
        <li><button @click.once="test">Execute only once</button></li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            dataList: ['1'.'22'.'333'.'4444']},methods: {
            handleUl(ev){
                console.log('UL was clicked')},handleLi(){
                console.log('Li was clicked')
                ev.stopPropagation()    // Click the event to stop bubbling (passing time to the parent component)
            },
            handleLink(ev){
                ev.preventDefault()
            },
            test(){
                alert('Trigger only once')}}})</script>
</html>
Copy the code

3. Key modifier

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Key modifier</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <! -- <input type="text" v-model="myInput" @keyup="handleKey">-->
    <! -- <input type="text" v-model="myInput" @keyup.13="handleKey">-->
    <input type="text" @keyup="handleKey1">
    <input type="text" @keyup.enter="handleKey2">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            dataList: ['1'.'22'.'333'.'4444']},methods: {
            handleKey1(ev) {
                console.log('Pressed' + ev)
                // if (ev.keyCode==13){
                // console.log(' Enter key was pressed ')
                // }
            },
            handleKey2(ev) {
                console.log('Hit the Enter key.')}}})</script>
</html>
Copy the code

4. Bidirectional data binding

V – the use of the model

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText" placeholder="Please enter the content">You type: {{myText}}</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            myText: ' ',}})</script>
</html>
Copy the code

Fifth: form control

1. The checkbox is selected

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" placeholder="Please enter user name:"><br>
    <input type="password" placeholder="Please enter your password:"><br>
    <input type="checkbox" v-model="radio">Remember the username</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            myText: ' '.textBig: ' '.radio: false,}})</script>
</html>
Copy the code

2. The radio

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The radio</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="radio" v-model="radio" value="Male">male<input type="radio" v-model="radio" value="Female">female<input type="radio" v-model="radio" value="Confidential">A secret<br><br>Your chosen gender: {{radio}}</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            radio: ' ',}})</script>
</html>
Copy the code

3. Choose more

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>multi-select</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">

    <input type="checkbox" v-model="many" value="Basketball">basketball<input type="checkbox" v-model="many" value="Football">football<input type="checkbox" v-model="many" value="Baseball">baseball<input type="checkbox" v-model="many" value="Table tennis">Table tennis<br><br>{{many}}</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            many: [].}})</script>
</html>
Copy the code

4. Shopping cart case – Settlement

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shopping cart settlement</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table.td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>Name of commodity</td>
            <td>The price</td>
            <td>The number of</td>
            <td>choose</td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup"></td>
        </tr>
    </table>
    <br>{{checkGroup}}<br>Total price: {{getPrice ()}}</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            dataList: [{name: "Not today.".price: 99.number: 2},
                {name: 'Grapefruit'.price: 59.number: 1},
                {name: 'Kettle turning'.price: 89.number: 5},].checkGroup: []},methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // where I is the index
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price
            }
        }
    })
</script>
</html>
Copy the code

5. Shopping cart case – All/None

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>All/none</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <style>
        table.td {
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>Name of commodity</td>
            <td>The price</td>
            <td>The number of</td>
            <td>All/none<input type="checkbox" v-model="allChecked" @change="checkAll"></td>
        </tr>
        <tr v-for="item in dataList">
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td>{{item.number}}</td>
            <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
        </tr>
    </table>
    <br>{{checkGroup}}<br>Total price: {{getPrice ()}}</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            dataList: [{name: "Not today.".price: 99.number: 2},
                {name: 'Grapefruit'.price: 59.number: 1},
                {name: 'Kettle turning'.price: 89.number: 5},].checkGroup: [].allChecked: false,},methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {    // where I is the index
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                // this.allChecked = true
                // } else {
                // this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length; }}})</script>
</html>
Copy the code

6. Shopping cart case – Quantity plus or minus

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Control to add and subtract</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row">
    <div id="box" class="col-md-4 offset-md-1 text-center mt-5 ">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th scope="col">Name of commodity</th>
                <th scope="col">The unit price</th>
                <th scope="col">The number of</th>
                <th scope="col">All/none<input type="checkbox" v-model="allChecked" @change="checkAll"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in dataList">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button class="btn link btn-sm" @click="reduceNum(item)">-</button>
                    {{item.number}}
                    <button class="btn link btn-sm" @click="item.number++">+</button>
                </td>
                <td><input type="checkbox" :value="item" v-model="checkGroup" @change="checkOne"></td>
            </tr>
            <tr class="text-left">
                <td colspan="4">Total price: {{getPrice ()}}</tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            dataList: [{name: "Not today.".price: 99.number: 1},
                {name: 'Grapefruit'.price: 59.number: 1},
                {name: 'Kettle turning'.price: 89.number: 1},].checkGroup: [].allChecked: false,},methods: {
            getPrice() {
                let sum_price = 0
                for (i in this.checkGroup) {
                    sum_price += this.checkGroup[i]['number'] * this.checkGroup[i]['price']}return sum_price
            },
            checkAll() {
                if (this.checkGroup.length > 0) {
                    this.checkGroup = []
                } else {
                    this.checkGroup = this.dataList
                }
            },
            checkOne() {
                // if (this.checkGroup.length === this.dataList.length) {
                // this.allChecked = true
                // } else {
                // this.allChecked = false
                // }
                this.allChecked = this.checkGroup.length === this.dataList.length;
            },
            reduceNum(item) {
                if (item.number === 1) {
                    item.number = 1
                } else {
                    item.number--
                }
            }
        }
    })
</script>
</html>
Copy the code

Vi: V-model advanced

V-model lazy, number, trim

  • Lazy: Waits for the input box’s data binding time zone focus to change
  • **number: ** the first digit is reserved. The beginning of the letter, keep it all
  • ** Trim: ** Removes the leading whitespace
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-model lazy, number, trim</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <input type="text" v-model="myText1" placeholder="normal"> {{myText1}}
    <br>
    <input type="text" v-model.lazy="myText2" placeholder="lazy"> {{myText2}}
    <br>
    <input type="text" v-model.number="myText3" placeholder="number"> {{myText3}}
    <br>
    <input type="text" v-model.trim="myText4" placeholder="trim"> {{myText4}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box'.data: {
            myText1: ' '.myText2: ' '.myText3: ' '.myText4: ' ',}})</script>
</html>
Copy the code