1.文本(插值操作)

数据绑定最常见的形式就是使用”Mustache”语法（双大括号）的文本插值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     {{message}}
  10.     Hello,{{message}}
  11. <!--    Mustache语法不仅可以写变量，还可以写表达式-->
  12.     {{firstName+lastName}}
  13.     {{firstName+' '+lastName}}
  15. </div>
  17. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  18. <script>
  19.     // let定义变量，const定义常量
  20.     const vue = new Vue({
  21.         el: '#app',
  22.         data: {
  23.             message: '你好啊',
  24.             firstName: 'Lewis',
  25.             lastName: 'Liu'
  26.         }
  27.     })
  29. </script>
  30. </body>
  31. </html>

将Model View中的msg的与该大括号标签内容绑定，无论何时，两处的值只要发生了改变，另一处的其他值则会更新

2.v-once的使用

该值只能被修改一次

    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>

3.v-html的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-html="url"></h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            url: '<a href="http://www.baidu.com">百度一下</a>'
        }
    })

</script>
</body>
</html>

4.v-text的使用

和Mustache语法插值操作类似，但不够灵活

5.v-pre的使用

禁止Mustache解析，让里面的值原封不动的显示

6.v-cloak的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>{{message}}</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    setTimeout(function () {
        const vue = new Vue({
            el: '#app',
            data: {
                message: '你好啊'
            }
        })
    },1000)


</script>
</body>
</html>

7.v-bind:动态绑定

1.动态绑定连接

<div id="app">
    <img v-bind:src="imageUrl" alt="">
<!--    语法糖-->
    <img :src="imageUrl" alt="">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            imageUrl: 'https://cdn.nlark.com/yuque/0/2020/png/1930265/1602982305611-58eefcda-bc2d-4b35-a57f-cd8337fac016.png'
        }
    })

</script>

2.v-bind动态绑定class

<style>
    .active{
        color: red;
    }
</style>
<body>
<div id="app" :class="{active: false,lind: false}">Lewis</div>
<!--<div id="app" :class="{active: true,lind: false}">Lewis</div>-->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            active: 'active'
        }
    })

3.v-bind绑定style

<div id="app">
    <h2 :style="{fontSize: finalSize+'px'}">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            finalSize: 10
        }
    })

</script>

8.Vue计算属性

1.基本操作

<div id="app">
    <h2>{{fullName}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            firstName: 'Liu',
            lastName: 'Lewis'
        },
        computed: {
            fullName: function () {
                return this.firstName+ ' ' +this.lastName
            }
        }
    })

</script>

2.复杂操作

<div id="app">
    <h2>{{totalPrice}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // let定义变量，const定义常量
    const vue = new Vue({
        el: '#app',
        data: {
            books: [
                {id:10,price:101},
                {id:11,price:103},
                {id:12,price:104},
                {id:13,price:102}
            ]
        },
        computed: {
            totalPrice: function () {
                let result = 0;
                for(let book of this.books){
                    result+=book.price;
                }
                return result;
            }
        }
    })

</script>

3.Getter和Setter方法

<div id="app">
    <h2>{{fullName}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: 'Lewis',
            lastName: 'Liu'
        },
        computed: {
            fullName: {
                set: function (newValue) {
                    console.log("检测到新值："+newValue);
                    let split = newValue.split(' ');
                    this.firstName = split[0];
                    this.lastName = split[1];
                },
                get: function () {
                    return this.firstName+ ' '+this.lastName;
                }
            }
        }
    })
</script>

image.png

4.computed和methods方法的区别


<div id="app">
    <h2>{{fullNameByM()}}</h2>
    <h2>{{fullNameByM()}}</h2>
    <h2>{{fullNameByM()}}</h2>
    <h2>{{fullNameByM()}}</h2>

    <h2>{{fullNameByC}}</h2>
    <h2>{{fullNameByC}}</h2>
    <h2>{{fullNameByC}}</h2>
    <h2>{{fullNameByC}}</h2>
    <h2>{{fullNameByC}}</h2>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            firstName: "Lewis",
            lastName: "Liu"
        },
        methods: {
            fullNameByM: function () {
                console.log("method被调用了")
                return this.firstName + " " + this.lastName;
            }
        },
        computed: {
            fullNameByC: {
                get: function () {
                    console.log("computed被调用了")
                    return this.firstName + " " + this.lastName;
                }
            }
        }
    })
</script>

image.png

9.v-on事件监听

<div id="app">
    <h2>{{counter}}</h2>
    <button @click="counter++"></button>
    <button @click="counter--"></button>
    <button @click="increment"></button>
    <button @click="decrement"></button>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            increment(){
                this.counter++;
            },
            decrement(){
                this.counter--;
            }
        }
    })
</script>

10.v-on修饰符

<div id="app">
<!--    阻止事件冒泡-->
    <div @click="divClick">
        aaaaa
        <button @click.stop="btnClick">按钮</button>
    </div>
<!--    阻止默认事件，例如submit-->
    <div @click.prevent="">
        <input type="submit" @click.prevent="submitClick">
    </div>
<!--    监听键盘事件-->
    <input type="text" @keyup.enter="keyUp">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello"
        },
        methods: {
            btnClick(){
                console.log("btnclick");
            },
            divClick(){
                console.log("divclick");
            },
            submitClick(){
                console.log("subclick");
            },
            keyUp(){
                console.log("keyUp");
            }
        }
    })
</script>

11.条件判断

v-if、v-else、v-else-if

<div id="app">
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=70">及格</h2>
    <h2 v-else>不及格</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 90,
            isShow: true
        }
    })
</script>

12.v-show

<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
    <h2 v-show="isShow">{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello",
            isShow: true
        }
    })
</script>

v-if和v-show的区别：

  1. v-if：当条件为false时，v-if的元素根本不会存在
  2. v-show: 当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none

13.v-for遍历数组

<body>
<div id="app">
<!--    顺序为：item,index-->
    <ul>
        <li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
    </ul>

<!--    顺序为：value,key,index-->
    <ul>
        <li v-for="(a,b,c) in obj">{{a}},{{b}},{{c}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello",
            names: ['why','coder','Lewis','Liu'],
            obj :{
                name: 'LewisLiu',
                age: '21',
                height: '170'
            }
        }
    })
</script>

14.组件的key属性

<div id="app">
    <ul>
        <li v-for="item in array" :key="item">{{item}}</li>
    </ul>
</div>

key的主要作用是为了高效更新虚拟DOM，使用key来给每个节点做一个唯一的标识，这样diff算法就能正确识别每个节点，并找到正确的位置进行插入
**

15.数组与响应式

<div id="app">
    <ul>
        <li v-for="item in letters" >{{item}}</li>
    </ul>
    <button @click="btnClick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            letters: ['a','b','c','d','e']
        },
        methods: {
            btnClick() {
                // 1.push可以做到响应式
                // this.letters.push("aaa")

                // 2.pop()可以做到响应式，pop为删除最后一个元素
                // this.letters.pop()

                // 3.shift()可以做到响应式，shift为删除第一个元素
                // this.letters.shift();

                // 4.unshift()可以做到响应式，它为在数组前添加元素
                // unshift()

                // 5.splice()，响应式
                //作用：可以删除元素/添加元素/替换元素
                //删除：splice(start)
                //替换：splice(start,2,'x','y')
                //插入：splice(start,0,'x','y')

                // 6.sort()，响应式

                // 7.reverse()，响应式

                // 8.(1)但通过索引修改数组元素，是没有响应式的
                // this.letters[0] = 'aaa';
                //  (2)正确替换元素的方式：
                // this.letters.splice(0,1,'aaa')
                //  (3)通过Vue实现修改
                // Vue.set(this.letters,0,'aaa')
            }
        }
    })
</script>

16. v-model数据双向绑定

1.基本使用

v-bind:value实现的是单向绑定，当input中的value发生改变时，data中的值不改变；而data中的值改变时，input中的内容会改变

v-model能实现数据的双向绑定

v-model其实是一个语法糖，它的本质上包含两个操作：

  1. v-bind绑定一个value属性

  2. v-on指令给当前元素绑定input事件

    <div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
 el: '#app',
 data: {
   message: "hello"
 }
})
</script>

    2.修饰符

  3. lazy：默认情况下，数据与输入框是同步的，每次改变都会影响到彼此。而lazy修饰符可以在失去焦点或者按下回车时，再进行同步

  4. number：改变绑定数据的类型为number（默认为String）
  5. trim：去掉空格 ```html

{{string1}}

```